Center toolbar on page

[Bruce Hochstetler]

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

[Alex Gyoshev]

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
{
    float: none;
    width: 300px; /* 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

[Bruce Hochstetler]

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

[Bruce Hochstetler]

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

[Alex Gyoshev]

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

[Bruce Hochstetler]

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

[Alex Gyoshev]

Hello Bruce Hochstetler,

I assume the following CSS should fix the problem:

.RadTabStrip .rtsLevel2
{
    text-align: left;
}

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

[Bruce Hochstetler]

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