ScrollChildren causes Align=Right not to work in IE8 in UI for ASP.NET AJAX TabStrip

Jay O'Brien

39 posts

Member since:
Dec 2008

Posted 12 Jan 2010 Link to this post

I have a tabstrip that is aligned right which works fine but when I enable ScrollChildren the Align=Right is ignored. In fact any type of alignment is ignored. It works fine in FF3 but IE8 it does not work. Is there a solution to fix the alignment with scollchildren enabled?

Please let me know if there is anything else needed.
Telerik V.2009.1.527.35

    
            <form id="DialogForm" runat="server">  
        
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
        
            <telerik:RadSplitter skin="" Orientation="Horizontal" id="RadSplitter1" runat="server" height="100%" width="100%" EnableViewState="true">  
        
            <telerik:RadPane id="home_top" Scrolling="None" runat="server" EnableViewState="true">  
        
            <div> 
        
            <nobr><a target="_blank" id="sLogoLink" enableviewstate="false" runat="server"><img alt="" class="bpHomeLogo" align="left" enableviewstate="false" id="sLogoURL" oncontextmenu="ToggleDebug();return false;" runat="server"/></a><img alt="" src="images/HomeMenuFade.jpg" align="left" /></nobr>  
        
            </div> 
        
            <div class="bpHomeMenu">  
        
            <telerik:RadTabStrip   
        
            ID="topMenu"   
        
            runat="server"   
        
            ScrollChildren="true"   
        
            SelectedIndex="0"   
        
            ScrollButtonsPosition="Middle"   
        
            Skin="BPMenu" EnableEmbeddedSkins="False" Align="Right" 
        
            > 
        
                <Tabs> 
        
                    <telerik:RadTab Text="Home" ImageUrl="images/icons/77.gif">  
        
                    </telerik:RadTab> 
        
                    <telerik:RadTab Text="Content List" ImageUrl="images/icons/71.gif">  
        
                    </telerik:RadTab> 
        
                    <telerik:RadTab Text="IT Admin" ImageUrl="images/icons/81.gif">  
        
                    </telerik:RadTab> 
        
                    <telerik:RadTab Text="Logs">  
        
                    </telerik:RadTab> 
        
                    <telerik:RadTab Text="User Profile" ImageUrl="images/icons/131.gif">  
        
                    </telerik:RadTab> 
        
                    <telerik:RadTab Text="Logoff">  
        
                    </telerik:RadTab> 
        
                </Tabs> 
        
            </telerik:RadTabStrip> 
        
            <asp:Repeater ID="NavTabRepeater" runat="server">  
        
            </asp:Repeater> 
        
            <li runat="server" id="ExtraLogo" ><a target="_blank" id="sLogoLink2" enableviewstate="false" runat="server"><img alt="" class="bpHomeLogo" align="top" enableviewstate="false" id="sLogoURL2" runat="server"/></a></li>  
        
            <div style="clear:both;"></div> 
        
            </div><div class="bpHomeServerName"><asp:Label runat="server" ID="HomeServerName"></asp:Label>&nbsp;&nbsp;<asp:DropDownList ID="Profiles" runat="server" Visible="false" AutoPostBack="true" OnSelectedIndexChanged="ProfileChange" /></div>  
        
            </telerik:RadPane> 
        
            <telerik:RadSplitBar EnableResize="false" EnableViewState="false" id="RadSplitbar1" runat="server" collapsemode="None"></telerik:RadSplitBar> 
        
            <telerik:RadPane id="home_bottom" Scrolling="None" runat="server" EnableViewState="false" > 
        
            </telerik:RadPane> 
        
            </telerik:RadSplitter> 
        
            </form>

Jay O'Brien

39 posts

Member since:
Dec 2008

Posted 13 Jan 2010 Link to this post

Here is more simplified version. I created a new page.

It has the following problems:

1. It does not align "right" in IE8, IE7.
2. It does align "right" in FF3 and Chrome but it does not scroll, although the scroll buttons show.

    
            <form id="form1" runat="server">  
        
                <telerik:RadScriptManager ID="ScriptManager" runat="server" /> 
        
                        <telerik:RadTabStrip ID="RadTabStrip1" runat="server" ScrollChildren="true" 
        
                            SelectedIndex="0" ScrollButtonsPosition="Middle" Align="Right">  
        
                            <Tabs> 
        
                                <telerik:RadTab Text="Advanced">  
        
                                </telerik:RadTab> 
        
                                <telerik:RadTab Text="Automatic Updates">  
        
                                </telerik:RadTab> 
        
                                <telerik:RadTab Text="Remote">  
        
                                </telerik:RadTab> 
        
                                <telerik:RadTab Text="General">  
        
                                </telerik:RadTab> 
        
                                <telerik:RadTab Text="Computer Name">  
        
                                </telerik:RadTab> 
        
                                <telerik:RadTab Text="Hardware">  
        
                                </telerik:RadTab> 
        
                                <telerik:RadTab Text="System Restore">  
        
                                </telerik:RadTab> 
        
                            </Tabs> 
        
                        </telerik:RadTabStrip> 
        
                </form>

Yana

Admin

5043 posts

Posted 15 Jan 2010 Link to this post

Hello Jay O'Brien,

I suggest you replace Align property with style="float: right" like this:

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" ScrollChildren="true" SelectedIndex="0"

ScrollButtonsPosition="Middle" Width="300px" Style="float: right">

<Tabs>

<telerik:RadTab Text="Advanced">

</telerik:RadTab>

<telerik:RadTab Text="Automatic Updates">

</telerik:RadTab>

<telerik:RadTab Text="Remote">

</telerik:RadTab>

<telerik:RadTab Text="General">

</telerik:RadTab>

<telerik:RadTab Text="Computer Name">

</telerik:RadTab>

<telerik:RadTab Text="Hardware">

</telerik:RadTab>

<telerik:RadTab Text="System Restore">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

Regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

Jay O'Brien

39 posts

Member since:
Dec 2008

Posted 15 Jan 2010 Link to this post

Thank you for the reply but unfortunately that did not fix the problem. If you will notice I am not using a width in the tabstrip. Which allows the tabstrip to expand the full width of the window. This is the same if I set the width to 100%.

The alignment works fine if scrolling is turned off.

Please advise.

Yana

Admin

5043 posts

Posted 18 Jan 2010 Link to this post

Hello Jay O'Brien,

Actually right alignment is not supported in such scenarios because the width of the list element which contains the tabs is very big (this is done in order to support scrolling ). You should either set static Width of the tabstrip or avoid using scrolling.

Best wishes,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.