vendredi 18 juin 2021

ASP.Net Core MVC checkbox alignment

Can someone please help with a problem I have with two checkboxes side by side. For some reason they don't line up with the rest of the controls and I have to specify a height or else the div has a height of zero. All the other controls align perfectly. I have attached a screen shot and my code. enter image description here

                    <div class="row align-items-start">
                        <div class="col-2">
                            <label asp-for="customer.MeasureLoft" class="col-form-label">M (Loft)</label>
                        </div>
                        <div class="col-2">
                            <label asp-for="customer.MeasureIWI" class="col-form-label">M (IWI)</label>
                        </div>
                        <div class="col-2">
                            <label asp-for="customer.MeasureUFI" class="col-form-label">M (UFI)</label>
                        </div>
                        <div class="col-2">
                            <label asp-for="customer.MeasureRIR" class=" col-form-label">M (RIR)</label>
                        </div>
                        <div class="col-4">
                            <label asp-for="customer.MeasureESH_FTCH" class="col-form-label">M (ESH/FTCH)</label>
                        </div>
                    </div>
                    <div class="row align-items-start">
                        <div class="col-2">
                            <input asp-for="customer.MeasureLoft" class="form-control" style="width:100px;" />
                        </div>
                        <div class="col-2">
                            <input asp-for="customer.MeasureIWI" class="form-control" style="width:100px;" />
                        </div>
                        <div class="col-2">
                            <input asp-for="customer.MeasureUFI" class="form-control" style="width:100px;" />
                        </div>
                        <div class="col-2">
                            <input asp-for="customer.MeasureRIR" class="form-control" style="width:100px;" />
                        </div>
                        <div class="col-4">
                            <input asp-for="customer.MeasureESH_FTCH" class="form-control" style="width:100px;" />
                        </div>
                    </div>
                    <div class="row align-items-start">
                        <div class="col-6">
                            <label asp-for="customer.Flex" class="col-form-label">Flex</label>
                        </div>
                        <div class="col-6">
                            <label asp-for="customer.HCRO" class="col-form-label">HCRO</label>
                        </div>
                    </div>
                    <div class="row align-items-start" style="height: 38px;">
                        <div class="col-6">
                            <input asp-for="customer.Flex" class="form-check-input" type="checkbox" />
                        </div>
                        <div class="col-6">
                            <input asp-for="customer.HCRO" class="form-check-input" type="checkbox" />
                        </div>
                    </div>



Aucun commentaire:

Enregistrer un commentaire