Select List with the width of the form in Bootstrap - css

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

Related

bootstrap 5 inline form alignment issue

I am trying to have a small inline form on a page that has a couple of fields for search filters and two buttons for submitting and reset. If I am above the form fields the buttons at the end get out of alignment with the form fields. How would I fix this so it is all inline below the labels?
<div class="row g-3 align-text-bottom">
<form class="row row-cols-md-auto g-3 align-items-center" name="frmRequestSearch" id="frmRequestSearch" method="post" action="#cgi.script_name#">
<div class="col-sm-7">
<label class="form-label">ID</label>
<input type="text" name="cardholder_id" id="id" class="form-control" value="#form.cardholder_id#" placeholder="ID">
</div>
<div class="col-sm">
<label class="form-label">CG</label>
<select class="form-select" name="cardholder_group" value="#cg#" id="cg">
<option></option>
<cfloop query="qryAllGroups">
<option value="#displayname#">#displayname#</option>
</cfloop>
</select>
</div>
<div class="col-sm">
<button type="submit" name="submit" class="btn btn-secondary">Show Results</button>
</div>
<div class="col-sm">
Reset Parameters
</div>
</form>
</div>
Simply use align-items-end...
<form class="row row-cols-md-auto g-3 align-items-end" name="frmRequestSearch" id="frmRequestSearch" method="post" action="#cgi.script_name#">
<div class="col-sm-7">
<label class="form-label">ID</label>
<input type="text" name="cardholder_id" id="id" class="form-control" value="#form.cardholder_id#" placeholder="ID">
</div>
<div class="col-sm">
<label class="form-label">CG</label>
<select class="form-select" name="cardholder_group" value="#cg#" id="cg">
<option></option>
<cfloop query="qryAllGroups">
<option value="#displayname#">#displayname#</option>
</cfloop>
</select>
</div>
<div class="col-sm">
<button type="submit" name="submit" class="btn btn-secondary">Show Results</button>
</div>
<div class="col-sm">
Reset Parameters
</div>
</form>
Demo
Also, you don't want to have a row directly inside another row. Only columns col* should be placed directly in a row.

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.

No vertical space between Bootstrap form groups

There are a few similar questions but none that really provide a solution for my issue (as far as I can see)
Here is my code:
<div class="form-group">
<div class="col-xs-3">
<label for="quantity">Quantity:</label>
<input type="quantity" class="form-control" min="1" max="100" ng-model="formData.quantity" required />
</div>
<div class="col-xs-9">
<label for="type">Type:</label>
<select class="form-control" name="type" ng-model="formData.type" required>
<option value="240" selected>240</option>
<option value="120">120</option>
</select>
<!--<input type="text" class="form-control" name="type" ng-model="formData.type"> -->
</div>
</div>
<div class="form-group">
<label for="type">Type 2:</label>
<select class="form-control" name="typ2 ng-model="formData.typ2e" required>
<option value="240" selected>240</option>
<option value="120">120</option>
</select>
<!--<input type="text" class="form-control" name="type" ng-model="formData.type"> -->
</div>
<div class="form-group row">
<div class="col-xs-6 col-xs-offset-3">
<a ui-sref="form.interests" class="btn btn-block btn-info">
Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</div>
</div>
Between the form groups there is no vertical spacing, it's all joined together one on top of the other. Not sure what to do. Any help would be appreciated!
You can wrap all the code with the form-horizontal
<div class="form-horizontal">your code</div>
Or add to your css file next code:
.form-group::before,
.form-group::after {
content: " ";
display: table;
}

Bootstrap "form-horizontal" and label

I have troubles with creating a "form-horizontal" with bootstrap.
http://jsfiddle.net/frauger/jo0b6yod/
As you can see in the jsfiddle the label "date of birth" is not correctly aligned above the "date of birth select"
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-10">
<input type="text" class="form-control col-sm-10" name="name" placeholder="name"/>
</div>
</div>
<div class="form-group">
<label for="birthday" class="col-xs-3 col-sm-2 control-label">Birthday</label>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
Thanks
Wrap all of your existing select divs in a new container div that has the form-group class.
<div class="form-group">
<div class="col-xs-4">
<select type="text" class="form-control" id="field-day" required>
<option>DD</option>
</select>
</div>
<div class="col-xs-4">
<select type="text" class="form-control" id="field-month" required>
<option>MM</option>
</select>
</div>
<div class="col-xs-4">
<select type="text" class="form-control" id="field-year" required>
<option>YYY</option>
</select>
</div>
</div>
working fiddle:
http://jsfiddle.net/jo0b6yod/2/
Include the label within div tag, that should make the label within a block level, and takes of 100% of its parent.
ex:
<div class="form-group">
<div><label for="birthday" class="col-xs-3 col-sm-2 control-label">Birthday</label></div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>

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