CODEWITHSUNDEEP
cssdjangodjango-crispy-forms
lmiguelvargasf
lmiguelvargasf

Reputation: 69675

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

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?

Upvotes: 0

Views: 763

Answers (2)

Algorithmatic
Algorithmatic

Reputation: 1882

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
)

Upvotes: 1

NS0
NS0

Reputation: 6096

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")
)

Read more here

Upvotes: 0

Related Questions