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

Menu stretch vertically 100%

6 Answers 281 Views

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

Peter Zolja asked on 24 Mar 2008, 07:47 PM

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.

6 Answers, 1 is accepted

answered on 25 Mar 2008, 02:29 PM

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

answered on 25 Mar 2008, 04:18 PM

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!

Accepted

answered on 26 Mar 2008, 06:55 AM

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