0

My project uses Twitter bootstrap on the front-end, the backend is Django, we also use crispy forms. fifth_year is a simple boolean model field

class MyModel(models.Model):
    first_name = models.CharField(verbose_name="First Name", max_length=100)
    last_name = models.CharField(verbose_name="Last Name", max_length=100)
    school = models.CharField(verbose_name="School Type", null=True, blank=True, max_length=100, choices=WIDGET_SCHOOL_CHOICES)
    grad_yr = models.CharField(verbose_name="Class", null=True, blank=True, max_length=100, choices=WIDGET_GRAD_YR_CHOICES)
    fifth_year = models.BooleanField(verbose_name="5th Year", default=False)

...

Essence of the form definition:

    self.helper = FormHelper(form=self)
    self.helper.form_class = 'form-horizontal'
    self.helper.label_class = 'col-sm-3 col-md-2'
    self.helper.field_class = 'col-sm-9 col-md-10'

    self.helper.layout = Div(
        FormActions(
            Submit('save', 'Save', css_class='btn-success'),
            Button('delete', 'Delete', css_class='btn-danger')
        ),
        Field('school'),
        Field('grad_yr'),
        Field('fifth_year'),  # this is the boolean field
        Field('first_name'),
        Field('last_name'),

Comes not aligned up with the other label-input pairs:

enter image description here

I'd expect the checkbox and it's label to better align up with the other labels and inputs and the label to be bold. (Maybe even the checkbox to be form-control, that would inflate it, and it might need some size limitation). To my surprise I didn't find any good leads about why is it like that. I've seen InlineCheckboxes, but that doesn't help. I wonder if I'm just missing some kind of settings or class I don't know about.

HTML of the checkbox:

<div class="form-group">
    <div class="controls col-sm-offset-3 col-sm-9 col-md-10">
        <div id="div_id_player-fifth_year" class="checkbox">
            <label for="id_player-fifth_year" class="">
                <input class="checkboxinput" id="id_player-fifth_year" name="player-fifth_year" type="checkbox">5th Year
            </label>
        </div>
    </div>
</div>

HTML of a text input:

<div id="div_id_player-first_name" class="form-group">
    <label for="id_player-first_name" class="control-label col-sm-3 col-md-2 requiredField">
            First Name
    </label>
    <div class="controls col-sm-9 col-md-10">
        <input class="textinput textInput form-control" id="id_player-first_name" maxlength="100" name="player-first_name" type="text" value="balbla">
    </div>
</div>
Csaba Toth
  • 10,021
  • 5
  • 75
  • 121
  • 1
    What were you expecting it would look like? And I would change the question if I were you to focus on getting it to look as you want. "Why was it designed this way?" questions don't typically do very well, as they're characteristically broad and opinion based unless a decision reason has been explicitly stated. – Carcigenicate Mar 09 '17 at 00:41
  • Sorry for the biased title. I'd expect the label "5th Year" to line up with the other labels (and also be bold), it'd be aligned with the other label-input pairs. And then the checkbox would come. I'll include HTML – Csaba Toth Mar 09 '17 at 00:47
  • Is the check box defaulting to middle alignment for some reason? Try explicitly setting the alignment in CSS. – Carcigenicate Mar 09 '17 at 00:53
  • 1
    @Carcigenicate I'd imagine that the OP is asking, "Is this actually the design, or am I doing something wrong? If this is actually the default design, how can I change it to match the other fields?" – Johndt Mar 09 '17 at 00:54
  • @Johndt6 Which my suggestion addresses. If he sets the alignment manually, he might be able to fix it. – Carcigenicate Mar 09 '17 at 00:55
  • 2
    [Possible duplicate](http://stackoverflow.com/questions/22002861/booleanfield-checkbox-not-render-correctly-with-crispy-forms-using-bootstrap) – Johndt Mar 09 '17 at 00:58
  • @Johndt6 Looks like that other SO questions is similar, also horizontal form from the screenshot. Prependtext kinda helped! – Csaba Toth Mar 09 '17 at 01:16

0 Answers0