1

Is there a way to specify the css for an individual field and input in django crispy forms? I am using bootstrap4 and would like to use a horizontal form for a few fields in my form.

I know you can use a self.helper to set label.class and field.class but I presume that applies to all field. I only want to change the label and field class on a few of my fields.

EDIT:

I need to add css to the label that is different from the input

I'm trying to get a horizontal field inside a form like the amount field below

enter image description here

<div id="div_id_amount" class="row">
    <label for="id_amount" class="col-form-label col-2  requiredField">
        Amount<span class="asteriskField">*</span>
    </label>
    <div class="">
        <input type="number" name="amount" step="0.01" class="numberinput form-control col-md" required="" id="id_amount">
        </div>
</div>
Ben
  • 225
  • 3
  • 11
  • Look at [layouts](https://django-crispy-forms.readthedocs.io/en/latest/layouts.html). Or you can just set class attributes for the [widget](https://docs.djangoproject.com/en/2.2/ref/forms/widgets/#styling-widget-instances) of a field. Both links show you examples where the class of the input element is changed. – dirkgroten Sep 20 '19 at 15:12
  • I'm sorry, I'm very new at this and having a hard time reading through the docs. I basically want to make a horizontal form and have read I need to specify a col-* size for the id and input field and wrap that in a row div. But I don't know how to specify two sizes for 1 element. Does that make sense? – Ben Sep 20 '19 at 15:24
  • I usually advise against using crispy-forms because it moves the layout into the `Form` code and I believe layout should be done in HTML. The second link tells you that if you add `name = forms.CharField(widget=forms.TextInput(attrs={'class': 'col-6'}))` to a `name` field in your form your input field will have `col-6` as class attribute. – dirkgroten Sep 20 '19 at 15:29
  • Anyway, the documentation is well written and "having a hard time reading through the docs" usually means "I can't be bothered". Sorry, but without reading and understanding the documentation you won't get anywhere. – dirkgroten Sep 20 '19 at 15:32
  • No no, I get that, believe me this is a last resort I have been looking for answers for about a week now. what attrs would you use to set the css for the label? I guess that is what i'm struggling with. I appreciate the assistance – Ben Sep 20 '19 at 15:41

2 Answers2

1

One solution is given here:

  • You add the class attributes for the input field via the widget, as also explained in the django docs
  • You explicitly add the <label> tags with the correct class in your HTML.

Or, for the label, you can also create the following template filter:

@register.filter(is_safe=True)
def label_with_classes(field, css):
    return field.label_tag(attrs={'class': css})

which you can use like this in your template after you've loaded it with {% load my_filters %}: {{ form.name|label_with_classes:"col-sm-6 col-lg-3" }}

I don't know of an easy way with crispy-forms.

dirkgroten
  • 20,112
  • 2
  • 29
  • 42
0

You can add this in your Layout:

Field('password', id="password-field", css_class="passwordfields", title="Explanation")

You can find more details here

Andrei Prãdan
  • 315
  • 1
  • 2
  • 10
  • 1
    That would set the css for the div containing both the label and the input correct? Is there a way to set the css for the label and the input separately? – Ben Sep 20 '19 at 15:54