Select Width for ForeignKey on Admin Change Form

[jonasjahns]

When show a Simple Select for ForeignKey on Admin form the width of the field isn't set right.
As you can see on the test app, the width of the element is set to 163px:

But, it needs to be set to 168px so the whole text can apper in the select widget:

I don't know if its intended to be like this, but, it stated on 2.4.0.

[farridav]

Is this happening on master ? I recently set the select2 width option to be "element" in a hope to resolve these issues...

[SVDouble]

Yep, I can confirm
I'm facing the same issue
Everything works as expected in the version 2.4.2 though

[jonasjahns]

@farridav i'm using the lattest version avaliable

The previous prints are from the demo app of jazzmin :)

[linhnvhicts]

I'm on jazzmin 2.4.3 and this also happening to alot of the foreign key fields, most of the text are hidden which look really ugly
the duration text "20 minutes" not even that long but it getting hidden

Can element.style width be set to auto ?

@farridav i guess it's from this change
83de3f9#diff-3832ceb7c667791995395ffd9265f59abc2b53c1ba03b0a000796c61f7057b8bL112

maybe changing width to auto would work better ? ({ width: 'auto', theme: "classic" })

[farridav]

Sure, I'll give this a try, I tried to reproduce the problem in the demo app with no success, it looked as though allowing the element to determine its width would fit all scenarios, but I guess there is some race condition there where the elements width is calculated before the choices are populated.

I'll update with my findings asap

[jonasjahns]

@farridav is saw your test in the demo app.
In my browser it's repoducing the error, as you can see bellow:

[budlight]

I am having this same issue. on 2.4.4

Why not just change the design so it goes to max width? Maybe later add an option to either set it to auto or a width?

.select2-container {
    width: 100% !important;
}

effectively solves my issue but then wraps the edit and add icons to the next line (but its useable where with auto it is not)

[SVDouble]

@farridav
This issue persists on the master branch as well.
What solves it in my case are the following steps:
a) set select2 parameters in the change_form.js to (commit):
$('select').not(noSelect2).select2({ width: '100%', theme: "classic" });
It is also important that the theme is specified: without it some elements look really ugly
b) set select2 parameters in the change_list.js to (commit):
$ele.select2({ width: '100%' });

[jonasjahns]

@farridav
This issue persists on the master branch as well.
What solves it in my case are the following steps:
a) set select2 parameters in the change_form.js to (commit):
$('select').not(noSelect2).select2({ width: '100%', theme: "classic" });
It is also important that the theme is specified: without it some elements look really ugly
b) set select2 parameters in the change_list.js to (commit):
$ele.select2({ width: '100%' });

Hi SVDouble, i tried this but didn't work out for me!