locked
Horizontal Align dropdown boxes and there labels RRS feed

  • Question

  • User-183185495 posted

    I am trying at the minute to get my forms controls to appear side by side but at present their vertically stacked and taking up to much room at present.

    <div class="col-lg-3">
    <form class="row">
    
    <div class="form-row">
    <div class="form-group col-md-12">
    <label>OIC 1</label>
    @Model.StaffMembersOIC1.FirstName @Model.StaffMembersOIC1.LastName
    @if (@Model.StaffMembersOIC2 != null) {
        <br />
        <label>OIC 2</label>
        @Model.StaffMembersOIC2.FirstName @Model.StaffMembersOIC2.LastName
    
    }
    <br />
    
    @if (User.Identity.IsAuthenticated && User.IsInRole("manager")) {
        <div class="form-group col-md-16">
    
            <label>Enforcement Cat</label>
            <select asp-for="Enf_Cat" id="ddCat" class=" form-control" data-style="btn-new" asp-items="ViewBag.EnforcementCats">
                <option>Category</option>
            </select>
        </div>
        <div class="form-group col-md-16">
    
            <label>Enforcement Types</label>
            <select asp-for="Enf_Type" id="ddType" class=" form-control" data-style="btn-new" style="150px;">
                <option>Type</option>
            </select>
        </div>
        <div class="form-group col-md-16">
    
    
            <label>Enforcement Types</label>
    
            <select asp-for="Enf_Item" id="dditem" class=" form-control" data-style="btn-new">
                <option>Item</option>
            </select>
    
        </div>
        <div class="form-group col-md-16">
    
    
            <label>Priority</label>
            <select asp-for="Priority" id="dditem" asp-items="ViewBag.Prioritys" class=" form-control" data-style="btn-new">
            </select>
    
        </div>
    } else {
        @Model.Enf_Cats.Description<br />
        <label>Enforcement Types</label>
        @Model.Enf_Types.Description<br />
        <label>Enforcement Item</label>
        @Model.Enf_Items.Description<br />
    }
    </div>

    Wednesday, July 22, 2020 9:04 PM

All replies

  • User475983607 posted

    The Bootstrap reference documentation illustrates the markup and CSS to create inline form inputs.

    https://getbootstrap.com/docs/4.0/components/forms/#form-grid

    Wednesday, July 22, 2020 9:16 PM
  • User1535942433 posted

    Hi roguenidb,

    Accroding to your codes,I suggest you could use form-group row to put your dropdown boxes and labels and you need to add col-md in your labels and dropdown boxes.
    Note:Bootstrap's grid system allow 12 columns in one row.So your col-md-16 is wrong.

    Since you don't post full codes,I create a demo,just like this:

    <div class="form-group row">
                            <div class="col-md-2">
                                <label>Enforcement Cat</label>
                            </div>
                            <div class="col-md-10">
                                <select asp-for="Enf_Cat" id="ddCat" class="form-control" data-style="btn-new" asp-items="ViewBag.EnforcementCats">
                                    <option>Category</option>
                                </select>
    
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-2">
                                <label>Enforcement Types</label>
                            </div>
                            <div class="col-md-10">
    
                                <select asp-for="Enf_Type" id="ddType" class=" form-control" data-style="btn-new" style="150px;">
                                    <option>Type</option>
                                </select>
                            </div>
    
                        </div>
                        <div class="form-group row">
                            <div class="col-lg-2">
                                <label>Enforcement Types</label>
                            </div>
                            <div class="col-lg-10">
                                <select asp-for="Enf_Item" id="dditem" class=" form-control" data-style="btn-new">
                                    <option>Item</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-lg-2">
                                <label>Priority</label>
                            </div>
                            <div class="col-lg-10">
                                <select asp-for="Priority" id="dditem" asp-items="ViewBag.Prioritys" class=" form-control" data-style="btn-new">
                                </select>
                            </div>
    

    Result:

    Best regards,

    Yijing Sun

    Thursday, July 23, 2020 3:27 AM