Answered by:
How can i bring the text area to the same column of other controll

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