Float Right Button on RadFileExplorer not working in FireFox

[Adam]

I have a RadFileExplorer on a page with custom buttons in the toolbar.  Logoff and Administration buttons should go to the right.  Here is my CSS on the control:

<style type="text/css">
    div.RadToolBar .rtbUL { width: 100%; }

    div.RadToolBar .rightButton  {
        float: right;
    }
    /* Set the desired properties to the custom buttons */
    a.adminLoginStyleClass.rtbWrap .rtbText
    {
        font-size: 12px;
        background: url('./images/administration.png') no-repeat left center;
    }
            
    a.logoffStyleClass.rtbWrap .rtbText
    {
        font-size: 12px;
        background: url('./images/logoff.png') no-repeat left center;
    }
</style>

And my codebehind in the Page_Load:

RadToolBarButton logoffbutton = new RadToolBarButton("Logoff");
logoffbutton.Value = "logoffcommand";
logoffbutton.CssClass = "logoffStyleClass";
logoffbutton.OuterCssClass = "rightButton";
logoffbutton.Attributes.Add("onclick", "window.location.href='EndSession.aspx'");
RadFileExplorer1.ToolBar.Items.Add(logoffbutton);

RadToolBarButton adminLogin = new RadToolBarButton("Administration");
adminLogin.Value = "admincommand";
adminLogin.CssClass = "adminLoginStyleClass";
adminLogin.OuterCssClass = "rightButton";
adminLogin.Attributes.Add("onclick", "window.location.href='Admin'");
RadFileExplorer1.ToolBar.Items.Add(adminLogin);

This works beautifully in Chrome and IE however in FireFox the buttons show in the right on a second row.  I have attached a screenshot.  Can anyone help?

[Bozhidar]

Hi,

Actually FireFox behaves properly. You have in your code the following:

div.RadToolBar .rtbUL { width: 100%; }

Which says to the default navigation to have a width of 100%, and on the same visual row you want to place another HTML element, but once the .rtbUL is already taking 100% the second (right floated) could not be placed on the same row.

I would suggest you to try the following code:

div.RadToolBar .rtbUL,
 div.RadToolBar .rightButton
{
display: inline-block;
zoom: 1;
*display: inline;
}

div.RadToolBar .rightButton
{
float: right;
}

That will make both nav bars to have a width not 100%, but the actual one that is necessary and in that case the default .rtbUL will be much shorter than 100% and there will be enough space for your custom nav bar to be placed on the same row and not bellow.

All the best,
Bozhidar
the Telerik team

[Adam]

Thank you for your response.  I tried your code however it still didn't work.  I attached a screenshot showing the FireFox results and also the Internet Explorer 9 results.  IE9 works great, Chrome works great, FireFox fails.  Any other suggestions?

Thank you,
Adam

[Bozhidar]

Hello,

Try the following, it works on my side:

<style type="text/css">
        div.RadToolBar .rtbUL
        {
            width: 100%;
        }

        div.RadToolBar .rightButton
        {
            float: right;
        }

        @-moz-document url-prefix() {
          div.RadToolBar .rightButton {
             margin-top:-22px;
          }
        }
        /* Set the desired properties to the custom buttons */
        a.adminLoginStyleClass.rtbWrap .rtbText
        {
            font-size: 12px;
            background: url('./images/administration.png') no-repeat left center;
        }

        a.logoffStyleClass.rtbWrap .rtbText
        {
            font-size: 12px;
            background: url('./images/logoff.png') no-repeat left center;
        }
    </style>

All the best,
Bozhidar
the Telerik team

[Adam]

That did it!  Thanks a bunch.