I am trying to make the RadMenu stretch to the width of the body of the page, however, when I change the width to 100%, the menu does stretch but the menu items disappear and the height of the menu become almost 0px. How do I set the width without this happening or is this a bug?
7 Answers, 1 is accepted
0
Richard
Top achievements
Rank 1
answered on 14 Feb 2012, 11:00 PM
Matthew:
Have you applied a skin to your RadMenu? It might be helpful in diagnosing the cause of your behavior if we could see your .aspx markup, including any css.
And, in the case where you have defined the skin, does the same behavior occur with the default skin?
Regards.
Have you applied a skin to your RadMenu? It might be helpful in diagnosing the cause of your behavior if we could see your .aspx markup, including any css.
And, in the case where you have defined the skin, does the same behavior occur with the default skin?
Regards.
0
Matthew
Top achievements
Rank 1
answered on 14 Feb 2012, 11:53 PM
Yes I have applied the Windows 7 Skin to it, and have tried the width sizing using the Default skin and both are doing the same thing. Below is the HTML markup of just the body since there is a bunch of javascript for business use above it that is useless in this topic. The RadMenu is call "radMainMenu"
<
body
onload
=
"updateClock(); setInterval('updateClock()', 1000)"
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"ScriptManager1"
runat
=
"server"
EnableTheming
=
"True"
>
<
scripts
>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.Core.js"
>
</
asp:ScriptReference
>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.jQuery.js"
>
</
asp:ScriptReference
>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.jQueryInclude.js"
>
</
asp:ScriptReference
>
</
scripts
>
</
telerik:RadScriptManager
>
<
asp:SiteMapDataSource
ID
=
"srcMain"
runat
=
"server"
ShowStartingNode
=
"False"
/>
<
table
align
=
"center"
cellspacing
=
"0"
style
=
"width: 800px; border-bottom-width: 0px; border-left-width: 0px; border-top-width: 0px; border-right-width: 0px;"
>
<
tr
>
<
td
>
<
asp:Image
ID
=
"imHeaderLogo"
runat
=
"server"
ImageUrl
=
"~/Images/Header_Logos/ElectricBlue.png"
/>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
telerik:RadMenu
Runat
=
"server"
ID
=
"radMenuMain"
DataSourceID
=
"srcMain"
EnableRoundedCorners
=
"True"
EnableShadows
=
"True"
ViewStateMode
=
"Enabled"
Width
=
"700px"
>
</
telerik:RadMenu
>
<
table
cellpadding
=
"0"
cellspacing
=
"0"
style
=
"width: 100%;"
>
<
tr
>
<
td
style
=
"width: 33%; text-align: left;"
>
<
asp:Label
ID
=
"lblSalutations"
runat
=
"server"
Font-Bold
=
"True"
Font-Names
=
"Arial"
Font-Size
=
"X-Small"
CssClass
=
"XSmallLabels"
></
asp:Label
>
</
td
>
<
td
style
=
"width: 33%; text-align: center;"
>
<
asp:Label
ID
=
"lblHeadliner"
runat
=
"server"
Font-Bold
=
"True"
Font-Names
=
"Arial"
Font-Size
=
"X-Small"
CssClass
=
"XSmallLabels"
></
asp:Label
>
</
td
>
<
td
style
=
"width: 33%; text-align: right;"
>
<
asp:Label
ID
=
"lblTimer"
runat
=
"server"
Font-Bold
=
"True"
Font-Names
=
"Arial"
Font-Size
=
"X-Small"
CssClass
=
"XSmallLabels"
></
asp:Label
>
</
td
>
</
tr
>
</
table
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
asp:ContentPlaceHolder
ID
=
"mainContentPlaceHolder"
runat
=
"server"
></
asp:ContentPlaceHolder
>
</
td
>
</
tr
>
<
tr
>
<
td
style
=
"font-family: Arial; font-size: x-small; text-align: center;"
>
<
IPAMOnlineSystem:masterFooter
id
=
"idFooter"
runat
=
"server"
/>
</
td
>
</
tr
>
</
table
>
<
asp:ImageButton
ID
=
"ImageButton1"
runat
=
"server"
ImageUrl
=
"~/Images/blank.png"
/>
<
telerik:RadWindow
runat
=
"server"
ID
=
"radAlert"
Animation
=
"Resize"
Behaviors
=
"None"
EnableShadow
=
"True"
Height
=
"500px"
KeepInScreenBounds
=
"True"
Modal
=
"True"
Overlay
=
"True"
Skin
=
"Outlook"
Width
=
"500px"
Title
=
"PIT's New Features and Updates"
>
<
ContentTemplate
>
<
div
style
=
"font-family:Arial;font-size:12px;"
>
<
asp:LinkButton
ID
=
"btnClose"
runat
=
"server"
onclick
=
"btnClose_Click"
>close</
asp:LinkButton
>
</
div
>
<
div
style
=
"width:500px;font-family:Arial;"
>
<
div
id
=
"alertType"
style
=
"padding-left:7px;padding-top:21px;width:500px;font-size:12px;font-weight:bold;float:left;"
>
<
asp:Label
ID
=
"alertTypelbl"
runat
=
"server"
Text
=
""
></
asp:Label
>
</
div
>
<
div
id
=
"alertMessage"
style
=
"float:left;padding-top:7px;width:450px;font-size:10px;font-weight:normal;text-align:left;margin-left:21px;margin-right:auto;"
>
<
asp:Label
ID
=
"alertMessagelbl"
runat
=
"server"
Text
=
""
></
asp:Label
>
</
div
>
<
div
id
=
"updatesSectionHdr"
style
=
"width:450px;margin-top:7px;font-size:12px;font-weight:bold;margin-left:auto;margin-right:auto;"
>
<
asp:Label
ID
=
"updatesHdr"
runat
=
"server"
Text
=
"Change List"
></
asp:Label
>
</
div
>
<
div
style
=
"width:450px;font-size:10px;padding-top:7px;margin-left:auto;margin-right:auto;"
>
<
div
style
=
"width:300px;font-size:12px;font-weight:bold;float:left;clear:left;"
>
<
asp:Label
ID
=
"updateList1Hdr"
runat
=
"server"
Text
=
"Reoccuring Events"
></
asp:Label
>
</
div
>
<
div
style
=
"width:400px;font-size:10px;font-weight:normal;padding:7 14;float:left;clear:left;"
>
</
div
>
</
div
>
<
div
style
=
"width:450px;font-size:10px;padding:7 14;margin-left:auto;margin-right:auto;"
>
<
div
style
=
"width:300px;font-size:12px;font-weight:bold;float:left;clear:left;"
>
<
asp:Label
ID
=
"updateList2Hdr"
runat
=
"server"
Text
=
"Participants"
></
asp:Label
>
</
div
>
<
div
style
=
"width:400px;font-size:10px;font-weight:normal;padding:7 14;float:left;clear:left;"
>
</
div
>
</
div
>
<
div
style
=
"width:450px;font-size:12px;padding:7 14;margin-left:auto;margin-right:auto;"
>
<
div
style
=
"width:300px;font-size:10px;font-weight:bold;float:left;clear:left;"
>
<
asp:Label
ID
=
"updateList3Hdr"
runat
=
"server"
Text
=
"Workshops"
></
asp:Label
>
</
div
>
<
div
style
=
"width:400px;font-size:10px;font-weight:normal;padding:7 14;float:left;clear:left;"
>
</
div
>
</
div
>
<
div
style
=
"width:450px;font-size:10px;padding-top:14px;padding-left:14px;padding-bottom:21px;margin-left:auto;margin-right:auto;float:left;"
>
</
div
>
</
div
>
</
ContentTemplate
>
</
telerik:RadWindow
>
<
asp:ModalPopupExtender
ID
=
"radAlert_ModalPopupExtender"
runat
=
"server"
DynamicServicePath
=
""
Enabled
=
"True"
TargetControlID
=
"radAlert"
Drag
=
"True"
DropShadow
=
"True"
CancelControlID
=
"btnClose"
ClientIDMode
=
"AutoID"
>
</
asp:ModalPopupExtender
>
</
form
>
</
body
>
0
Richard
Top achievements
Rank 1
answered on 15 Feb 2012, 04:19 PM
Matthew:
Since you have not included your styles, it's still pretty tough to determine the cause for the odd behavior.
I would highly suggest that you open a support ticket with Telerik, so that they can provide informed insights in a timely manner. Forum posts are not recommended for time sensitive issues.
You should prepare a small, trimmed down version of your project that isolates and demonstrates the issue, including the styles that you apply. You can reference this blog post for instructions on doing this:
Hope this helps!
Since you have not included your styles, it's still pretty tough to determine the cause for the odd behavior.
I would highly suggest that you open a support ticket with Telerik, so that they can provide informed insights in a timely manner. Forum posts are not recommended for time sensitive issues.
You should prepare a small, trimmed down version of your project that isolates and demonstrates the issue, including the styles that you apply. You can reference this blog post for instructions on doing this:
Isolating a problem in a sample project
Hope this helps!
0
Matthew
Top achievements
Rank 1
answered on 15 Feb 2012, 06:13 PM
I am not sure if I am understanding what you are saying. But, there are no custom styles or inline styles associated with this page, The only style I am referencing is the Telerik Windows 7 style from the dll.
0
Hello Matthew,
I tested the code that you provided but I am not able to get the problematic behavior that you describe. Can you please, send us a simplified runnable project as suggested in the previous post, since I can not replicate the issue by using your code?
All the best,
Kate
the Telerik team
I tested the code that you provided but I am not able to get the problematic behavior that you describe. Can you please, send us a simplified runnable project as suggested in the previous post, since I can not replicate the issue by using your code?
All the best,
Kate
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
Madhuri
Top achievements
Rank 1
answered on 17 Feb 2012, 11:20 AM
Hello sir,
In my Project I am using rad menu Control, I have so many menus and I mentioned width is 100% . If the menu Name is Lengthy it will overlapped to next menu Item.so that i mentioned width for each and every menu Item.but still problem is there.
can you please suggest me how to solve that problem?
thanks in advance.
In my Project I am using rad menu Control, I have so many menus and I mentioned width is 100% . If the menu Name is Lengthy it will overlapped to next menu Item.so that i mentioned width for each and every menu Item.but still problem is there.
can you please suggest me how to solve that problem?
thanks in advance.
0
Richard
Top achievements
Rank 1
answered on 17 Feb 2012, 02:49 PM
Madhuri:
It's possible to wrap excessively long text on a RadMenu item. See the How to wrap menu item text forum thread for the method to use.
Regards,
It's possible to wrap excessively long text on a RadMenu item. See the How to wrap menu item text forum thread for the method to use.
Regards,