MenuBar has scrollbars in 2.7.0 when it should not

This first happened in YUI 2.6.0. Menus would have scroll bars even when the maxheight and minscrollheight configs were set to values that should prevent that.

There's a fairly long disscussion on that in this thread -> http://tech.groups.yahoo.com/group/ydn- ... sage/38806

Question: Is this still a bug in YUI 2.7.0? Is there a patch available like there was on 2.6.0?

I'm having this happen on a menu button. I'd be happy to provide a link in a pm to anyone that wants to take a look at the menu button.

Looks like it's been fixed:
http://yuilibrary.com/projects/yui2/ticket/2163899

Thanks for replying Eric Ferraiuolo

I'm still getting that though.

I went ahead and made an example page.

http://www.steelbreeze.us/play_ground/example.html

Close to the center of the page, is a menu button labeled "Location"

Click on it once, and it has scroll bars. Click on it again, and they are gone.

My specs are:

Firefox 3.0.6
Windows Vista 64bit
screen resolution 1600x1000 (aprox) I have the browser running slightly less than max size (aprox 1500x900)

I'm not seeing it on my Mac in either Firefox 3.0.6 nor Safari 4 beta...

I do see your top and bottom scroll arrows and they are working properly. Have you tried explicitly setting CSS properties on the element you're seeing the scrolls bars?

I see that overflow: hidden is applied to the .yui-menu-body-scrolled element, but maybe you should also add it to the ul.first-of-type assuming that your scroll bar is showing up between your up and down arrows.

Floydian -

Just tested your example and I was able to successfully reproduce the problem. My repro steps were as follows:

1) Load the example: http://www.steelbreeze.us/play_ground/example.html
2) Resize the browser viewport to be large enough so that the Menu for the "location" button shouldn't have to scroll
2) Scroll the browser window down just a bit before clicking the "location" button
3) With the browser window scrolled click the location button.
4) Notice that the button's Menu has scroll bars when it shouldn't need them

I'll reopen the bug and try to post a patch for the issue as soon as possible.

- Todd Kloots

Thanks again Eric Ferraiuolo and thanks Todd Kloots for checking this out.

Floydian -

Looked into your issue -- specifically took a look at your buttons.js and search.js files. For a quick fix: change the "createSelectButton" method so that each Menu instance is rendered after passing the Menu instance to the Button constructor.

That said, in your current approach you are doing more work than necessary by creating a Menu instance for each Button. If you pass a <select> element as a value for a Button's "menu" configuration attribute, Button will create the Menu for you. Additionally, this approach is better for performance than your current approach as Button will defer the rendering of the Menu until the Button is initially clicked.

Additionally, I was curious as to why you are setting each Menu instance's "minscrollheight" and "maxheight" properties to a value of 900? Looking at your code and the page, I didn't understand why that was necessary. Plus, remember that if you do need to set those properties, Button provides the "menuminscrollheight" and "menumaxheight" attributes, so you can set the corresponding properties on the Menu instance.

Here is an updated version of your example with all of my changes, showing scrolling working correctly:

http://yuiblog.com/sandbox/yui/v270/exa ... le-01.html

Take a look at the changes that I made to your buttons.js and search.js files for more info. I added some comments to explain some of the changes:

http://yuiblog.com/sandbox/yui/v270/exa ... buttons.js
http://yuiblog.com/sandbox/yui/v270/exa ... /search.js

I hope that helps. If you have any further questions, let me know.

- Todd

Hell Todd Kloots,

I owe ya big once again!

There were some things I wanted to be able to do with the menu that I needed it rendered to be able to do. I see how you added a subscriber for the render event on the menu, and how that allows me to do what I wanted without rendering the menus before hand. I have a so much to learn!

The minscrollheight and maxheight was something I added in trying to see if I could get the scroll to work the way I wanted it to.

I read all the comments and looked at why you made the changes, and that definitely helped me out a lot. I've put the edits you made into the actual page and it's working great!

Thanks again man

And thanks Eric Ferraiuolo for your help as well!

Forums

Donald Fincher

YUI Contributor