Horizontal RadMenu with Width=100% ends up slightly wider than containing element

8 posts, 1 answers
  1. Ritchie
    Ritchie avatar
    4 posts
    Member since:
    Oct 2007

    Posted 12 Feb 2008 Link to this post

    I'm unable to get a horizontal RadMenu to stretch to exactly 100% of a page's body width. I simply set the BODY style to have 0px margin and 0px padding then insert a RadMenu with Flow="Horizontal" and Width="100%".

    My goal is to have a menu bar stretch across the top of the screen. It does this, but with a few extra pixels, causing IE7 to display the horizontal scroll bar.



     

    <%

    @ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

    <%

    @ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

    <%

    @ Register TagPrefix="telerik" Namespace="Telerik.Charting" Assembly="Telerik.Charting" %>

    <!

    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <

    html xmlns="http://www.w3.org/1999/xhtml">

    <

    head runat="server">

    <title>Untitled Page</title>

    </

    head>

    <

    body style="margin:0px; padding:0px">

    <form id="form1" runat="server"><telerik:RadScriptManager ID="RadScriptManager1" runat="server">

    </

    telerik:RadScriptManager>

    <div>

    <telerik:RadMenu ID="RadMenu1" runat="server" DataSourceID="SiteMapDataSource1"

    Flow="Horizontal" Width="100%"

    ClickToOpen="false" >

    <DefaultGroupSettings Flow="Vertical" ExpandDirection="Auto"></DefaultGroupSettings>

    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>

    <ExpandAnimation Type="OutQuart"></ExpandAnimation>

    </telerik:RadMenu>

    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />

    </div>

    </form>

    </

    body>

    </

    html>


  2. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 13 Feb 2008 Link to this post

    Hi Ritchie,

    Indeed, the default RadMenu skin applies a border to the root HTML element. As a result the total width becomes border width + 100% which makes the scrollbar appear. We will address that glitch in our skins. Till then you can use the following workaround:

    <telerik:RadMenu ID="RadMenu1" runat="server" DataSourceID="SiteMapDataSource1" Width="100%" style="border:none">

    It will remove the border and the menu will occupy the entire width of its parent without creating a scrollbar.

    Regards,
    Albert
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Ritchie
    Ritchie avatar
    4 posts
    Member since:
    Oct 2007

    Posted 13 Feb 2008 Link to this post

    That worked. Great. Thanks.
  4. Mark
    Mark avatar
    132 posts
    Member since:
    Feb 2008

    Posted 10 Nov 2008 Link to this post

    Hi,
    I have this problem with the WebBlue skin.
    Is there any workaround for this ?
    I have tried setting the borderstyle = None but it makes no difference.

    Many Thanks
    Mark
  5. Yana
    Admin
    Yana avatar
    5013 posts

    Posted 10 Nov 2008 Link to this post

    Hi Mark,

    "WebBlue" skin have padding which causes this problem, so please remove it like this:

    <telerik:RadMenu ID="RadMenu1" runat="server" Skin="WebBlue" Width="100%" style="border:none; padding: 0"

    All the best,
    Yana
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Mark
    Mark avatar
    132 posts
    Member since:
    Feb 2008

    Posted 10 Nov 2008 Link to this post

    That did the trick !
    Many Thanks Yana
  7. Patrick Lane
    Patrick Lane avatar
    17 posts
    Member since:
    May 2005

    Posted 14 Nov 2008 Link to this post

    hi yana

    when i look at your post on the thread, all i see is a horizontal scroll bar? this is with ie7.

    pls can you describe what the fix is - i have the same problem with inox skin

    thanks, patrick
  8. Yana
    Admin
    Yana avatar
    5013 posts

    Posted 17 Nov 2008 Link to this post

    Hi Patrick,

    Unfortunately, Inox skin is not designed to stretch to 100% of the page's body width, its background image and round corners do not allow this.

    Regards,
    Yana
    the Telerik team

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