Float Right Button on RadFileExplorer not working in FireFox

5 posts, 1 answers
  1. Adam
    Adam avatar
    19 posts
    Member since:
    Dec 2011

    Posted 10 Mar 2012 Link to this post

    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?
  2. Bozhidar
    Admin
    Bozhidar avatar
    678 posts

    Posted 12 Mar 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Adam
    Adam avatar
    19 posts
    Member since:
    Dec 2011

    Posted 14 Mar 2012 Link to this post

    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
  5. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    678 posts

    Posted 15 Mar 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Adam
    Adam avatar
    19 posts
    Member since:
    Dec 2011

    Posted 15 Mar 2012 Link to this post

    That did it!  Thanks a bunch.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017