CSS Friendly Horizontal Menu displaying menu too far to the right in the browser window

Question

User284285477 posted

Hi All,

 I'm wondering if anyone has come across this issue and found a solution? 

 Currently our intra-net site uses the typical ASP.NET menu control *without* CSS Friendly controls.  The problem, as most of us know, is that when you move the mouse off the text, then the link becomes un-clickable.  So the obvious solution is to use the CSS Friendly Menu control.  So... on our page, as it currently exists, we use a horizontal menu control, with 7 top tier list items and the menus will drop-down nicely.  When the drop-down is displayed for the last item, the tier 3 list will display to the left of the drop-down, so it's fully visible to the user.

 However, when using the CSS Friendly Menu control, the 3rd tier item is displayed to the to the right.  This is expected, but it is displayed outside the visible bounds of the browser.  So the user has to scroll over, then use the link.  I've attached a sample of what I'm getting in a picture below (I hope it shows up).  Things get worse when the user's display settings are slightly lower.

There are work-arounds I've tried but the end result is not what is desired:
i)  made the font smaller so the whole list appears.  Problem: the font was too small for some users to read, and for those users with lower display settings, the list still was displayed outside the visible area
ii)  decreased the width of the <li>.  Problem: some of the text ended up 'squashed' in

Basically I need to emulate the exact same behaviour of the current Menu control in ASP.NET, but using a CSS friendly control.  So if the final items in the list display outside the browser window's width, the list will display to the left, instead of the right.

 

 

For now, I'll keep digging for the solution.  I suspect the solution is to modify the Adapter control, along with some Javascripting, etc... to get it working the way it's needed.  I'm just wondering if anyone else has come across this issue and found a solution.

 Thanks,
Meister1867

Answer 1

User-534056067 posted

Hi Meister1867,

A couple of fellow from "down under" were working on this problem for a while. See http://forums.asp.net/p/1035249/1428996.aspx#1428996. Unfortunately, they didn't publish a final solution. Still, if you check out that posting you'll find some interesting early-development-stage JavaScript code that could get you started thinking about the problem in interesting ways.

You might want to contact some of the folks on that thread and ask them directly if they made any further progress in the meanwhile. Likewise, you might want to contact George who posted this note http://forums.asp.net/p/1060001/1519259.aspx#1519259.

Fundamentally what you want to do should be possible. Remember that there is a bunch of interesting JavaScript that the menu adapter already uses. Look for menuadapter.js in your local version of the adapter kit.

I know this isn't much more than a shove in the right direction but hopefully it is enough to keep you busy for the weekend!!! Best regards,

Answer 2

User284285477 posted

Hi Russ,

Thanks for the response.  A shove in the right direction is just what I need :).  These forums are great for sharing problems, solutions and knowledge.  I know I 'have' to find a solution, so I'll try to post what I find as I move along.

Thanks again,
Meister1867

Answer 3

User-878298151 posted

 I'm having a similar issue.  I debugged the layout using FireBug and found that they pre-compiled styles were conflicting with my custom stylesheet.  I'm trying to find out how to disable them.