Positions of labels appearing at top instead of left - SEO

csharpandswiftuidevni
October 20, 2017
115 views
1 vote
2 Answers

I am using bootstrap to style my admin using the adminlte theme I am trying to get my labels left to my textboxes but I am using the following

<div class="col-md-10">
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#activity" data-toggle="tab">Prodct Info</a></li>
                <li><a href="#images" data-toggle="tab">Product Images</a></li>
                <li><a href="#seo" data-toggle="tab">Seo</a></li>
                <li><a href="#settings" data-toggle="tab">Settings</a></li>
            </ul>
            <div class="tab-content">
                <div class="active tab-pane" id="activity">
                    <form asp-controller="Products" asp-action="Create" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="form-horizontal" role="form">

                        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                        <div class="form-group">
                            <label asp-for="ProductName" class="control-label">Product Name</label>
                            <input asp-for="ProductName" class="form-control" />
                            <span asp-validation-for="ProductName" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <label asp-for="LongDescription" class="control-label"></label>


                            <textarea id="editor1" name="editor1" rows="10" cols="80">
                                        This is my textarea to be replaced with CKEditor.
                </textarea>

                        </div>
                        <div class="form-group ">
                            <label asp-for="OldPrice" class="control-label"> Old Price</label>
                            <input asp-for="OldPrice" class="form-control" />
                            <span asp-validation-for="OldPrice"  class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <label asp-for="NewPrice" class="control-label">Price</label>
                            <input asp-for="NewPrice" class="form-control" />
                            <span asp-validation-for="NewPrice" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <label asp-for="SKU" class="control-label">Sku (Product No)</label>
                            <input asp-for="SKU" class="form-control" />
                            <span asp-validation-for="SKU" class="text-danger"></span>
                        </div>

                </div>

Which gives me a layout as such But I want the labels of the controls to be to the left with equal padding

This is what I am trying to achieve does anybody no how to.

Answers

Use the form-inline class with each form-group as per Bootstrap’s documentation. An example from your code would be:

<div class="form-group form-inline">
    <label asp-for="OldPrice" class="control-label"> Old Price</label>
    <input asp-for="OldPrice" class="form-control" />
    <span asp-validation-for="OldPrice"  class="text-danger"></span>
</div>

Edit: I missed the part where you wanted equal spacing. In that case Patrick O’Grady’s answer should work. However, you have closed your outer div tag before closing the form. Here is the complete code you gave with the proper tags and closures:

		<div class="col-md-10">
			<div class="nav-tabs-custom">
				<ul class="nav nav-tabs">
					<li class="active"><a href="#activity" data-toggle="tab">Prodct Info</a></li>
					<li><a href="#images" data-toggle="tab">Product Images</a></li>
					<li><a href="#seo" data-toggle="tab">Seo</a></li>
					<li><a href="#settings" data-toggle="tab">Settings</a></li>
				</ul>
				<div class="tab-content">
					<div class="active tab-pane" id="activity">
						<form asp-controller="Products" asp-action="Create" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="form-horizontal" role="form">
							<div asp-validation-summary="ModelOnly" class="text-danger"></div>
							<div class="form-group">
								<label asp-for="ProductName" class="control-label col-sm-2">Product Name</label>
								<div class="col-sm-10">
									<input asp-for="ProductName" class="form-control" />
									<span asp-validation-for="ProductName" class="text-danger"></span>
								</div>
							</div>
							<div class="form-group">
								<label asp-for="LongDescription" class="control-label col-sm-2"></label>
								<div class="col-sm-10">
									<textarea id="editor1" name="editor1" rows="10" cols="80">This is my textarea to be replaced with CKEditor.</textarea>
								</div>
							</div>
							<div class="form-group ">
								<label asp-for="OldPrice" class="control-label col-sm-2"> Old Price</label>
								<div class="col-sm-10">
									<input asp-for="OldPrice" class="form-control" />
									<span asp-validation-for="OldPrice"  class="text-danger"></span>
								</div>
							</div>
							<div class="form-group">
								<label asp-for="NewPrice" class="control-label col-sm-2">Price</label>
								<div class="col-sm-10">
									<input asp-for="NewPrice" class="form-control" />
									<span asp-validation-for="NewPrice" class="text-danger"></span>
								</div>
							</div>
							<div class="form-group">
								<label asp-for="SKU" class="control-label col-sm-2">Sku (Product No)</label>
								<div class="col-sm-10">
									<input asp-for="SKU" class="form-control" />
									<span asp-validation-for="SKU" class="text-danger"></span>
								</div>
							</div>
						</form>
					</div>

You’ve got the form-horizontal class added to <form>, but I think you also need to add grid column classes to define the widths of each label and input.

For example, add the class col-sm-2 to <label>, and then wrap the input and span inside

<div class="col-sm-10">

</div>

Using classes col-sm-* will cause the label and input to stack if the viewport is < 768px. If you want them to be horizontal always, then use col-xs-*.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<!--Stacked if width < 768px -->
<form class="form-horizontal">
  <div class="form-group">
    <label asp-for="OldPrice" class="col-sm-2 control-label">Old Price</label>
    <div class="col-sm-10">
      <input asp-for="OldPrice" class="form-control" />
      <span asp-validation-for="OldPrice" class="text-danger"></span>
    </div>
  </div>
</form>

<!-- Never stacked -->
<form class="form-horizontal">
  <div class="form-group">
    <label asp-for="OldPrice" class="col-xs-2 control-label">Old Price</label>
    <div class="col-xs-10">
      <input asp-for="OldPrice" class="form-control" />
      <span asp-validation-for="OldPrice" class="text-danger"></span>
    </div>
  </div>
</form>

Source: https://getbootstrap.com/docs/3.3/css/#forms-horizontal

Please signup or login to give your own answer.

Click here to cancel reply.

Positions of labels appearing at top instead of left – SEO

Answers