Scrollbars in dropdown menus using popup.js will not go away in Internet Explorer

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Scrollbars in dropdown menus using popup.js will not go away in Internet Explorer

Bjoern Burger
Hi,

we´re using dojo 1.10.4.

We discoverd a bug in dijit/popup.js which causes problems with the scrollbar of dropdown menus (e.g. used in dijit/form/FilteringSelect) in Internet Explorer.
A shown scrollbar on the dropdown menu will not go away, even if the viewport is big enough again to show the whole list.

FilteringSelect DropDown maximized Browser window -> No scrollbars -> OK
FilteringSelect DropDown with maximized browser window

FilteringSelect Dropdown with small Browser window -> Scrollbar -> OK
FilteringSelect DropDown with small browser window

Filtering Select Dropdown again with big browser window -> still scrollbar -> Bug!
FilteringSelect DropDown again with maximized browser window
 

The problem is caused by overflow settings in popup.js.

“hide” function sets “overflow” to visible.

             hide: function(/*Widget*/ widget){
                    ……..

                    domStyle.set(wrapper, {
                           display: "none",
                           height: "auto",            // Open may have limited the height to fit in the viewport
                           overflow: "visible",
                           border: ""                 // Open() may have moved border from popup to wrapper.
                    });
                    ……..
             },


But “open” only sets “overflowY” to scroll

             open: function(/*Widget*/ widget){
                    ……..

                    if(popupSize.h > maxHeight){
                           // Get style of popup's border.  Unfortunately domStyle.get(node, "border") doesn't work on FF or IE,
                           // and domStyle.get(node, "borderColor") etc. doesn't work on FF, so need to use fully qualified names.
                           var cs = domStyle.getComputedStyle(node),
                                  borderStyle = cs.borderLeftWidth + " " + cs.borderLeftStyle + " " + cs.borderLeftColor;
                           domStyle.set(wrapper, {
                                  overflowY: "scroll",
                                  height: maxHeight + "px",
                                  border: borderStyle // so scrollbar is inside border
                           });
                           node._originalStyle = node.style.cssText;
                           node.style.border = "none";
                    }
                    ……..
             },

Internet Explorer will not set “overflowY” to visible when setting “overflow” to visible.
This causes the scrollbar to stay in Internet Explorer because overflowY is still “scroll”


I think the problem can be solved with a fix in the “hide” function in popup.js

             hide: function(/*Widget*/ widget){
                    ……..

                    domStyle.set(wrapper, {
                           display: "none",
                           height: "auto",            // Open may have limited the height to fit in the viewport
                           overflowY: "visible",
                           border: ""                 // Open() may have moved border from popup to wrapper.
                    });

                    ……..
             },

or

             hide: function(/*Widget*/ widget){
                    ……..

                    domStyle.set(wrapper, {
                           display: "none",
                           height: "auto",            // Open may have limited the height to fit in the viewport
                           overflowY: "visible",
                           overflow: "visible",

                           border: ""                 // Open() may have moved border from popup to wrapper.
                    });

                    ……..
             },


Could you please open a ticket for this bug. Or are there any other suggestions?
Thanks a lot in advance.

Kind regards,
Bjoern

http://www.datev.de | http://www.datev.com
Loading...