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

RadToolBar alignment, firefox 2.0

2 Answers 58 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Remi
Top achievements
Rank 2
Remi asked on 28 Aug 2008, 01:10 PM
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.

2 Answers, 1 is accepted

Sort by
0
Accepted
Yana
Telerik team
answered on 01 Sep 2008, 11:08 AM
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 {  
    width108px !important;  

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

.RadToolBar, .rtbSlide {  
    text-alignleft;  
 }  

Hope this helps.

Regards,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Remi
Top achievements
Rank 2
answered on 02 Sep 2008, 01:07 PM
Hello Yana,

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

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

Cheers!
Tags
Grid
Asked by
Remi
Top achievements
Rank 2
Answers by
Yana
Telerik team
Remi
Top achievements
Rank 2
Share this question
or