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

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

7 Answers 254 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Ritchie
Top achievements
Rank 1
Ritchie asked on 12 Feb 2008, 11:25 PM

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>


7 Answers, 1 is accepted

Sort by
0
Accepted
Atanas Korchev
Telerik team
answered on 13 Feb 2008, 07:27 AM
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
0
Ritchie
Top achievements
Rank 1
answered on 13 Feb 2008, 05:03 PM
That worked. Great. Thanks.
0
Mark
Top achievements
Rank 1
answered on 10 Nov 2008, 01:02 PM
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
0
Yana
Telerik team
answered on 10 Nov 2008, 03:29 PM
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.
0
Mark
Top achievements
Rank 1
answered on 10 Nov 2008, 03:38 PM
That did the trick !
Many Thanks Yana
0
Patrick Lane
Top achievements
Rank 1
answered on 14 Nov 2008, 09:17 PM
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
0
Yana
Telerik team
answered on 17 Nov 2008, 12:02 PM
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.
Tags
Menu
Asked by
Ritchie
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Ritchie
Top achievements
Rank 1
Mark
Top achievements
Rank 1
Yana
Telerik team
Patrick Lane
Top achievements
Rank 1
Share this question
or