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

[Ritchie]

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>

[Atanas Korchev]

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

[Ritchie]

That worked. Great. Thanks.

[Mark]

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

[Yana]

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.

[Mark]

That did the trick !
Many Thanks Yana

[Patrick Lane]

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

[Yana]

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.