Opened 7 years ago

Closed 7 years ago

#15820 closed defect (invalid)

FilteringSelect: dropdown is always displayed at the bottom of select

Reported by: zuzusik Owned by: Douglas Hays
Priority: undecided Milestone: tbd
Component: Dijit - Form Version: 1.7.3
Keywords: Cc:
Blocked By: Blocking:

Description

dijit.FilteringSelect? uses dijit.popup.open method to show its dropdown

dijit.popup.open uses next code to do it:

var best = around ?
	place.around(wrapper, around, orient, ltr, widget.orient ? lang.hitch(widget, "orient") : null) :
	place.at(wrapper, args, orient == 'R' ? ['TR','BR','TL','BL'] : ['TL','BL','TR','BR'], args.padding);

wrapper.style.display = "";
wrapper.style.visibility = "visible";
widget.domNode.style.visibility = "visible";	// counteract effects from _HasDropDown

This code then goes to dijit._place which uses dojo.marginBox to calculate if dropdown should be placed above or under the select input to fit the screen.

BUT! the wrapper has a style display set to 'none', so dojo.marginBox return it's height and width 0. This causes dijit._place to select not the really best position but the first of positions (which has aroundCorner set to "BL" and corner set to "TL")

So this can cause issues like on this screenshot when filtering select with long list is placed at the bottom of the page it's dropdown breaks the layout becaus of being placed under the select (look at attached file)

Attachments (1)

screen_dijit_filtering_select.jpg (115.0 KB) - added by zuzusik 7 years ago.

Download all attachments as: .zip

Change History (4)

Changed 7 years ago by zuzusik

comment:1 Changed 7 years ago by zuzusik

Sorry, ofcourse, I mean dijit.form.FilteringSelect?

comment:2 Changed 7 years ago by zuzusik

I've investigated a little bit more and realized that this is my fault, not dojo's...

Dojo sets display to "" to wrapper and visibility to "hidden" and moves it outside the viewport.

In my case dojo.marginBox returned w: 0 and h:0 because my custom theme used

.dijitMenu {
position: absolute;
top: -1px !important;
}

to position list of options.

I've changed it to

.dijitMenu {
border:1px solid #C4C3BC;
background-color:white;
margin: -1px 0;	
}

as it is done in 'claro' theme and now everything works fine.

Sorry again.

This can be closed now.

Version 0, edited 7 years ago by zuzusik (next)

comment:3 Changed 7 years ago by bill

Resolution: invalid
Status: newclosed
Summary: dijit.FilteringSelect dropdown is always displayed at the bottom of selectFilteringSelect: dropdown is always displayed at the bottom of select
Note: See TracTickets for help on using tickets.