Change the css class of an element in a Django form that uses ModelForm

Question

I have the following model:

class PledgeSettings(models.Model):

    message = models.CharField(max_length=200, blank=True, null=True)

    amount = MoneyField(
        max_digits=6,
        decimal_places=2,
        default_currency='CAD',
        blank=True,
        null=True,
    )

and I have the following form that uses that model:

class PledgeSettingsForm(forms.ModelForm):

    class Meta:
        model = PledgeSettings

    def __init__(self, *args, **kwargs):
        super(PledgeSettingsForm, self).__init__(*args, **kwargs)

        self.fields['message'].widget.attrs = {
            'placeholder': _('Everytime I eat a doughnut'),
        }
        self.fields['message'].label = False

        self.fields['amount'].label = _('I pledge to donate $')

        self.helper = FormHelper()
        self.helper.form_class = 'form-horizontal'
        self.helper.label_class = 'col-xs-9'
        self.helper.field_class = 'col-xs-3'

        self.helper.layout = Layout(
            'message',
            'amount'
        )

        self.helper.layout.append(
            Submit('save', 'Save', css_class='save_button')
        )

The problem is that self.helper.label_class = 'col-xs-9' and self.helper.field_class = 'col-xs-3' has no effect, and I would like to set the css class of a particular element, e.g., message or amount, and

The HTML I am getting is:

<form class="form-horizontal" method="post"> <input type="hidden" ...>
    <div id="div_id_message" class="control-group">
        <div class="controls">
            <input type="text" name="message" value="I smoke a cigarette" placeholder="Some text" class="textinput textInput" id="id_message">
        </div>
    </div>
    <div id="div_id_amount" class="control-group">
        <label for="id_amount_0" class="control-label ">
            Some text
        </label>
        <div class="controls">
            <input type="number" name="amount_0" value="1.00" step="0.01" class="col-xs-3" id="id_amount_0">

            <select name="amount_1" class="col-xs-3" id="id_amount_1"> 
            <option value="CAD" selected="">Canadian Dollar</option>
        </div>
    </div>
</form>

What I want to change is the classes for the label element and the input element particularly for each element. I have no idea how to do that. Can anybody help me to solve this issue?

Have you considered Javascript? Or is that out of the question? — almost a beginner
– almost a beginner, Commented May 6, 2017 at 7:42
@almostabeginner, yeah I have thought about JS, but I would like to know if you can do it directly in the django form or using the self.helper instance variable. — lmiguelvargasf
– lmiguelvargasf, Commented May 6, 2017 at 13:28

Algorithmatic · Accepted Answer · 2017-05-05 21:49:29Z

1

Why not do something like this

self.helper.layout = Layout(
    Div(
        Field('message'), css_class="class-here"
    ),

    # Field('description'), # or this way if you don't want to wrap around div
)

answered May 5, 2017 at 21:49

Algorithmatic

1,9122 gold badges25 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

lmiguelvargasf Over a year ago

the problem is that I want to change the class of the elements I have not to add new elements.

NS0 · Accepted Answer · 2017-05-05 21:35:57Z

0

I don't have much experience with crispy-forms, so this can be wrong, but try the following:

For the first issue try self.helper = FormHelper(self) instead of self.helper = FormHelper()

To set the css class of a particular element, you would need to create a Layout like:

self.helper.layout = Layout(
    Field('password', id="password-field", css_class="passwordfields",        
          title="Explanation")
)

3 Comments

lmiguelvargasf Over a year ago

the problem is that I want to change the class of self.fields['message'], not create a new element. The elements I want to use are in my model.

NS0 Over a year ago

Does this work? self.fields['message'].widget.attrs = { 'class': 'class-here', }

lmiguelvargasf Over a year ago

sort of work, it changes the class of an input and a select inside a div that is inside a div which holds that also holds a label.

Collectives™ on Stack Overflow

Change the css class of an element in a Django form that uses ModelForm

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related