This is a migrated thread and some comments may be shown as answers.

Center toolbar on page

7 Answers 125 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
Bruce Hochstetler
Top achievements
Rank 2
Bruce Hochstetler asked on 25 Jun 2008, 09:16 PM
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

7 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 27 Jun 2008, 02:06 PM
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
0
Bruce Hochstetler
Top achievements
Rank 2
answered on 27 Jun 2008, 04:37 PM
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
0
Bruce Hochstetler
Top achievements
Rank 2
answered on 27 Jun 2008, 05:00 PM
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
0
Alex Gyoshev
Telerik team
answered on 30 Jun 2008, 12:52 PM
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
0
Bruce Hochstetler
Top achievements
Rank 2
answered on 30 Jun 2008, 04:14 PM
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
0
Alex Gyoshev
Telerik team
answered on 01 Jul 2008, 07:41 AM
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
0
Bruce Hochstetler
Top achievements
Rank 2
answered on 01 Jul 2008, 11:48 PM
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
Tags
ToolBar
Asked by
Bruce Hochstetler
Top achievements
Rank 2
Answers by
Alex Gyoshev
Telerik team
Bruce Hochstetler
Top achievements
Rank 2
Share this question
or