Drop down list to long for screen.

[theremotedr]

I was advised by a DD member that viewing my site on his laptop a group list or two was a touch long thus him not being able to see a few of the options as they were off his screen.
His words " Impossible to reach the end of the list by scrolling down without using the mouse wheel, because then the sub items disappear"

Here is my site http://www.theremotedoctor.co.uk/index.html

These two groups need attention.
Accessories has 18 fields.
Keys & Remotes has 16 fields.

I have asked the member to supply a screen shot showing the cut off point & whether size of laptop screen or screen resolution would have any impact on this.
Just waiting for a reply now.

So the question is,What do you recommend to overcome this issue.

Not sure how to explain but did not want to say have a list then a fly out list from a certain point etc.
I mean first list say A-M then at the bottom a fly out list N-Z
The reason being if i need to add something new in the A-M list then the bottom field of this list would then need to be moved to the top of the second list.
This is very possible that i will do this & would mean plenty of work in the future so i need to keep it simple but effective.

Thanks very much.

[molendijk]

I posted a screen shot and some comment a couple of hours ago, but my reply apparently vanished in thin air for some reason.
Anyhow, the problem wouldn't exist if you forced the list of subitems to disappear onclick, not onmouseout. That would allow you to scroll to the bottom of the lists without 'loosing' them.

[theremotedr]

Hi,

Thanks for that.
I a bit new to all this and its my first attempt.
Can you advise the code i need to change and advise what i change it to.

I can then take it from there.

[Deadweight]

The other thing you can do is check with javascript the offset top of the object then add it to the height of the object. Check the height of the body. If the added object is longer than the body height then do a function.

[theremotedr]

Wow,
Thats way over my head.

[molendijk]

Apparently you're using jquery tooltipster for your menu. If that's the case, see if this (http://iamceege.github.io/tooltipster/) can help you.
You should try to first understand how your own scripts actually work, otherwise it's difficult to help you to modify them.

[Deadweight]

Ill see if i can make a script for you.

[theremotedr]

Thanks very much for your help.
If you need me to send any files etc just ask.

[coothead]

Hi there theremotedr,



try adding this CSS...



#menu-main-navigation ul a {
padding:2px 10px;
}

...which would reduce the height of "Accessories" and " Keys & Remotes" by 288 and 256 pixels respectively. ;)



cootheaed

[theremotedr]

Hi

Thats a quick & easy way.
Is the 10px negotiable ?
Is there a limit i can go up to just to make the fields a touch deeper but to stay within the screen issue.

[coothead]

Hi there theremotedr,


everything is negotiable. :D

Changing this...


#menu-main-navigation ul a {
padding:2px 10px;
}

...to this...


#menu-main-navigation ul a {
padding:3px 10px;
}

...would increase the height of each drop down by 36 and 32 pixels respectively.


coothead

[coothead]

Hi there theremotedr,


as a matter of interest, on my 1366x768 monitor using Firefox, the
"Accessories" drop down would leave the screen at this setting...



#menu-main-navigation ul a {
padding:5px 10px;
}



coothead

[theremotedr]

The DD member was using a laptop but did not mention screen size etc.
I can only set it at say 3 for now and hope he will check and advise.

Does that sound good to you ?

[coothead]

Hi there theremotedr,


the drop downs are within the confines of my test browser at that setting. :)


coothead

[theremotedr]

Thanks very much.
Now ready for resolve button.

[coothead]

No problem, you're very welcome. ;)


coothead

[theremotedr]

Anything else you see that can be improved or needs changing please advise.

Cheers