CODEWITHSUNDEEP
htmldjangodjango-crispy-forms
Alex Lord Mordor
Alex Lord Mordor

Reputation: 3040

Django - Crispy Forms - Custom input positioning and inline radio buttons

I have been working with django-crispy-forms a while ago and I want to know if there is a way to set the positioning of the inputs like the col-md-XX classes or something to make it looks better and not just like a list of fields.

Here is an example:

This is a "normal" render of a crispy-form using {{ form | crispy }} or {% crispy form %} enter image description here

I want to be rendered like this with python code in the forms.py or something like that. Actually I make this by typing HTML code and rendering with as_crispy_field tag. enter image description here

Finally when I render the form with {% crispy form %} I can have the radio buttons with inline style, but with as_crispy_field tag, the radios still looking vertical, even with the InlineRadios layout in the helper.

With as_crispy_field enter image description here

With {% crispy form %} enter image description here

Is there a way to make radios looks horizontal or inline with as_crispy_field tag?

Upvotes: 5

Views: 5421

Answers (1)

Dawn Lin
Dawn Lin

Reputation: 71

You can use crispy InlineRadio Layouts — django-crispy-forms 1.0.0 documentation

class ProgramaForm(forms.ModelForm):
   class Meta:
        model = MyModel
        fields = ['programa']

   def __init__(self, *args, **kwargs):
        super(ProgramaForm, self).__init__(*args, **kwargs)
        self.fields['programa'].required = True
        self.helper = FormHelper()
        self.helper.layout = Layout(
           Div(InlineRadios('programa')),
        )
        self.helper.add_input(Submit('submit', 'Submit'))

Horizontal Radio Buttons For Boolean Values Using Crispy Forms with Django

Upvotes: 7

Related Questions