Search jQuery

jQuery Forum

Using jQuery UI

nkostic997

Selectmenu goes of the page, how to fix?

in Using jQuery UI • 2 years ago

Hello.

div.ui-selectmenu-menu goes of the page if Selectmenu is near the right edge of the window.

Here is the demo with some fix that I've tried:

https://jsfiddle.net/rh6gjkpt/

Here is the expected behaviour:

Ie. I'm trying to align that div.ui-selectmenu-menu on the right edge of the Selectmenu.

But for some reason I don't get expected behaviour first time when I open Selectmenu. When I close and open it againt, then it works.

Replies(9)

jakecigar

Re: Selectmenu goes of the page, how to fix?

2 years ago

https://jsfiddle.net/jakecigar/j2bj9jep/ works. I tried properly using the open and the create options. Neither worked.

open: function() {

is the proper way to do open.

JΛ̊KE

nkostic997

Re: Selectmenu goes of the page, how to fix?

2 years ago

Thanks, but I don't want to apply those properties on all Selectmenus on the page, only to the problematic ones. I want to keep the usual behaviour for all Selectmenus that are not on the right edge of the screen, that's why I do the if check (to see if div.ui-selectmenu-menu is really off the screen) and the changes in the open event.

Btw

Starting with ECMAScript 2015, a shorter syntax for method definitions on objects initializers is introduced. It is a shorthand for a function assigned to the method's name.
var obj = {
foo() {
return 'bar';
}
}

console.log(obj.foo());
// expected output: "bar"
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions

jakecigar

Re: Re: Selectmenu goes of the page, how to fix?

2 years ago

I understand that you only want the position for those elements. I suggest you call datepicker with the position on for the <select>s that need it. The others without.

I completely forgot the shorthand function in an object syntax. We don't get many people who embrace the new ECMA versions. Just remember that your this may be different.

JΛ̊KE

nkostic997

Re: Selectmenu goes of the page, how to fix?

2 years ago

I suggest you call datepicker with the position on for the <select>s that need it.

I don't understand what you mean.

jakecigar

Re: Selectmenu goes of the page, how to fix?

2 years ago

https://jsfiddle.net/jakecigar/j2bj9jep/3/ is what I mean.

JΛ̊KE

jakecigar

Re: Selectmenu goes of the page, how to fix?

2 years ago

Or maybe like https://jsfiddle.net/jakecigar/j2bj9jep/4/ where just the last select in each row gets the position.

JΛ̊KE

nkostic997

Re: Selectmenu goes of the page, how to fix?

2 years ago

https://jsfiddle.net/jakecigar/j2bj9jep/3/ is what I mean.

Can't do the job. $el refers to the original <select> element. What is needed is to check is div.ui-selectmenu-menu off the screen (div.ui-selectmenu-menu exists only after Selectmenu is opened). Those two elements, for example, have different dimensions. Click to view the image.

Or maybe like https://jsfiddle.net/jakecigar/j2bj9jep/4/ where just the last select in each row gets the position.

Code that I've posted in first post is just for demo purposes. This is too hacky. There hasn't to be a table involved at all. For example, what if Selectmenu is on the left side of the page, but page width is narrow.

But yes, in my project I really have use table so if I don't find a better solution I will end up using this.

Seems like none of the changes to the Selectmenu work when it's opened first time.

https://jsfiddle.net/rh6gjkpt/1/

https://jsfiddle.net/rh6gjkpt/3/

nkostic997