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

RadMenu Double-Column Items Disappear on Resize

12 Answers 143 Views

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

Velma asked on 19 Dec 2011, 06:08 PM

In the menu below, the Support Menu is double-column. When the vertical height of the screen is 

reduced (not necessarily even reduced so far as to prevent the whole menu showing), the items in the 

double-column menu disappear. They do not just disappear visually--nothing happens when you click where 

they should be, either. Even if you make the screen bigger again, they do not reappear.



We are using the Q3 .NET 4 DLLs. We are in IE8, but I verified this also occurs in a current Chrome.



Any fix?



----------------------------------------------------------------



<%@ Page Language="C#" AutoEventWireup="false" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head runat="server">

<title></title>

<style type="text/css">

.ItemWithWrap

{

white-space: normal;

}

</style>

</head>

<body>

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

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<div>

<telerik:RadMenu ID="OasisMenu" runat="server" Flow="Horizontal" Skin="Office2010Silver"

Width="100%" EnableAutoScroll="True">

<Items>

<telerik:RadMenuItem Text="Home" ToolTip="Home" Value="" NavigateUrl="" />

<telerik:RadMenuItem Text="Overseas Posts" ToolTip="Overseas Posts" NavigateUrl="" />

<telerik:RadMenuItem Text="Personnel" ToolTip="Personnel" Value="" NavigateUrl="">

<Items>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Support Tables" ToolTip="Support Tables" Value="" NavigateUrl="">

<GroupSettings RepeatColumns="2" RepeatDirection="Vertical" Width="210" />

<Items>

<telerik:RadMenuItem Text="Address Type" ToolTip="Address Type" NavigateUrl="" />

<telerik:RadMenuItem Text="Agency" ToolTip="Agency" NavigateUrl="" />

<telerik:RadMenuItem Text="Approvers List" ToolTip="Approvers List" NavigateUrl="" />

<telerik:RadMenuItem Text="Authorization Status" ToolTip="Authorization Status" NavigateUrl="" />

<telerik:RadMenuItem Text="Budget Category" ToolTip="Budget Category" NavigateUrl="" />

<telerik:RadMenuItem Text="Building Type" ToolTip="Building Type" NavigateUrl="" />

<telerik:RadMenuItem Text="Contract Type" ToolTip="Contract Type" NavigateUrl="" />

<telerik:RadMenuItem Text="Country" ToolTip="Country" NavigateUrl="" />

<telerik:RadMenuItem Text="Funding Source Type" ToolTip="Funding Source Type" NavigateUrl="" />

<telerik:RadMenuItem Text="Location Type" ToolTip="Location Type" NavigateUrl="" />

<telerik:RadMenuItem Text="Object Class" ToolTip="Object Class" NavigateUrl="" />

<telerik:RadMenuItem Text="Ownership Type" ToolTip="Ownership Type" NavigateUrl="" />

<telerik:RadMenuItem Text="Personal Travel Type" ToolTip="Personal Travel Type" NavigateUrl="" />

<telerik:RadMenuItem Text="Post Communication Type" ToolTip="Post Communication Type" NavigateUrl="" />

<telerik:RadMenuItem Text="Post Office Standards" ToolTip="Post Office Standards" NavigateUrl="" />

<telerik:RadMenuItem Text="Post Type" ToolTip="Post Type" NavigateUrl="" />

<telerik:RadMenuItem Text="Region" ToolTip="Region" NavigateUrl="" />

<telerik:RadMenuItem Text="Relationship Type" ToolTip="Relationship Type" NavigateUrl="" />

<telerik:RadMenuItem Text="Residence Assign Type" ToolTip="Residence Assign Type" NavigateUrl="" />

<telerik:RadMenuItem Text="Residence Feature Type" ToolTip="Residence Feature Type" NavigateUrl="" />

<telerik:RadMenuItem Text="Room Type" ToolTip="Room Type" NavigateUrl="" />

<telerik:RadMenuItem Text="Shipping Vendor" ToolTip="Shipping Vendor" NavigateUrl="" />

<telerik:RadMenuItem Text="Storage Vendor" ToolTip="Storage Vendor" NavigateUrl="" />

<telerik:RadMenuItem Text="Title Type" ToolTip="Title Type" NavigateUrl="" />

<telerik:RadMenuItem Text="Vehicle Acquisition Location" ToolTip="Vehicle Acquisition Location" NavigateUrl="" />

<telerik:RadMenuItem Text="Vehicle Color Type" ToolTip="Vehicle Color Type" NavigateUrl="" />

<telerik:RadMenuItem Text="Vehicle Condition" ToolTip="Vehicle Condition" NavigateUrl="" />

<telerik:RadMenuItem Text="Vehicle Disposal Method" ToolTip="Vehicle Disposal Method" NavigateUrl="" />

<telerik:RadMenuItem Text="Vehicle Fuel Type" ToolTip="Vehicle Fuel Type" NavigateUrl="" />

<telerik:RadMenuItem Text="Vehicle Make Type" ToolTip="Vehicle Make Type" NavigateUrl="" />

<telerik:RadMenuItem Text="Vehicle Model Type" ToolTip="Vehicle Model Type" NavigateUrl="" />

<telerik:RadMenuItem Text="Vehicle Style Type" ToolTip="Vehicle Style Type" NavigateUrl="" />

<telerik:RadMenuItem Text="Web Keyword" ToolTip="Web Keyword" NavigateUrl="" />

<telerik:RadMenuItem IsSeparator="true" />

<telerik:RadMenuItem Text="Vehicle Size, Composition, and Annual Cost" ToolTip="Vehicle Size, Composition, and Annual Cost" NavigateUrl=""

CssClass="ItemWithWrap" />

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Reports" ToolTip="Reports" Value="" NavigateUrl="">

<GroupSettings Width="280" />

<Items>

<telerik:RadMenuItem Text="Home-Cell Phone Contact List" ToolTip="Home-Cell Phone Contact List" NavigateUrl="" />

<telerik:RadMenuItem Text="FAS Available Pool" ToolTip="FAS Available Pool" NavigateUrl="" />

<telerik:RadMenuItem Text="FAS – Employee Promotion" ToolTip="FAS – Employee Promotion" NavigateUrl="" />

<telerik:RadMenuItem Text="FAS – Foreign Service Report" ToolTip="FAS – Foreign Service Report" NavigateUrl="" />

<telerik:RadMenuItem Text="Projected Vacancies" ToolTip="Projected Vacancies" NavigateUrl="" />

<telerik:RadMenuItem Text="Vehicle/Fleet Master" ToolTip="Vehicle/Fleet Master" NavigateUrl="" />

<telerik:RadMenuItem Text="Vehicle/Size, Composition and Annual Cost" ToolTip="Vehicle/Size, Composition and Annual Cost" NavigateUrl="" />

<telerik:RadMenuItem Text="Financial Plan Post Summary" ToolTip="Financial Plan Post Summary" NavigateUrl="" />

<telerik:RadMenuItem Text="OASIS Summary" ToolTip="OASIS Summary" NavigateUrl="" />

<telerik:RadMenuItem Text="Overseas Assignments" ToolTip="Overseas Assignments" NavigateUrl="" />

<telerik:RadMenuItem Text="Download Data for CRM" ToolTip="Download Data for CRM" NavigateUrl="" />

<telerik:RadMenuItem Text="Overseas Staffing Roster" ToolTip="Overseas Staffing Roster" NavigateUrl="" />

<telerik:RadMenuItem Text="FTSS Communications" ToolTip="FTSS Communications" NavigateUrl="" />

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Help" ToolTip="Help" Value="" NavigateUrl="">

<Items>

<telerik:RadMenuItem Text="About"

ToolTip="About" Value="" NavigateUrl="" />

<telerik:RadMenuItem Text="Samples" ToolTip="Samples">

<Items>

<telerik:RadMenuItem Text="Dropdowns Sample"

ToolTip="Dropdowns Sample" Value="" NavigateUrl="" />

<telerik:RadMenuItem Text="Data Access Sample"

ToolTip="Data Access Sample" Value="" NavigateUrl="" />

<telerik:RadMenuItem Text="JQuery Sample"

ToolTip="JQuery Sample" Value="" NavigateUrl="" />

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Tests" ToolTip="Tests">

<Items>

<telerik:RadMenuItem Text="Test Report - Posts"

ToolTip="Test Report - Posts" NavigateUrl="" />

<telerik:RadMenuItem Text="Test RadGrid"

ToolTip="Test RadGrid" NavigateUrl="" />

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

</div>

</form>

</body>

</html>

12 Answers, 1 is accepted

Accepted

answered on 27 Dec 2011, 04:29 PM

> In fact the appearance that you encounter is not a bug of the menu but rather expected "effect" when you alter the line height of the menu items without changing the sprite image.

What you are saying is not making any sense to me so far. I looked at the article you sent me the link to, and it doesn't seem related to my circumstance.

To what do you refer when you say I've changed the height of the menu items? You're referring to the fix I applied to make a longer menu item wrap rather than being truncated? That fix was provided to me by you all. Really, I would not think that should require a fix, but should be the default behavior (that is, I would say the need to apply the CSS you provided represents another bug). But the behavior I am describing is clearly a bug. The menu is displaying a "sprite" that should indicate there is a submenu, when there is no submenu. The menu code is aware that it is only one menu item, as it behaves as if there is only one menu item. If the menu code is not aware that there are no subitems, then clearly it is broken--but it would appear to me it is aware there are no subitems and is nevertheless displaying the subitem indicator. I don't know what you could call that but a bug.

Maybe you could provide CSS that would hide those faulty subitem indicators?

answered on 28 Dec 2011, 11:07 AM

menu.png

Hello Velma,

My apologies for my previous response since I believe I could not quite understand the issue that you described. Please take a look at the attached image which I assume is the issue you refer to. If it is so, you get this appearance since you applied specific width to the GroupSettings of the RadMenuItem with Text="Support Tables". Therefore in order for the hover effect to render as expected it is necessary for the text not to fall on the second row. Thus, the appearance on the image is not a bug but rather implemented by design. In order to prevent the appearance from the image, however, you will need to either set different width to the GroupSettings or apply overflow: hidden to the dropdown of the menu (using the latest approach, however, will hide the text that goes outside of the dropdown).

Kind regards,
Kate
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

answered on 28 Dec 2011, 05:43 PM

menuglitch.GIF

Hi Kate,

Thanks, but no, that's not quite it. You must have left off the white-space CSS tag, because the long menu item is not wrapping in your image.Here is my image (attached). My long item is wrapped. This is documented clearly and extensively:
http://www.telerik.com/help/aspnet-ajax/menu-appearance-item-css-class.html

But you see that on my menu, when the long wrapped menu item is hovered, a right-arrow appears, as if this was a menu with subitems. When I had the double-column menu, before we determined that that can't be used because of that serious bug, two right-arrows appeared.

These right arrows do not appear in the screenshots on the above-referenced page. (There is at least one screenshot that is specifically "hover".) And obviously they should not appear. So, (1) I am saying that they do appear is a bug and should be put in the queue to be fixed; and (2) how can I make them go away?--you would think I should be able to make them go away with CSS similar to the samples on that page.

Thanks.

answered on 30 Dec 2011, 05:55 PM

Hello Velma,

My name is Ivan and I work as a front end here at Telerik. It's a multi part question with a multi part answer:

1) The Controls cover most cases out of box, but not all;

2) Those edge cases do require extra work and due the eye candy you have in the menu it might a little bit more work and probably sacrifice a bit of the candy but gain flexibility.

What I am saying is that we could help you by tweaking a skin of your choice that uses less candy for the appearance but be more flexible on the content. The candy I am taking about is the rounded corners, which will be achieved trough CSS and not images.

If that option is fine by you, we can proceed.

Greetings,
Ivan Zhekov
the Telerik team

answered on 05 Jan 2012, 08:34 PM

Thanks, Ivan,

Obviously I'm not getting it. I have to have a custom skin with custom graphics to get rid of the expand arrow where it doesn't belong? And you don't think the expand arrow appearing where there are no subitems is a bug? Beats me.

Maybe you could correct the documentation here:
http://www.telerik.com/help/aspnet-ajax/menu-appearance-item-css-class.html , to show the correct hover image with bogus expand arrow, and to document this behavior, and to document the custom skin--because it sure is a different scope of work than adding a style. ?

You're sure you can't give me a CSS that will make the arrows go? When I had one on a PanelBar I wanted to get rid of, one of your techs gave me this, which works great:
.RadPanelBar .NotCollapsible .rpExpandHandle {
visibility:hidden;
}

But if a custom skin is the only way, I guess ... It's not a good solution, not even with you offering to do the tweaking. But thank you.We are basing on WebBlue. I can send you the complete menu source, if that would help.

Should I open a support ticket? This seems to have rather gone on and on for the forums...

Accepted

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadMenu Double-Column Items Disappear on Resize

12 Answers, 1 is accepted