How to control PopupMenu height, placement, and scrolling?

Hello,

I am using an UltraWebMenu with WebMenuTarget=”PopupMenu”.  This menu is used as a context menu for an UltraWebGrid, to allow the user to select or deselect the columns that are visible on the grid.  When the number of items in the menu gets large (i.e. about 20 items or so), and I am scrolled to the top of the page, the menu appears only partly on screen.  I have to scroll down the page to see the entire menu.  Unfortunately, if I move the mouse to the browser scroll bar, the menu disappears.  I have to resort to keeping the mouse on the menu and scrolling down with my mouse wheel, which not all users will have.

Is there a way to programmatically set the maximum height of the menu so that if it exceeds that height, the menu itself will allow scrolling?  I have tried setting the UltraWebMenu.Height property on the server during initialization but this seems to have no effect.

Failing that, is there a way to programmatically position the location of the menu so that it fits entirely on the screen?

Setting the max height of the menu would be the best solution, since the user might have their browser set to a size which is too small for the entire menu no matter what.

Thanks for any help.

 

Hello,

Unfortunatelly you can only control the absolute X / Y (left / top) placement for the popup. The menu then automatically will occupy entire possible visible space and scroll rest of the items (if there are any more items to be displayed).
For showing the WebMenu you can use client side function igmenu_showMenu(menuName, event, x, y), which is described in our online documentation

Hello again,
Actually there is a property of the UltraWebMenu, called IslandStyle. There you can define your widths and heights. However, it is defining strict widths and heights, instead of max width and max height.

It can be used in the following way:

<ignav:UltraWebMenu id="MyMenu" runat="server" WebMenuTarget="PopupMenu">
   <IslandStyle Width="250px" Height="120px" />
    <Items>
     ….

 Hope this helps

Anton,

Thanks for the reply.

I played around with the IslandStyle property a little.  It might be useful if you knew ahead of time how many items would be in the menu, but if the menu's items are dynamic, you will have to figure out programmatically how high to make the menu.

For example, I set it at design time to:

<IslandStyle Width="160px" Height="320px" />

However, as you say, it dictates the exact width and height.  When my menu only had 5 items in it, the menu had all the items spaced out evenly, which put about 80px between items.  When my menu had over 20 items in it, only 13 items showed in the menu, but there was no way to get to the rest of the menu items (no scrolling).

If this is to be a viable solution, I need to be able to scroll through the menu when not all the menu items are visible due to the height of the menu.  As yet, I don't see how to do this.

Regards,

Steve

 

Hello Steve,

There a hack you can play-with for scrolling. You can define a CustomRule (this is property of IslandStyle) within the IslandStyle. This is a custom CSS rule. So … if you play around with CSS you can add some commands like: "overflow-x: hidden; overflow-y: auto". This will bring you vertical scrollbar if there are items to scroll. This will be a standart browser scrollbar. Still you can add to that custom rule some definitions like: 

SCROLLBAR-FACE-COLOR: #000000;
SCROLLBAR-HIGHLIGHT-COLOR: #000000;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #000000;
SCROLLBAR-ARROW-COLOR: #000000;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-DARKSHADOW-COLOR: #000000; 

Well, choosing colours of your choice. This will style the scroll bar.

Hope this helps

Hi, Anton.

Actually, this looks promising!  It's strange, though.  If I click on the scroll bar to start scrolling, the menu disappears.  Is this because the scrollbar isn't technically part of the menu, therefore when you click outside the menu, the menu disappears?

Thanks.

Hi,
Hm, it's tough one. I assume you are right about the scroll bar not being part of menu. Although that scrollbar is actually part of a DIV which constructs the menu, so this should be some browser erronous behavior – clicking on scrollbar not being a click on DIV that this scrollbar belongs to. Or may be it is intended.