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

How to Set Submenu Width

2 Answers 235 Views

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

Rob asked on 04 Mar 2013, 05:11 PM

MenuWidth.jpg

I have a menu that has 3 levels. The WebBlue Theme has the following style:

.RadMenu_WebBlue .rmItem a.rmLink {

width: 155px !important;

overflow: hidden !important;

}

.RadMenu_WebBlue .rmLink:hover, .RadMenu_WebBlue .rmFocused, .RadMenu_WebBlue .rmExpanded {

width: 155px !important;

min-height: 25px !important;

color: #276c9d !important;

background: #FFFFFF !important;

border-color: #336699 !important;

}

The top 2 levels of the menu I want the width to be 155px and this is working fine. What I would like to accomplish is setting level 3 of the menu to a width much larger than the top 2 levels to 340px. I feel like I'm kind of close, but need help getting the text to display correctly. Please see attached screen shot.

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<script type="text/javascript">

function onClientItemOpening(s, e) {

var item = e.get_item();

if (item.get_text() == 'Sub Menu 1') {

for (var i = 0; i < item.get_items().get_count(); i++) {

var li = item.get_items().getItem(i).get_element();

li.style.width = 340;

}

</script>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<div>

<telerik:RadMenu ID="RadMenu1" runat="server" OnClientItemOpening="onClientItemOpening">

<Items>

<telerik:RadMenuItem Text="Applications"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="This App">

<Items>

<telerik:RadMenuItem Text="Sub Menu 1">

<Items>

<telerik:RadMenuItem Text="Sub Menu Item With Longer Text Than Parent 1"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Sub Menu Item With Longer Text Than Parent 2"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Sub Menu Item With Longer Text Than Parent 3"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

</div>

</form>

</body>

</html>

2 Answers, 1 is accepted

answered on 05 Mar 2013, 07:13 AM

RadMenu.jpg

Hello Rob,

You can set the OuterCssClass property of the RadMenuItems to controls the appearance of the item (the outer <li> tag). Please have a look at the following code and the attached snapshot.

ASPX:

<telerik:RadMenu ID="RadMenu1" runat="server" Skin="WebBlue">

<Items>

<telerik:RadMenuItem Text="Applications">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="This App" OuterCssClass="style1">

<Items>

<telerik:RadMenuItem Text="Sub Menu 1" OuterCssClass="style1">

<Items>

<telerik:RadMenuItem Text="Sub Menu Item With Longer Text Than Parent 1" OuterCssClass="style2">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Sub Menu Item With Longer Text Than Parent 2">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Sub Menu Item With Longer Text Than Parent 3">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

CSS:

<style type="text/css">

.style1

{

width:155px !important;

}

.style2

{

width:500px !important;

}

</style>

Thanks,
Princy.