Select field not resizable

When rendering a select field its css_class and wrapper_class can be changed. But its "select" div stays the same and can't be changed without overriding the template.

Current "select.html" template:

{% load crispy_forms_bulma_field %}

<div class="control">
  <div class="select{% if field|is_selectmultiple %} is-multiple{%endif%}{% if field.errors %} is-danger{% endif %}">
    {% crispy_field field %}
  </div>
</div>

If you want to make the select field take up the full width, for example, the control and input field css_class can be set, but the select field will still stay the same and refuse to take the available space. Therefore stopping the input field from actually expanding.

Perhaps i'm just overlooking something with bulma, but as i see it you can't really make a select field take up the full width without overriding the template or creating an unnecessary css rule.

Hi @0x4A-0x41-0x4B,

you are right, this is not supported yet. I've been using a custom field and template as a workaround for a while (I'm undecided if this is the right approach, that's why it's not in main yet):

form_helper.py

from crispy_forms.layout import Field

class SelectField(Field):
    def __init__(self, *args, **kwargs):
        self.control_class = kwargs.pop("control_class", None)
        self.select_class = kwargs.pop("select_class", None)
        super().__init__(*args, **kwargs)

    def render(self, *args, **kwargs):
        extra_context = kwargs.get("extra_context", {})

        if self.control_class:
            extra_context["control_class"] = self.control_class
        if self.select_class:
            extra_context["select_class"] = self.select_class

        kwargs["extra_context"] = extra_context
        return super().render(*args, **kwargs)

bulma/layout/select.html

{% load crispy_forms_bulma_field %}

<div class="control{% if control_class %} {{ control_class }}{% endif %}">
  <div class="select{% if field|is_selectmultiple %} is-multiple{%endif%}{% if select_class %} {{ select_class }}{% endif %}{% if field.errors %} is-danger{% endif %}">
    {% crispy_field field %}
  </div>
</div>

And then in the form:

self.helper.layout = Layout(
    (...)
    SelectField(
        "fieldname",
        control_class="is-expanded",
        select_class="is-fullwidth",
    ),
    (...)
)

Perhaps i'm just overlooking something with bulma, but as i see it you can't really make a select field take up the full width without overriding the template or creating an unnecessary css rule.

the trick is to use both "is-expanded" and "is-fullwidth"