Two versions of a small project exist, 'webpack' and 'retro'. The webpack version utilizes
../app.scss/...@import "~bootstrap/scss/bootstrap";<link rel="stylesheet" href="{{ asset("css/bootstrap.min.css") }}"/>../src and ../template.
The issue arises with the differing rendering of a CheckboxType form field between the two versions. The timelines within Symfony's profiler show discrepancies. What could be causing this variation?
Note: The differences highlighted here are not unique to these specific projects, as distinct rendering variations occur across all forms.
Template snippet:
<div class="col-6">
{{ form_row(form.meal_type) }}
</div>
Retro Version Example:
https://i.sstatic.net/Rgl38.jpg
Retro HTML:
<div>
<div id="meal_meal_type">
<input type="radio" id="meal_meal_type_0" name="meal[meal_type]" required="required" value="Breakfast" checked="checked" />
<label for="meal_meal_type_0" class="required">Breakfast</label>
<input type="radio" id="meal_meal_type_1" name="meal[meal_type]" required="required" value="Lunch" />
<label for="meal_meal_type_1" class="required">Lunch</label>
<input type="radio" id="meal_meal_type_2" name="meal[meal_type]" required="required" value="Dinner" />
<label for="meal_meal_type_2" class="required">Dinner</label>
</div>
</div>
Webpack Version Example:
https://i.sstatic.net/USYLx.jpg
Webpack HTML:
<fieldset class="mb-3">
<div id="meal_meal_type">
<div class="form-check">
<input type="radio" id="meal_meal_type_0" name="meal[meal_type]" required="required" class="form-check-input" value="Breakfast" checked="checked" />
<label class="form-check-label required" for="meal_meal_type_0">Breakfast</label>
</div>
<div class="form-check">
<input type="radio" id="meal_meal_type_1" name="meal[meal_type]" required="required" class="form-check-input" value="Lunch" />
<label class="form-check-label required" for="meal_meal_type_1">Lunch</label>
</div>
<div class="form-check">
<input type="radio" id="meal_meal_type_2" name="meal[meal_type]" required="required" class="form-check-input" value="Dinner" />
<label class="form-check-label required" for="meal_meal_type_2">Dinner</label>
</div>
</div>
</fieldset>
A notable difference is also observed in the timelines associated with each respective method.
Retro Timeline:
https://i.sstatic.net/hBuGv.jpg
Webpack Timeline: