Center toolbar on page

8 posts, 0 answers
  1. Bruce Hochstetler
    Bruce Hochstetler avatar
    155 posts
    Member since:
    Apr 2007

    Posted 25 Jun 2008 Link to this post

    Hi,

    With the new toolbar, I no longer can position the toolbar center on the page. It appears the toolbar is in a div component with a float:left. I've added the following to the head of my page:
        <style type="text/css">
            div.RadToolBar
            {
                float:none;
            }
        </style>

    Then I put the toolbar in a <table style="width:100%">
    and the <tr align="center"> and placed the toolbar in the <td>... nothing, still stays aligned left. I've tried setting the toolbar's style="float:none"... and no effect. How about a property that sets the alignment on the page?

    Thanks,
    Bruce
  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 27 Jun 2008 Link to this post

    Hi Bruce Hochstetler,

    Setting the floating of the RadToolBar to 'none' will cause it to stretch, thus centering the 100% wide toolbar does not work. Therefore, you should set its width and disable the floating, e.g.:
    div.RadToolBar 
        floatnone
        width300px/* requires fine-tuning */ 
        margin: 0 auto

    Please note that due to the usage of the automatic horizontal margin the toolbar can be centered within its container without a table.

    Sincerely yours,
    Alex
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bruce Hochstetler
    Bruce Hochstetler avatar
    155 posts
    Member since:
    Apr 2007

    Posted 27 Jun 2008 Link to this post

    Hi Alex,

    The only additional thing I had to do to get it to work was adding a style for the body.
    BODY {
        text-align: center;
    }

    or optionally put the RadToolBar in a div and add the style="text-align: center". It seems without that, the toolbar continues to align left.

    Thanks,
    Bruce
  5. Bruce Hochstetler
    Bruce Hochstetler avatar
    155 posts
    Member since:
    Apr 2007

    Posted 27 Jun 2008 Link to this post

    Hi Alex,

    I have additional information to share. The previous style snippets do indeed work as long as the toolbar remains outside the confines of other controls. When I tried applying the same style attributes on a page that had a toolbar embedded in a RadSplitter/RadPane - no joy... I get a left adjusted toolbar. Any thoughts on how to overcome this issue?

    Thanks,
    Bruce
  6. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 30 Jun 2008 Link to this post

    Hello Bruce Hochstetler,

    I am attaching a sample page that achieves the desired effect. There were two options, either to center the whole RadToolBar or to center only the buttons within it - both scenarios are supported (but the CSS rules should be switched - see the comments in the page).

    Sincerely yours,
    Alex
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  7. Bruce Hochstetler
    Bruce Hochstetler avatar
    155 posts
    Member since:
    Apr 2007

    Posted 30 Jun 2008 Link to this post

    Hi Alex,

    That worked like a charm. Now I have another issue I didn't notice until now. I also have a tabstrip in the RadPane below the toolbar. The Tabstrip has child tabs. What I'm noticing is the child tab's text is centering instead of being left justified.

    Maybe this needs to be put in the tabstrip forums along with the solution?

    Thanks,
    Bruce
  8. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 01 Jul 2008 Link to this post

    Hello Bruce Hochstetler,

    I assume the following CSS should fix the problem:
    .RadTabStrip .rtsLevel2 
        text-alignleft

    Unfortunately, we cannot confirm this without looking at your solution - if this line does not help, please open a support ticket and attach a sample project.

    Best wishes,
    Alex
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  9. Bruce Hochstetler
    Bruce Hochstetler avatar
    155 posts
    Member since:
    Apr 2007

    Posted 01 Jul 2008 Link to this post

    Hi Alex,

    Unfortunately that did not work for me. The level 2 tabs are still centered. I will put together a sample project in the next couple of days.

    Thanks,
    Bruce
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017