Opened 10 years ago

Closed 9 years ago

Last modified 5 years ago

#10229 closed defect (fixed)

ComboBox and FilteringSelect: scrollbar in dropdown goes beyond the right edge of the viewport

Reported by: Thomas Pfeiffer Owned by:
Priority: high Milestone: 1.6
Component: Dijit - Form Version: 1.3.2
Keywords: FilteringSelect ComboBox Cc:
Blocked By: Blocking:

Description

If some options in a FilteringSelect? or ComboBox? are very long, the dropdown-layer extends beyond the viewport to the right so the scrollbar cannot be seen. A horizontal scrollbar appears in the browser, but trying to click it closes the layer.

Attachments (2)

10229.patch (1.1 KB) - added by Douglas Hays 10 years ago.
posible fix to just the incorrect right-align problem when the viewport is very small
_autoComplete.html (19.6 KB) - added by bill 10 years ago.
hacked "US state store slow" ComboBox? to be to the right, and also have long labels

Download all attachments as: .zip

Change History (17)

comment:1 Changed 10 years ago by bill

Resolution: duplicate
Status: newclosed

I believe this is a dup of #8948, already fixed in [17413] for 1.4.

comment:2 Changed 10 years ago by Thomas Pfeiffer

Resolution: duplicate
Status: closedreopened

Just checked in nightly unit test, it is not fixed there. Try resizing the window to a size smaller than one of the FilertingSelects?, the scroll bar is still out of the viewport.

comment:3 Changed 10 years ago by bill

OK, yes if the window is narrower than the drop down itself then I guess there's still a problem, that's what you mean?

comment:4 Changed 10 years ago by Thomas Pfeiffer

Not only in this case. The right-alignment seems not to always work. I just tried by moving the FilertingSelect? next to "US State test slow" in the unit test further to the right. The layer somehow isn't really right-aligned (something in-between) and the scrollbar is still outside the viewport. tested in Firefox 3.0.14

comment:5 Changed 10 years ago by Douglas Hays

There's a related problem that is new to 1.4. When the viewport is small enough that the popup scrollbar is hidden, then the combobox dropdown is 11px too far to the right and thus not aligned on the left with the left edge of the combobox input box. This is caused by an incorrect overflow calculation in dijit._place. The start and end value being calculated are not being clipped by the viewport start/size causing the overflow calculation to prefer R over L and thus the dropdown shifts to right-aligned when the viewport is small even though this is a much worse alignment. Even though this code was in 1.3, the introduction of a more complete orientation object is causing this to just start to fail in 1.4. I'll attach a patch for this 1 problem.

Changed 10 years ago by Douglas Hays

Attachment: 10229.patch added

posible fix to just the incorrect right-align problem when the viewport is very small

comment:6 Changed 10 years ago by bill

OK, I'm able to reproduce the problem (or a problem) by narrowing my FF window so the right border is at the edge of the "US State test slow" ComboBox. Even with Doug's fix though I still see that the scrollbar is half off the screen. Is that test case working for you?

Changed 10 years ago by bill

Attachment: _autoComplete.html added

hacked "US state store slow" ComboBox? to be to the right, and also have long labels

comment:7 Changed 10 years ago by bill

Milestone: tbd1.5
Summary: ComboBox and FilteringSelect: Scrollbar in dropdown cannot be seen if the dropdwon goes beyond the right edge of the viewportComboBox and FilteringSelect: scrollbar in dropdown goes beyond the right edge of the viewport

Also, I just attached a test case... I'm seeing that the drop down is getting positioned with the right side aligned (rather than the left side), the problem is just those pixels for the scroll bar itself (and once the user types enough characters so that there's no scrollbar, it looks fine).

Probably because in ComboBox.js the scrollbar adjustment

newwidth += 16;

happens after the call to dijit.popup.open().

Marking this for 1.5 although Doug's partial fix can go in for 1.4.

comment:8 Changed 10 years ago by Douglas Hays

So it looks like there are several contributing problems here. The arbitrary 16px for the scrollbar is random as well since it seems to vary from 15px thru 21px on my Windows XP box depending on the OS font/display theme. This is causing the small overflow beyond the right edge for me.

comment:9 Changed 10 years ago by bill

(In [20708]) Doug's patch to correct calculations when a corner of the around node itself is outside of the viewport, refs #10229 !strict.

comment:10 Changed 9 years ago by bill

Milestone: 1.51.6

I'm marking this for 1.6 because hopefully by then ComboBox will extend _HasDropDown, and _HasDropDown adds the 16px before calling popup.open().

Not sure how to deal w/the 15px vs. 21px difference based on OS theme though.

comment:11 Changed 9 years ago by bill

(In [22660]) Convert ComboBox to extend _HasDropDown. The migration involved:

  • make ComboBox use the code in _HasDropDown to open/close/size the drop down, and the code to monitor for clicks/keypresses to open/close drop down
  • a lot of renaming: this._popupWidget --> this.dropDown, this.downArrowNode --> this._buttonNode, this.comboNode --> this.domNode, this._isShowingNow --> this._opened, _onKeyPress --> _onKey, _hideResultList --> closeDropDown
  • removed "state" from _HasDropDown since it conflicted with ValidationTextBox.state and since it had the same meaning as this._opened
  • added maxHeight: -1 setting to _HasDropDown to cap the drop down size to what will fit in the viewport

Since ComboBox's drop down opens asynchronously this was a tricky change, because _HasDropDown wasn't really designed for the drop down to open asynchronously, except for the first time it's shown, when it's loading from an href.

Fixes #9945, #11461 !strict. Refs #10229 but doesn't fix completely.

comment:12 Changed 9 years ago by bill

Resolution: fixed
Status: reopenedclosed

On second thought (and examination) this all seems to be fixed as of [22660].

comment:13 Changed 8 years ago by bill

Component: DijitDijit - Form

comment:14 Changed 5 years ago by chsumanth

Is this Issue resolved and closed ??I'm facing the same issue in Dojo 1.8 version.

kindly, check the same, in jsfiddle,

http://jsfiddle.net/sumanth418/KUH3P/ type : "All" in the Filtering Select Box and the issue can be reproduced.

Last edited 5 years ago by chsumanth (previous) (diff)

comment:15 in reply to:  14 Changed 5 years ago by bill

Replying to chsumanth:

Is this Issue resolved and closed ??I'm facing the same issue in Dojo 1.8 version.

Yes, AFAIK it's fixed.

kindly, check the same, in jsfiddle,

http://jsfiddle.net/sumanth418/KUH3P/ type : "All" in the Filtering Select Box and the issue can be reproduced.

Your fiddle is unrelated to this ticket: In your fiddle, the dropdown does not go beyond the edge of the viewport.

If you are wondering why the text goes beyond the edge of the dropdown, it's because you set forceWidth: true.

Note: See TracTickets for help on using tickets.