Menu stretch vertically 100%

7 posts, 1 answers
  1. Peter Zolja
    Peter Zolja avatar
    119 posts
    Member since:
    Dec 2007

    Posted 24 Mar 2008 Link to this post

    I have a div that has a certain width (may vary). I'm trying to put a (vertical) menu in this div. All the items in the first level (the ones that are visible by default) should stretch to 100% of the container (in this case a div).

    Setting the width for the RadMenu to 100% makes the menu stretch, but the items are not following along (they remain the same width as before, I'm guessing the width set by the item's text content).

    If I add RadMenu_Default .rmVertical .rmItem { width:100%; ... }it works in IE, but in FF it grows maybe 3 times as much as it should. If I use a fixed with, let's say 200px, it works in both, but that's not going to be useful for me because the containing div (the width) may change and I need it to stretch.

    Thanks.

    P.S. I'm using a custom skin so changing the css would be OK, but I need to know what to change.
  3. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 25 Mar 2008 Link to this post

    Hi Peter,

    In order to achieve your goal please add the following CSS classes in the skin used:

    .RadMenu_[SKIN_NAME] .rmItem  
    {  
        width: 100%;  
    }  
     
    .RadMenu_[SKIN_NAME] .rmGroup .rmItem  
    {  
        width: auto;  
    } 


    Kind regards,
    Paul
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  5. Peter Zolja
    Peter Zolja avatar
    119 posts
    Member since:
    Dec 2007

    Posted 25 Mar 2008 Link to this post

    That helped, but there are few issues left:

    1) I can't get it to look the same with IE7 and FF (both FF2 and FF3b4 behave the same way)
    2) With Flow="Horizontal" FF displays it almost perfect, but in IE is messed up. When I use Flow="Vertical" it displays it over anything below with FF (which is not what I want) and with IE it puts the two divs side by side (weird).

    Here's what I mean: http://doubleslash.us/telerik_radmenu_border.png


    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"> 
        <title>Untitled Page</title>     
        <link href="/Skins/Default/Menu.Default.css" type="text/css" rel="stylesheet" /> 
    </head> 
    <body style="background-color:black;"> 
        <form id="form1" runat="server"> 
          <telerik:RadScriptManager runat="server" ID="sm"></telerik:RadScriptManager>       
          <telerik:RadStyleSheetManager runat="server" ID="ssm"></telerik:RadStyleSheetManager> 
           
           
          <div style="width:200px; border:solid 1px yellow;"> 
           
          <telerik:RadMenu runat="server" ID="m" EnableEmbeddedSkins="false" Skin="Default" Flow="Vertical"> 
            <Items> 
              <telerik:RadMenuItem Text="Item 1"></telerik:RadMenuItem> 
              <telerik:RadMenuItem Text="Item 2"></telerik:RadMenuItem> 
              <telerik:RadMenuItem Text="Item 3"></telerik:RadMenuItem> 
              <telerik:RadMenuItem Text="Item 4"></telerik:RadMenuItem> 
              <telerik:RadMenuItem Text="Item 5"></telerik:RadMenuItem> 
            </Items> 
          </telerik:RadMenu> 
           
          <div style="border:solid 1px red; color:silver;"> 
              should be this size 
          </div>      
          </div> 
           
        </form> 
    </body> 
    </html> 
     

    The Menu.Default.css is the css from Telerik with the changes you mentioned.

    Thank you!
  7. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 25 Mar 2008 Link to this post

    Hello Peter,

    Since the <li> element with .rmItem class wraps the link ement with .rmLink class you need to set the width property to 100% for both classes:

    .rmLink, .rmItem  
        {  
            width: 100%;  
        } 



    Kind regards,
    Peter
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  8.
  9. Peter Zolja
    Peter Zolja avatar
    119 posts
    Member since:
    Dec 2007

    Posted 25 Mar 2008 Link to this post

    I've added that as well, but it doesn't seem to make a difference.
  11. Answer
    Paul
    Admin
    Paul avatar
    4281 posts

    Posted 26 Mar 2008 Link to this post

    Hello Peter,

    Unfortunately, the provided information does not help us much in reproducing the error. I'm afraid we could not be of much help unless we reproduce the issue on our side. It will be best if you can open a support ticket and send us a simple running project (incl. your custom skin, CSS, images, DB backup if needed and so on) demonstrating the problem (and step-by-step instructions on doing so). In that way we can reproduce and pinpoint the problems you're facing on our side, understand the logic of your application and provide a solution.

    Thanks for your patience and cooperation,
    Paul
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  13. Peter Zolja
    Peter Zolja avatar
    119 posts
    Member since:
    Dec 2007

    Posted 10 Apr 2008 Link to this post

    The wizards from the Telerik team were able to solve this. Here's what is needed: (for the Default skin, Feb 25 2008 release -- may change in the future)

    For IE7, FF2, and FF3 you need to add this to Menu.Default.css

    div.RadMenu_Default  {  float: none;  }  
    div.RadMenu_Default .rmItem  {  float: none;  }

    For IE6 you also have to have this:

    div.RadMenu { display: inline-block; } 
    div.RadMenu ul.rmHorizontal { float: none; position: static; } 
    div.RadMenu li.rmItem { display: block; width:100%; } 

    I hope this helps,
    Peter.
  14.
Back to Top