Stretch menu width across page

21 posts, 0 answers
  1. Moon
    Moon avatar
    249 posts
    Member since:
    Oct 2012

    Posted 18 Nov 2008 Link to this post

    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. :)

  2. Serrin
    Serrin avatar
    286 posts
    Member since:
    Sep 2008

    Posted 21 Nov 2008 Link to this post

    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." :)
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Joebob
    Joebob avatar
    8 posts
    Member since:
    Dec 2008

    Posted 04 Dec 2008 Link to this post

    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.
  5. Joebob
    Joebob avatar
    8 posts
    Member since:
    Dec 2008

    Posted 04 Dec 2008 Link to this post

    .
  6. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 04 Dec 2008 Link to this post

    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.
  7. Joebob
    Joebob avatar
    8 posts
    Member since:
    Dec 2008

    Posted 04 Dec 2008 Link to this post

    I gave your code sample a try and it worked until I set the skin to Outlook2007.  Why would this be?
  8. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 05 Dec 2008 Link to this post

    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.
  9. Joebob
    Joebob avatar
    8 posts
    Member since:
    Dec 2008

    Posted 05 Dec 2008 Link to this post

    I am trying to use the Office2007 skin.
  10. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 05 Dec 2008 Link to this post

    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.
  11. Joebob
    Joebob avatar
    8 posts
    Member since:
    Dec 2008

    Posted 05 Dec 2008 Link to this post

    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> 
     

  12. Craig Mellon
    Craig Mellon avatar
    53 posts
    Member since:
    May 2005

    Posted 05 Dec 2008 Link to this post

    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.
  13. Joebob
    Joebob avatar
    8 posts
    Member since:
    Dec 2008

    Posted 08 Dec 2008 Link to this post

    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?
  14. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 09 Dec 2008 Link to this post

    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.
  15. Joebob
    Joebob avatar
    8 posts
    Member since:
    Dec 2008

    Posted 09 Dec 2008 Link to this post

    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.
  16. Moon
    Moon avatar
    249 posts
    Member since:
    Oct 2012

    Posted 10 Dec 2008 Link to this post

    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
  17. Joebob
    Joebob avatar
    8 posts
    Member since:
    Dec 2008

    Posted 10 Dec 2008 Link to this post

    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>   
  18. Moon
    Moon avatar
    249 posts
    Member since:
    Oct 2012

    Posted 11 Dec 2008 Link to this post

    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.

    :(
  19. Craig Mellon
    Craig Mellon avatar
    53 posts
    Member since:
    May 2005

    Posted 12 Dec 2008 Link to this post

    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;
            }
  20. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 15 Dec 2008 Link to this post

    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.
  21. priyanshu atreya
    priyanshu atreya avatar
    2 posts
    Member since:
    May 2010

    Posted 24 May 2010 Link to this post

    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

  22. priyanshu atreya
    priyanshu atreya avatar
    2 posts
    Member since:
    May 2010

    Posted 24 May 2010 Link to this post

    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...
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017