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

Stretch menu width across page

20 Answers 363 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Moon
Top achievements
Rank 2
Moon asked on 18 Nov 2008, 08:44 PM
I am using Q3 2008 radmenu.

I tried the width=900 property and it does not change my menu width.

How do I get the menu width to extend across the width of my page?

---

Nevermind. This does work. I guess my page was cached.

It would be nice to be able to delete these if no one has answered yet. :)

20 Answers, 1 is accepted

Sort by
0
Serrin
Top achievements
Rank 1
answered on 21 Nov 2008, 07:46 PM
But then nobody would find your great discovery and think to themselves, "Hey, next time something doesn't display when I change a setting, maybe I should try clearing my cache." :)
0
Joebob
Top achievements
Rank 1
answered on 04 Dec 2008, 06:25 AM
I am having the exact same problem but clearing my browser cache has accomplish nothing.  Any other suggestions?

I have tried setting the width to 1000px, 1000, and 100%.  Nothing seems to work.
0
Joebob
Top achievements
Rank 1
answered on 04 Dec 2008, 07:12 AM
.
0
Yana
Telerik team
answered on 04 Dec 2008, 08:35 AM
Hello there,

I've attached a sample page that shows RadMenu with Wdith property set to 1000px and it works at expected with Q3 2008 release. Please download it and examine it.

Greetings,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Joebob
Top achievements
Rank 1
answered on 04 Dec 2008, 02:34 PM
I gave your code sample a try and it worked until I set the skin to Outlook2007.  Why would this be?
0
Yana
Telerik team
answered on 05 Dec 2008, 12:09 PM
Hello,

Some of the skins really don't expand to the set width, we've already addressed this issue and it will be fixed for the next official release. For now, please tell us which skin you need and we'll help you to fix it.

Greetings,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Joebob
Top achievements
Rank 1
answered on 05 Dec 2008, 01:00 PM
I am trying to use the Office2007 skin.
0
Yana
Telerik team
answered on 05 Dec 2008, 01:24 PM
Hi,

Office2007 skin doesn't have this issue, please check the attached screenshot.

Regards,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Joebob
Top achievements
Rank 1
answered on 05 Dec 2008, 02:14 PM

I don’t know why you aren’t having problems with the Office2007 skin.  I used the menutest example that you provided earlier in this stream and Telerik version 2008.3.1125.35 to reproduce the problem in IE6 on Windows XP SP3.

Below is the exact code that is running to produce the problem.  The first menu bar shows full width as expected using the Default skin.  The second menu bar should be full width, but stops immediate after the last item.  I have tried this example using width="1000px" and width="100%" and both behave the same.

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="menuTest2.aspx.cs" Inherits="menuTest2" %> 
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
<!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> 
    <form id="form1" runat="server">  
 
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
 
        <div style="width:100%">  
        <telerik:RadMenu ID="RadMenu2" runat="server" Width="100%" Skin="Default">  
            <Items> 
                <telerik:RadMenuItem Text="item 1" /> 
                <telerik:RadMenuItem Text="item 2" /> 
                <telerik:RadMenuItem Text="item 3" /> 
            </Items> 
        </telerik:RadMenu> 
    </div> 
          
        <div style="width:100%">  
        <telerik:RadMenu ID="RadMenu1" runat="server" Width="100%" Skin="Office2007">  
            <Items> 
                <telerik:RadMenuItem Text="item 1" /> 
                <telerik:RadMenuItem Text="item 2" /> 
                <telerik:RadMenuItem Text="item 3" /> 
            </Items> 
        </telerik:RadMenu> 
    </div> 
    </form> 
</body> 
</html> 
 

0
Craig Mellon
Top achievements
Rank 1
answered on 06 Dec 2008, 12:20 AM
I'm using Q2 2008 Telerik Skin and I have the same problem. No matter what width I give the menu, it does not fill the screen width. This only happens with the Telerik Skin. All the other Skins work fine.
0
Joebob
Top achievements
Rank 1
answered on 08 Dec 2008, 07:55 PM
You now have 2 people giving you indication that the Office2007 skin does have this problem.  Can you help or should I open an official support request?
0
Yana
Telerik team
answered on 09 Dec 2008, 08:25 AM
Hello Dan,

You are right about Office2007 skin, this issue appears only in IE6 and I didn't test it there. You can fix it with the following css styles:

.RadMenu_Office2007 .rmRootGroup {  
    width: 100%;  
    padding2px 0px !important;  
}  
.RadMenu_Office2007 .rmRootGroup .rmFirst {  
    margin-left7px;  

I am so sorry for the misunderstanding.

Telerik skin also doesn't expand, please check the attached project which shows how to fix it for Q2 release of RadControls.

Best wishes,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Joebob
Top achievements
Rank 1
answered on 10 Dec 2008, 12:20 AM
Thanks, that seems to have fixed it.  We had to remove the styles for .rmFirst because it was placing a 7px left margin on the first menu item and allowing the other menu items to have a smaller margin.
0
Moon
Top achievements
Rank 2
answered on 10 Dec 2008, 10:22 PM
Did you really get them to stretch 100% of the width in IE6?

Because yes, some don't stretch at all, but on others that do stretch, they are not 100% of the width, They are about 40 pixels too short.

I'm setting my menu width like so:

.Width = New Unit(100, UnitType.Percentage)

Moon
0
Joebob
Top achievements
Rank 1
answered on 11 Dec 2008, 05:14 AM
Yes, there is not even 1 pixel extra.  Here is my modified code.  As you can see, I set the body margin to 0px and the menu width is set to 100% using the HTML width attribute.
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %> 
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>    
<!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 id="Head1" runat="server">     
    <title>Untitled Page</title> 
    <style type="text/css">  
            BODY  
            {  
                margin:0px 0px 0px 0px;  
            }  
              
         .RadMenu_Office2007   
         {  
         }  
           
        .RadMenu_Office2007 .rmRootGroup {  
            width: 100%;  
            padding: 2px 0px !important;  
        }  
        .RadMenu_Office2007 .rmRootGroup  
        {  
            margin-left: 7px;  
        }  
        .RadMenu_Telerik .rmRootGroup {  
            width: 100%;   
            background:transparent url(WebResource.axd?d=DxTjr8bzsYzrhBB31N7LqhDyM41yZE2e1Y9tlNG4qnSRBs-0hXxEI00wglMUWkzOpr_V0GOIKNkyePMP1l16kg2&t=633552788720000000) repeat scroll 0 0;  
        }  
         
    </style>    
</head>    
<body>    
    <form id="form2" runat="server">     
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>    
    
        <div style="width:100%">     
        <telerik:RadMenu ID="RadMenu2" runat="server" Width="100%" Skin="Telerik">     
            <Items>    
                <telerik:RadMenuItem Text="item 1" />    
                <telerik:RadMenuItem Text="item 2" />    
                <telerik:RadMenuItem Text="item 3" />    
            </Items>    
        </telerik:RadMenu>    
    </div>    
           <br style="clear: both" /> 
        <div style="width:100%">     
        <telerik:RadMenu ID="RadMenu1" runat="server" Width="100%" Skin="Office2007">     
            <Items>    
                <telerik:RadMenuItem Text="item 1" />    
                <telerik:RadMenuItem Text="item 2" />    
                <telerik:RadMenuItem Text="item 3" />    
            </Items>    
        </telerik:RadMenu>    
    </div>    
    </form>    
</body>    
</html>   
0
Moon
Top achievements
Rank 2
answered on 11 Dec 2008, 04:49 PM
That doesn't fix my problem. Sigh.

I have several of the menus which are either a few pixels short or a few pixels too wide.

:(
0
Craig Mellon
Top achievements
Rank 1
answered on 12 Dec 2008, 09:53 AM
Hi Yana,

on the attached menuStretch demo, I can see that that the Telerik skin does stretch accros  the page, but i can only see the border. The background image is missing.
So if the menu has only 3 items only those items would have a background. The rest of the UL element has a white background. How do I resolve this.

.RadMenu_Telerik .rmRootGroup {
            width: 100%;
            background:url(WebResource.axd?d=DxTjr8bzsYzrhBB31N7LqhDyM41yZE2e1Y9tlNG4qnSRBs-0hXxEI00wglMUWkzOpr_V0GOIKNkyePMP1l16kg2&t=633552788720000000) repeat-x scroll 0 0;
        }
0
Yana
Telerik team
answered on 15 Dec 2008, 07:41 AM
Hello Craig,

Please download the modified project with the background image included.

Best regards,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
priyanshu atreya
Top achievements
Rank 1
answered on 24 May 2010, 04:58 PM
my website does`nt stratch to 100% to other screen sizes than my laptop...
it doesnt fit to full in TFT and bigger or smaller monitors.....
help me

0
priyanshu atreya
Top achievements
Rank 1
answered on 24 May 2010, 05:02 PM
my website does`nt stratch to 100% on any screen other than my computer
if i browse it onto TFT or smaller screen desktop it doesn`t stratch to 100% 
i`ve made my website in asp.net
help me...
Tags
Menu
Asked by
Moon
Top achievements
Rank 2
Answers by
Serrin
Top achievements
Rank 1
Joebob
Top achievements
Rank 1
Yana
Telerik team
Craig Mellon
Top achievements
Rank 1
Moon
Top achievements
Rank 2
priyanshu atreya
Top achievements
Rank 1
Share this question
or