locked
How can i bring the text area to the same column of other controll RRS feed

  • Question

  • User-1355965324 posted

    I am using bootstrap 4 and I am trying to   show the text area column to start from the same column of other text box  in left side of the screen. However I try the text area column does not show  in the same column of other control in left side . please give a help it would be very appreciated .

    Text are should be shown across  12 column width. But when I try to show ,  the text area always being showed bit far from other column. I have attached image below

    https://drive.google.com/file/d/1bkWIdOVdTGuHdi7UCucxLbmY3uWoVTKR/view?usp=sharing

    My code

    <div class="row">
            <div class="col-md-6">
                <div class="form-group row">
                    <label for="inputName" class="control-label  col-3 col-form-label">Make</label>
                    <div class="col-9">
                        <input class="form-control input-sm" type="text" id="inputName"
                               asp-for="Make" />
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group form-group-sm row">
                    <label for="inputName" class="control-label col-3 col-form-label">Model</label>
                    <div class="col-9">
                        <input class="form-control input-sm" type="text" id="inputName"
                               asp-for="Model" />
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group  row">
                    <label for="inputName" class="control-label  col-3 col-form-label">Reg.No</label>
                    <div class="col-9">
                        <input class="form-control input-sm" type="text" id="inputName"
                               asp-for="RegNo" />
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group  row">
                    <label for="inputName" class="control-label col-3 col-form-label">Description</label>
                    <div class="col-9">
                        <input class="form-control input-sm" type="text" id="inputName"
                               asp-for="VehicleName" />
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group  row">
                    <label for="MOTDate" class="control-label  col-3 col-form-label">MOT Date</label>
                    <div class="col-9">
                        <input class="form-control input-sm" type="text" id="inputName"
                               asp-for="MOTDate" />
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group row">
                    <label for="TaxDate" class="control-label col-3 col-form-label">Tax Date</label>
                    <div class="col-9">
                        <input class="form-control input-sm" type="text" id="inputName"
                               asp-for="TaxDate" />
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group row">
                    <label for="InsuredDate" class="control-label col-3 col-form-label">Date insured</label>
                    <div class="col-9">
                        <input class="form-control input-sm" type="text" id="inputName"
                               asp-for="InsuredDate" />
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group row">
                    <label for="RegDate" class="control-label col-3 col-form-label">Reg Date</label>
                    <div class="col-9">
                        <input class="form-control input-sm" type="text" id="inputName"
                               asp-for="RegDate" />
                    </div>
                </div>
    
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group row">
                    <label for="VehicleStatusId" class="control-label col-3 col-form-label">Status</label>
                    <div class="col-9">
                        <input class="form-control input-sm" type="text" id="inputName"
                               asp-for="VehicleStatusId" />
                    </div>
                </div>
            </div>
            <div class="col-md-6">
    
    
            </div>
        </div>
    
        <div class="row">
            <div class="col-md-12">
                <div class="form-group row">
                    <label for="Comment" class="control-label col-2 col-form-label">Comment</label>
                    <div class="col-10">
                        <textarea asp-for="Comment" class="form-control"></textarea>
                    </div>
                </div>
            </div>
          
        </div>

     

    Sunday, June 14, 2020 8:01 AM

Answers

  • User-474980206 posted

    Your labels are 3 column in 6 column grid in a 12 column grid. So to get the same width in a 12 column grid it’s needs to be a 1.5 column for the textarea label and 10.5 columns for the textarea. Of course bootstrap does not have half columns, you will need to add custom css.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, June 14, 2020 4:49 PM
  • User1535942433 posted

    Hi polachan,

    As bruce says,the Comment label need to be a 1.5 column and the textarea need to be 1.5 column.Since col-md-1 is of width 8.33333333%,so simply multiply 8.33333333 * 1.5 and set it as your width.You could use css to override the width of the Column.

    More details,you could refer  to below codes:

    <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label for="Comment" class="control-label col-md-1 col-form-label" style="width: 12.3%; flex: 0 0 12.499%;max-width: 12.499%;">Comment</label>
                    <div class="col-md-10" style="width:87.7%;">
                        <textarea asp-for="Comment" class="form-control"></textarea>
                    </div>
                </div>
            </div>
    
        </div>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 15, 2020 2:24 AM

All replies

  • User-474980206 posted

    Your labels are 3 column in 6 column grid in a 12 column grid. So to get the same width in a 12 column grid it’s needs to be a 1.5 column for the textarea label and 10.5 columns for the textarea. Of course bootstrap does not have half columns, you will need to add custom css.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, June 14, 2020 4:49 PM
  • User1535942433 posted

    Hi polachan,

    As bruce says,the Comment label need to be a 1.5 column and the textarea need to be 1.5 column.Since col-md-1 is of width 8.33333333%,so simply multiply 8.33333333 * 1.5 and set it as your width.You could use css to override the width of the Column.

    More details,you could refer  to below codes:

    <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label for="Comment" class="control-label col-md-1 col-form-label" style="width: 12.3%; flex: 0 0 12.499%;max-width: 12.499%;">Comment</label>
                    <div class="col-md-10" style="width:87.7%;">
                        <textarea asp-for="Comment" class="form-control"></textarea>
                    </div>
                </div>
            </div>
    
        </div>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 15, 2020 2:24 AM