Open 0x4A-0x41-0x4B opened 1 year ago
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"
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:
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.