Peter Zolja
Top achievements
Rank 1
Rank 1
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.
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
0
Hi Peter,
In order to achieve your goal please add the following CSS classes in the skin used:
Kind regards,
Paul
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
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
0
Peter Zolja
Top achievements
Rank 1
Rank 1
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
The Menu.Default.css is the css from Telerik with the changes you mentioned.
Thank you!
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!
0
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:
Kind regards,
Peter
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
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
0
Peter Zolja
Top achievements
Rank 1
Rank 1
answered on 25 Mar 2008, 05:28 PM
I've added that as well, but it doesn't seem to make a difference.
0
Accepted
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
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
0
Peter Zolja
Top achievements
Rank 1
Rank 1
answered on 10 Apr 2008, 05:19 PM
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.
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.