Right aligning SelectBoxIt controls in a horizontal form - css

I would like how to right-align the control labels next to the SelectBoxIt dropdownlists in correspondence with the "Process Date From" label which would push the SelectBoxIt controls over accordingly.
The "Process Date From" label is in column 1 as is the control labels next to the SelectBoxIt dropdownlists but they are not right aligned like the "Process Date From" label.
I've tried several bootstrap classes, but can't get it tow work....
Here is my code, and below that is the image:
HTML
Position:
Warranty Manager
Warranty Admin
MFR Code/Dsc:
User:
Select All
JM_WhyManager_1
Sent Proc Status:
Select All
Successfully Sent
Unsuccessfully Sent
Process Date From:
To:

After further insight, I got away from the traditional grid-system layout for horizontal forms to my own dismay...
I corrected this by adding the "col-sm-2" class on the label control for the select box and took it away from the outside div which contained the label & selectbox controls.
I also wrapped the selectboxit control in a div and put the "col-sm-2" class on it.
All of the above corrected the error.
Below is my code and below that is the updated screen shot.
HTML
<div class="container nopadding">
<div class="form-group">
<div class="control-group">
<label class="control-label col-sm-2" for="ddlAppealTransmissionLogPosition">Position:</label>
<div class="col-sm-2">
<select id="ddlAppealTransmissionLogPosition" class="form-control">
<option value="Warranty Manager" selected>Warranty Manager</option>
<option value="Warranty Admin">Warranty Admin</option>
</select>
</div>
</div>
<label class="col-sm-2 control-label" for="txtAppealTransmissionLogPositionManufacturerCode">MFR Code/Dsc:</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="txtAppealTransmissionLogPositionManufacturerCode" placeholder="Enter Manufacturer">
</div>
</div>
<div class="form-group">
<div class="control-group">
<label class="control-label col-sm-2" for="ddlAppealTransmissionLogUser">User:</label>
<div class="col-sm-2">
<select id="ddlAppealTransmissionLogUser">
<option value="Select All" selected>Select All</option>
<option value="JM_WhyManager_1">JM_WhyManager_1</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label col-sm-2" for="ddlAppealTransmissionLogSentProcessStatus">Sent Proc Status:</label>
<div class="col-sm-2">
<select id="ddlAppealTransmissionLogSentProcessStatus">
<option value="Select All" selected>Select All</option>
<option value="Successfully Sent">Successfully Sent</option>
<option value="Unsuccessfully Sent">Unsuccessfully Sent</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="dteAppealTransmissionLogRequestedFromDate">Process Date From:</label>
<input class="col-sm-2" id="dteAppealTransmissionLogRequestedFromDate" placeholder="From Date" type="text" />
<span class="label label-default">To:</span>
<input class="" id="dteAppealTransmissionLogRequestedToDate" placeholder="To Date" type="text" />
</div>
</div>

Related

Proper way to set two input fields side by side in Bootstrap 3 form?

I have form with many input fields. To save users from scrolling on the medium and large screens I would like to place some of the input fields side by side. Not all the fields have to be side by side and that's why I'm not using inline form. Here is example of what I have:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmDemo" id="frmDemo">
<div class="form-group required">
<label class="control-label" for="last"><span class="label label-primary">Last Name:</span></label>
<input type="text" class="form-control" name="frmDemo_last" id="frmDemo_last" placeholder="Enter Last Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="first"><span class="label label-primary">First Name:</span></label>
<input type="text" class="form-control" name="frmDemo_first" id="frmDemo_first" placeholder="Enter First Name" maxlength="50" required>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<label class="control-label" for="plan"><span class="label label-primary">Plan:</span></label>
<select class="form-control" name="frmDemo_plan" id="frmDemo_plan">
<option value="">--Choose Plan--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<label class="control-label" for="plantext"><span class="label label-primary">Plan Text:</span></label>
<input type="text" class="form-control" name="frmDemo_plantext" id="frmDemo_plantext" placeholder="Enter Plan Text" maxlength="50">
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-6 col-md-6 col-lg-6">
<label class="control-label" for="gender"><span class="label label-primary">Gender:</span></label>
<select class="form-control" name="frmDemo_gender" id="frmDemo_gender" required>
<option value="">--Choose Gender--</option>
<option value="F">Female</option>
<option value="M">Male</option>
</select>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-6 col-lg-6">
<label class="control-label" for="gender"><span class="label label-primary">Grade:</span></label>
<select class="form-control" name="frmDemo_grade" id="frmDemo_grade" required>
<option value="">--Choose Grade--</option>
<option value="PK">PK</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="submit" name="frmDemo_submit" id="frmDemo_submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="frmDemo_message" class="alert message-submit"></div>
</div>
</div>
</form>
As you can see I was able to achieve that and place the fields side by side. My question is what is the proper way to do that? My first set of fields for the Plan input use form-group div then row div and then col- div. The second set of input fields for Grade and Gender use row div and then form-group col-. Both ways work but which one is valid according to Bootstrap rules? If anyone can explain or give me suggestions I would appreciate that. Thank you.
That's alright. But if you want some other ways without using Bootstrap rows and columns you can target specific .form-group to style in your CSS. Personally I do these since it is much more cleaner than having many nested rows and columns. I would only use rows and columns for other purposes.
HTML:
<div class="form-group required">
<label class="control-label" for="last"><span class="label label-primary">Last Name:</span></label>
<input type="text" class="form-control" name="frmDemo_last" id="frmDemo_last" placeholder="Enter Last Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="first"><span class="label label-primary">First Name:</span></label>
<input type="text" class="form-control" name="frmDemo_first" id="frmDemo_first" placeholder="Enter First Name" maxlength="50" required>
</div>
<div class="form-group">
<label class="control-label" for="plan"><span class="label label-primary">Plan:</span></label>
<select class="form-control" name="frmDemo_plan" id="frmDemo_plan">
<option value="">--Choose Plan--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="plantext"><span class="label label-primary">Plan Text:</span></label>
<input type="text" class="form-control" name="frmDemo_plantext" id="frmDemo_plantext" placeholder="Enter Plan Text" maxlength="50">
</div>
<div class="form-group">
<label class="control-label" for="gender"><span class="label label-primary">Gender:</span></label>
<select class="form-control" name="frmDemo_gender" id="frmDemo_gender" required>
<option value="">--Choose Gender--</option>
<option value="F">Female</option>
<option value="M">Male</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="gender"><span class="label label-primary">Grade:</span></label>
<select class="form-control" name="frmDemo_grade" id="frmDemo_grade" required>
<option value="">--Choose Grade--</option>
<option value="PK">PK</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
</select>
</div>
<div class="form-group">
<button type="submit" name="frmDemo_submit" id="frmDemo_submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-group">
<div id="frmDemo_message" class="alert message-submit"></div>
</div>
CSS:
/* I used nth-child(n+number) pseudoclass selector since you wanted to start from the 3rd div with .form-group class to be side by side with each other. */
.form-group:nth-child(n+3) {
width:50%;
float:left;
}
.form-group:nth-child(n+3) input, .form-group:nth-child(n+3) select {
width:95%;
}

ASP.NET Bootstrap wrong display

I was looking up this style on bootswatch: https://bootswatch.com/simplex/
And especially looked for styling forms, like here:
But when I add the code that you get when clicking on the little red icon in the top right of the form example on bootswatch to my website, it looks like this:
So the text labels and input fields have a line break inbetween them, the a little darker shaded background box isnt shown and other things are misaligned, too. How does that come?
This is the entire code of my Page:
#model WebProto.ViewModels.NewChartConfigViewModel
#using MaschinenModell;
#{
ViewBag.Title = "Neues Diagramm";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<form class="form-horizontal">
<fieldset>
<legend>Legend</legend>
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
<div class="checkbox">
<label>
<input type="checkbox"> Checkbox
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="textArea" class="col-lg-2 control-label">Textarea</label>
<div class="col-lg-10">
<textarea class="form-control" rows="3" id="textArea"></textarea>
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Radios</label>
<div class="col-lg-10">
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
Option one is this
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Selects</label>
<div class="col-lg-10">
<select class="form-control" id="select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<select multiple="" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="reset" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
Okay im so flipping stupid. Its because I displayed the webpage I created in internet explorer. My fault! :D
Firefox, Opera and Chrome show it correctly.

Select List with the width of the form in Bootstrap

I'm doing an application with Rails and AngularJS which have a form with a select list, the problem it's that it looks pretty ugly, because the width is too large for the options it have.
Here's my form with some sample values
How can I shorten the width of the select list without distorting the rest of the form?
Here's the code of my form
<h1>Create Form</h1>
<form ng-submit="addPoll()" style="margin-top:30px;">
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" ng-model="title"></input>
</div>
<div class="form-group">
<label>Description</label>
<textarea type="text" class="form-control" ng-model="description"></textarea>
</div>
<div class="form-group">
<label>Group</label>
<select class="form-control" ng-model="data.groupSelect">
<option ng-repeat="group in data.groups" value="{{group.id}}" >{{group.name}}</option>
</select>
</div>
<div class="form-group">
<label>Welcome Message</label>
<textarea type="text" class="form-control" ng-model="initial_message"></textarea>
</div>
<div class="form-group">
<label>Outgoing Message</label>
<textarea type="text" class="form-control" ng-model="final_message"></textarea>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="allow_anonymous_answer"> Allow Anonymous Answer
</label>
</div>
<button type="submit" class="btn btn-primary" style="float: right;">Continue</button>
</form>
You can do it a few different ways. You can either add an inline style to the div.form-group or use Bootstrap's grid system. Here's two examples:
<div class="form-group" , style="width: 200px">
<label>Group</label>
<select class="form-control" ng-model="data.groupSelect">
<option ng-repeat="group in data.groups" value="{{group.id}}">{{group.name}}</option>
</select>
</div>
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label>Group</label>
<select class="form-control" ng-model="data.groupSelect">
<option ng-repeat="group in data.groups" value="{{group.id}}">{{group.name}}</option>
</select>
</div>
</div>
</div>
JSFiddle

Bootstrap Form-Group Inside Form-Inline

I m a newbie in Bootstrap and I have encounter a problem as I wan to display a select box in block style and another form group beside.
Here is my code
<div class="form-inline>
<div class="form-group">
<label for="EventType">Event Type</label>
<select class="form-control">
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
</div>
</div>
Current Output is
My desire output is display both form group class div in inline method. But currently output show everything in inline while not div only. Is there any method to do so?
If possible write the HTML as follow-
<form class="form" role="form">
<div class="form-inline>
<div class="form-group">
<label for="EventType">Event Type</label>
<select class="form-control">
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
</div>
</form>
Again you can do this with the HTML you have provided. In this case, you have to write some custom CSS as follow-
.form-group{
display:block;
clear:both;
width:100%;
}

How to vertically align label and input in Bootstrap 3?

How to vertically align label and input in Bootstrap 3? I would like both the label and input on same line. I have played around with different classes and custom CSS but nothing seems to work.
The JSfiddle
<div class="form-group">
<div class="row">
<div class="col-xs-3">
<label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
</div>
<div class="col-xs-2">
<select name="class_type" id="class_type" class=" form-control input-lg" style="width:200px" autocomplete="off">
<option >Economy</option>
<option >Premium Economy</option>
<option >Club World</option>
<option >First Class</option>
</select>
</div>
</div>
</div>
The bootstrap 3 docs for horizontal forms let you use the .form-horizontal class to make your form labels and inputs vertically aligned. The structure for these forms is:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="input1" class="col-lg-2 control-label">Label1</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="input1" placeholder="Input1">
</div>
</div>
<div class="form-group">
<label for="input2" class="col-lg-2 control-label">Label2</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="input2" placeholder="Input2">
</div>
</div>
</form>
Therefore, your form should look like this:
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-xs-3">
<label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
</div>
<div class="col-xs-2">
<select id="class_type" class="form-control input-lg" autocomplete="off">
<option>Economy</option>
<option>Premium Economy</option>
<option>Club World</option>
<option>First Class</option>
</select>
</div>
</div>
</form>
When input-lg is used, margins mismatch unless you use form-group-lg in addition to form-group class.
Its example is in docs:
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>
None of these solutions worked for me. But I was able to get vertical centering by using <div class="form-row align-items-center"> for each form row, per the Bootstrap examples.
The problem is that your <label> is inside of an <h2> tag, and header tags have a margin set by the default stylesheet.
This works perfectly for me in Bootstrap 4.
<div class="form-row align-items-center">
<div class="col-md-2">
<label for="FirstName" style="margin-bottom:0rem !important;">First Name</label>
</div>
<div class="col-md-10">
<input type="text" id="FirstName" name="FirstName" class="form-control" val=""/>
/div>
</div>

Resources