Opened 2 years ago

Last modified 20 months ago

#18936 new defect

dijit/popup scrollbar IE

Reported by: dylan Owned by:
Priority: undecided Milestone: 1.14
Component: Dijit Version: 1.10.4
Keywords: Cc:
Blocked By: Blocking:

Description

The following was reported on dojo-interest, adding a ticket to remind us to review/verify:

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 <http://dojo-toolkit.33424.n3.nabble.com/file/n4007008/dijitFilteringSelect1.png>

FilteringSelect? Dropdown with small Browser window -> Scrollbar -> OK <http://dojo-toolkit.33424.n3.nabble.com/file/n4007008/dijitFilteringSelect2.png>

Filtering Select Dropdown again with big browser window -> still scrollbar -> Bug! <http://dojo-toolkit.33424.n3.nabble.com/file/n4007008/dijitFilteringSelect3.png>

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.

Change History (4)

comment:1 Changed 2 years ago by dylan

Milestone: 1.131.12.1

comment:2 Changed 2 years ago by dylan

Milestone: 1.12.11.12.2

Moving 1.12.1 tickets to 1.12.2

comment:3 Changed 2 years ago by dylan

Milestone: 1.12.21.12.3

comment:4 Changed 20 months ago by dylan

Milestone: 1.12.31.14
Note: See TracTickets for help on using tickets.