RadToolBarButton Float: Right - FireFox Display Problem

6 posts, 1 answers
  1. Landon
    Landon avatar
    66 posts
    Member since:
    Nov 2010

    Posted 13 Dec 2010 Link to this post

    Hi,

    I'm currently using the following CSS to Float my RadToolBar Buttons on the Right:
    div.RadToolBar .rtbUL { width: 100%; }
     
    div.RadToolBar .rightButton  { float: right; }

    However, when my page is displayed in FireFox my buttons are displayed Floating to the right, but on a second line under the first. Is there any way to prevent this from happening in FireFox? I have attached an image of exactly what is happening.

    Thanks,

    Landon
  2. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 14 Dec 2010 Link to this post

    Hello Landon,

    I have to assume the issue is caused by the,  width:100% style applied to rtbUL. Try setting it to a smaller value and see if that helps.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 14 Dec 2010 Link to this post

    Or just remove the width:100% style entirely.
  5. Landon
    Landon avatar
    66 posts
    Member since:
    Nov 2010

    Posted 14 Dec 2010 Link to this post

    Hi Cori,

    Thanks for your quick reply. Unfortunately that doesn't solve the problem. Changing/Removing the rtbUL value only moves the buttons around on the second line, not only in FireFox, but it disables the "float: right" in other browsers (ex. IE, Safari).

    I have attached an updated image of the ToolBar without the "div.RadToolBar .rtbUL { width: 100%; }" CSS.

    Best Regards,

    Landon
  6. Answer
    Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 15 Dec 2010 Link to this post

    Hello Landon,

    If your floating something to the right, it needs to appear before the control it going to float on the right of. Like this example:

    <div id="container">
        <div id="toolbar" style="float:right;">I'm floating on the right</div>
        <div id="staticElem">I'm not floating</div>
    </div>

    That way it doesn't appear on the second line, but on the same line as the content it's floating on the right of.

    To solve you second problem, set the width to a small enough value to contain the toolbar without causing it to wrap or cause two lines to appear.

    I hope that helps.
  7. Landon
    Landon avatar
    66 posts
    Member since:
    Nov 2010

    Posted 15 Dec 2010 Link to this post

    Ah,

    That was my exact problem, the occurring order of the code! My mistake, I should have noticed this earlier. That would explain why it only happens on my one page.

    Thanks again!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017