AutoComboboxSelectWidget and AutoComboboxSelectMultipleWidget width

[Elmar Bucher]

Dear List,

Is there a way to set the width of a AutoComboboxSelectWidget and AutoComboboxSelectMultipleWidget box?

I make heavily use of AutoComboboxSelectWidget and AutoComboboxSelectMultipleWidget in my project.
They work super smooth but they are far to short to display the selected entry.

I search the read the docs documentation,  this post here,  and asked my search engine.
But I could not find the answer.

Thank you,
Elmar

[Mark Lavin]

The most appropriate way to adjust the form control width is with CSS. https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms#Box_model is a fair introduction on styling HTML forms, noting some of the common challenges.

--
You received this message because you are subscribed to the Google Groups "django-selectable" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-selecta...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Elmar Bucher]

Thank you Mark for this answer.

I modified   static/selectable/css/dj.selectable.css by adding in  a local version.
select {
     width: 512px;
     box-sizing: border-box;
}
But this does not exactly hat I want to do. Please have a look at the attached screen shut.
The "Plate type" box became indeed 512px width.
But e.g. the "Sample addition" AutoComboboxSelectWidget box stays small. This is the one I would like to get wider, So that the chosen text is fully visible.
When I press the drop down button then the list is wide enough. It is only the box it self that is to small.
Is maybe select the wrong element that I css style?

Happy for any further hint.
Thank you so far,
Elmar

[Mark Lavin]

Yes the widgets from django-selectable aren't <select> elements. They are <input type="text">. Selecting them by their class name is probably the easiest way to target them. I wouldn't recommend modifying the selectable.css. These customizations should live in your project's CSS files.

[Elmar Bucher]

hi Mark,

i could not figure out how to select the widgets by class name in a manner that it worked,
but the following code does the trick too:

/* 20170413 bue: AutoComboboxSelectWidget style*/
input[data-selectable-type="combobox"] {
    width: 448px;
}

/* 20170413 bue: AutoComboboxSelectMultipleWidget style*/
input[data-selectable-type="combobox"][data-selectable-multiple="true"] {
    width: 192px;
}

in addition I made an own static css style sheet for my project, as you suggested.
this solved as side effect several small bugs i never understood where they came form. apparently they occurred because I just overloaded the admin css style sheet ... which whit each django release got more and more outdated.
I definitely learned some thing!

Thanks a bunch for all the explanation.
Best,
Elmar