Fixing Form Field Alignment Issue in Firefox
After encountering and solving a form field alignment issue myself, I realized that the problem persisted in Firefox while displaying correctly in Chrome. Here's how I resolved it, although I am open to more refined cross-platform solutions.
The issue resembled another question on Stack Overflow: How can I align my checkbox with CSS. However, the discrepancy lies in Chrome vs. Firefox behavior.
A brief overview of the code:
- Utilizing Symfony 2 form builder
- Incorporating Bootstrap with Custom Less/CSS Styling
- Rendering via Twig/HTML
Initially, I explored flexbox styling as a potential fix, but after experimenting with different approaches without success, I opted for a simpler albeit effective solution instead.
Recreating the exact problem scenario may prove challenging; hence, I will share a snippet from the .html.twig file:
{{ form_start(form) }}
{{ form_errors(form) }}
{{ form_row(form.id) }}
{{ form_row(form.embedded) }}
<div class="row">
<div class="col-xs-12"><label id="subformHeader">Field(s)</label></div>
</div>
<ul id="sortable" class="fields subform" data-prototype="{{ form_widget(form.fields.vars.prototype)|e }}">
{% for key, field in form.fields %}
<li>
<span class="glyphicon glyphicon-sort"></span>
{{ form_row(field.name) }}{{ form_row(field.type) }}{{ form_row(field.options) }}
</li>
{% endfor %}
</ul>
<div class="btn-toolbar">
<input type="submit" value="Save" class="btn btn-primary pull-left" />
{% if id %}
<a class="btn btn-warning pull-left" id="delete" href="?delete=y&id={{id}}">Delete</a>
<a href="{{path('path_to_data')}}" class="btn btn-warning pull-left" id="reset">Reset</a>
{% endif %}
</div>
{{ form_end(form) }}
Below is a glimpse of the CSS/Less employed:
.subform {
list-style: none;
li {
div {
display: inline-block;
label {
display: none;
}
}
.deleteLink, .fieldOptions {
margin-left: 4px;
}
}
li:first-child div label {
display: inline;
}
}