RadToolBar alignment, firefox 2.0

[Remi]

Hello,

We're using Q2 Ajax ASP.Net controls.

There are two issues I'd like to discuss.

1. In FireFox 2.0 the radtoolbar, when loading a drop down menu vertically gets cut off (only loads half its width). It's suppose to work in FireFox 1.5 +, it works in FireFox 3.0 correctly.

Sample Code:

            <telerik:RadToolBar ID="RadToolBar1" runat="server" Width="800px" Skin="Office2007">
               <CollapseAnimation Duration="200" Type="OutQuint" />
               <Items>
                  <telerik:RadToolBarDropDown runat="server" ImageUrl="~/Image1.png" Text="New">
                     <Buttons>
                        <telerik:RadToolBarButton runat="server" Text="Car" NavigateUrl="~/Page1.aspx">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton runat="server" Text="Boat" NavigateUrl="~/Page2.aspx">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton runat="server" Text="Bike" NavigateUrl="~/Page3.aspx">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton runat="server" Text="Scooter" NavigateUrl="~/Page4.aspx">
                        </telerik:RadToolBarButton>
                     </Buttons>
                  </telerik:RadToolBarDropDown>
                  <telerik:RadToolBarButton runat="server" IsSeparator="True">
                  </telerik:RadToolBarButton>
                  <telerik:RadToolBarButton runat="server" ImageUrl="~/Image2.png" Text="Save" NavigateUrl="~/Page5.aspx">
                  </telerik:RadToolBarButton>
                  <telerik:RadToolBarButton runat="server" IsSeparator="True">
                  </telerik:RadToolBarButton>
                  <telerik:RadToolBarButton runat="server" ImageUrl="~/Image3.png" Text="Print">
                  </telerik:RadToolBarButton>
                  <telerik:RadToolBarButton runat="server" IsSeparator="True">
                  </telerik:RadToolBarButton>
               </Items>
            </telerik:RadToolBar>

2. If you have a CSS style to center the body of your page, 

body {

 text-align: center;

}

Then drop a grid similiar to the one mentioned above (use the same code example), then the drop down loads in halves and loads to the right corner of the contronl menu tab it corresponds with instead of directly under it (which is what we want).

It comes down to modifying the skin for the rad tool bar, but what element needs to be modified in the ToolBar CSS?

Centering the body of a page is fairly common for developers to do, wierd why it effects the RadToolBar (even if the styles cascade).

Any assistance is appreciated.

Thanks.

[Yana]

Hi Remi,

Thanks for reporting these issues.

We need some time to investigate the problem in Firefox 2.0 about dropdown width and to find out what can cause it. For now, I suggest you set the width in css like this:

.RadToolBarDropDown {
    width: 108px !important;
}

As to your second problem, please use the following css styles to overwrite center alignment:

.RadToolBar, .rtbSlide {
    text-align: left;
 }

Hope this helps.

Regards,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Remi]

Hello Yana,

Thanks, this css adjustment resolves the issue in both items.

Both items have been resolved, thanks for the assistance, its appreciated.

Cheers!