ScrollChildren causes Align=Right not to work in IE8

5 posts, 0 answers
  1. Jay O'Brien
    Jay O'Brien avatar
    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> 
  2. Jay O'Brien
    Jay O'Brien avatar
    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> 
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Yana
    Admin
    Yana avatar
    4554 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.
  5. Jay O'Brien
    Jay O'Brien avatar
    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.
  6. Yana
    Admin
    Yana avatar
    4554 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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017