I'm having this problem with Bootstrap inputs when a record is called for edition:
My code to define inputs:
<div class="card card-frame">
<div class="card-body">
<div class="container">
<div class="row fieldcontain ${hasErrors(bean: materialInstance, field: 'nombre', 'error')} required">
<div class="col">
<div class="input-group input-group-outline my-1">
<label class="form-label"><g:message code="material.nombre.label" default="Nombre" /></label>
<input class="form-control" name="nombre" required="" value="${materialInstance?.nombre}">
</div>
</div>
</div>
<hr>
<div class="row fieldcontain ${hasErrors(bean: materialInstance, field: 'cantidadMinima1', 'error')} required">
<div class="col">
<div class="input-group input-group-outline my-1">
<label class="form-label"><g:message code="material.cantidadMinima1.label" default="Nombre" /></label>
<input class="form-control" name="cantidadMinima1" required="" value="${materialInstance?.cantidadMinima1}">
</div>
</div>
</div>
...
...
</div>
</div>
I've googled and found there's a class called is-filled but when applied nothing changes. Am I missing something to have inputs like this?
I'm using this Bootstrap-based components: https://www.creative-tim.com/learning-lab/bootstrap/forms/material-dashboard
Related
Is there any way to place the labels closer together to the controls using horizontal forms with the below code?
I've been experimenting with "pull-left", "pull-right", "nopadding" on different controls, but just can't seem to move them together more closely.
<div class="page-header">
<h1>sample</h1>
</div>
<div class="container nopadding">
<div class="row">
<div class="form-group nopadding">
<label for="recordId" class="col-sm-2 control-label">Record Id</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="recordId" placeholder="Record Id">
</div>
</div>
<div class="form-group nopadding">
<label for="id" class="col-sm-2 control-label">Id</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="id" placeholder="Password">
</div>
</div>
<div class="form-group nopadding">
<label for="familyName" class="col-sm-2 control-label">Family Name</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="familyName" placeholder="Family Name" maxlength="30">
</div>
</div>
</div>
</div>
I think this is what you want.
FIDDLE
You can reduce the space between the labels and the inputs by adding a negative margin to the labels.
CSS:
label {
margin-right: -20px;
}
HTML:
<div class="page-header">
<h1>sample</h1>
</div>
<div class="container nopadding">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="recordId" class="col-sm-2 control-label">Record Id</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="recordId" placeholder="Record Id"></input>
</div>
</div>
<div class="form-group">
<label for="id" class="col-sm-2 control-label">Id</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="id" placeholder="Password"></input>
</div>
</div>
<div class="form-group">
<label for="familyName" class="col-sm-2 control-label">Family Name</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="familyName" placeholder="Family Name" maxlength="30"></input>
</div>
</div>
</form>
</div>
Also, not sure why you had a div with class row on there. Should be a form tag. I've adjusted that in the HTML for my answer and Fiddle.
The width of the label is determined by the col-sm-2 classes attached to them. You could modify this to be col-sm-1 instead, but this could cause problems on smaller devices.
Though bootstrap recommends doing the horizontal forms similarly to the way you do them (see here), I don't feel like this approach allows for much flexibility in spacing.
Personally, I'd change the form to behave like this. Because you're declaring the widths yourself in the CSS, you can customize spacing as you wish. This may not collapse down well, but if you wish you can write further CSS to handle low-resolutions.
I have a bootstrap 3 modal form that uses mixed form-horizontal and form-inline classes. I've fiddled around with the column widths but can't seem to get the form just right. There are two problems that I can't seem to get resolved:
The labels don't right align.
The State field is not the correct width.
My Html:
<div class="row">
<div class="col-md-7">
<h2>Agents</h2>
</div>
<div class="col-md-2">
<a id="addAgentButton" href="#" class="btn btn-primary">Add Agent</a>
</div>
</div>
<div id="agentModal" data-bind="with:detailAgent" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body col-md-12">
<form role="form" data-bind="submit: save">
<div class="form-group col-md-12">
<label class="col-md-2 control-label" for="txtAgentName">Name: </label>
<div class="col-md-6"><input class="form-control input-sm" id="txtAgentName" type="text" data-bind="value:Name" /></div>
</div>
<div class="form-group col-md-12">
<label class="col-md-2 control-label" for="txtAgentAddressLine1">Address 1: </label>
<div class="col-md-6">
<input class="form-control input-sm" id="txtAgentAddressLine1" type="text" data-bind="value:Address1" />
</div>
</div>
<div class="form-group col-md-12 form-inline">
<label class="col-md-2 control-label" for="txtAgentCity">City: </label>
<div class="col-md-2">
<input class="form-control input-sm" id="txtAgentCity" type="text" data-bind="value:City" />
</div>
<label class="col-md-2 control-label" for="txtAgentState">State: </label>
<div class="col-md-2">
<select class="form-control input-sm" id="txtAgentState" data-bind="options: $root.states, value: State, optionsCaption:'Choose a state...'"></select>
</div>
<label class="col-md-1 control-label" for="txtAgentZip">Zip: </label>
<div class="col-md-2">
<input type="tel" class="form-control input-sm" id="txtAgentZip" data-bind="value:Zip" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
My Javascript to show the modal:
$("#addAgentButton").on("click", function() {
$("#agentModal").modal("show");
});
My CSS:
.modal-dialog {
width: 800px;/* your width */
}
#addAgentButton {
margin-top: 15px;
}
And here's the jsfiddle.
Ok, I hope I understood you correct. Take a look at this fiddle
I had to change your inline-form html part a bit:
<div class="form-group col-md-12">
<label class="control-label col-md-2" for="txtAgentCity">City: </label>
<div class="col-md-2">
<input class="form-control input-sm" id="txtAgentCity" type="text" data-bind="value:City" />
</div>
<label class="col-md-2 control-label text-right" for="txtAgentState">State: </label>
<div class="col-md-2">
<select class="form-control input-sm" id="txtAgentState" data-bind="options: $root.states, value: State, optionsCaption:'Choose a state...'"></select>
</div>
<label class="col-md-2 control-lntZip text-right">Zip: </label>
<div class="col-md-2">
<input type="tel" class="form-control input-sm" id="txtAgentZip" data-bind="value:Zip" />
</div>
</div>
Just add the class .text-right to the label you want to be aligned right.
Here I have a bootstrap form v3 and I try to make this form to be inline so ha,ar,m2 to be inline... I have:
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Form Name</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="naziv">Naziv</label>
<div class="col-md-4">
<input id="naziv" name="naziv" type="text" placeholder="naziv parcele" class="form-control input-md" required="">
</div>
</div>
<!-- Appended Input-->
<div class="form-group">
<label class="col-md-4 control-label" for="ha">Povrsina</label>
<div class="col-md-2">
<div class="input-group">
<input id="ha" name="ha" class="form-control" placeholder="ha" type="text">
<span class="input-group-addon">ha</span>
</div>
</div>
</div>
<!-- Appended Input-->
<div class="form-group">
<label class="col-md-4 control-label" for="ar"></label>
<div class="col-md-2">
<div class="input-group">
<input id="ar" name="ar" class="form-control" placeholder="ar" type="text">
<span class="input-group-addon">ar</span>
</div>
</div>
</div>
<!-- Appended Input-->
<div class="form-group">
<label class="col-md-4 control-label" for="m2"></label>
<div class="col-md-2">
<div class="input-group">
<input id="m2" name="m2" class="form-control" placeholder="m2" type="text">
<span class="input-group-addon">m2</span>
</div>
</div>
</div>
</fieldset>
</form>
But how I can put #ha, #ar, #m2 elements inline so in the same row?
Any idea?
I try with form-inline but dont work.
Here is a fiddle
In order to keep the inputs in one row, you could put the columns containing .input-group in one form-group element, as follows:
<div class="form-group">
<label class="col-md-3 control-label" for="ha">Povrsina</label>
<div class="col-md-3">
<div class="input-group">
<input id="ha" name="ha" class="form-control" placeholder="ha" type="text">
<span class="input-group-addon">ha</span>
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<input id="ar" name="ar" class="form-control" placeholder="ar" type="text">
<span class="input-group-addon">ar</span>
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<input id="m2" name="m2" class="form-control" placeholder="m2" type="text">
<span class="input-group-addon">m2</span>
</div>
</div>
</div>
WORKING DEMO.
Note that you should change the class names of the columns within your own demo to prevent exceeding the 12-column grid.
Here I have a form but the form is not inlined:
<form class="form-horizontal">
<fieldset>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">Vrsta</label>
<div class="col-md-4">
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="1">nafta</option>
<option value="2">biodizel</option>
</select>
</div>
</div>
<!-- Appended Input-->
<div class="form-group">
<label class="col-md-4 control-label" for="appendedtext">Kolicina</label>
<div class="col-md-4">
<div class="input-group">
<input id="appendedtext" name="appendedtext" class="form-control" placeholder="uptrebljena kolicina" type="text">
<span class="input-group-addon">kg</span>
</div>
<p class="help-block">preostalo 22l</p>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4">
<button id="singlebutton" name="singlebutton" class="btn btn-success">Add</button>
</div>
</div>
</fieldset>
</form>
How can I inline this form?
I tried with:
<form class="form-inline">
but that doesn't work. What is the problem here?
I also tried to make three col-md-4 columns, but again I can't align them with the button.
I am creating a multi column form using Bootstrap 3.
Here is the first column.
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<form class="form-inline" role="form">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="RecordID" class="col-md-4 nopadding">Record ID</label><div class="col-md-8 nopadding pull-right"><input class="form-control" id="RecordID" type="text"></div>
</div>
<div class="form-group">
<label for="ID" class="col-md-5 nopadding">ID</label><div class="col-md-7 nopadding pull-right"><input class="form-control" id="ID" type="text"></div>
</div>
<div class="form-group nopadding">
<label for="FamilyName" class="col-md-5 nopadding">Family Name</label><div class="col-md-7 nopadding"><input class="form-control" id="FamilyName" type="text" maxlength="30"></div>
</div>
<div class="form-group">
<label for="GivenName" class="col-md-5 nopadding">Given Name</label><div class="col-md-7 nopadding"><input class="form-control" id="GivenName" type="text" maxlength="30"></div>
</div>
<div class="form-group">
<label for="MiddleName" class="col-md-5 nopadding">Middle Name</label><div class="col-md-7 nopadding"><input class="form-control" id="MiddleName" type="text" maxlength="30"></div>
</div>
</div>
//other column
</div>
</form>
</div>
</div>
</div>
However, I got the first column looks like this.
I wanted to align the text fields to the right so I added the "pull-right" class to the div that encapsulated the text field of ID. However, it doesn't work.
Here is the JSFiddle link, you will find the nopadding class in the link, it just remove the padding.
The result box of JSFiddle is not large enough by default, you will need to pull the result box to get the result I got.: JSFiddle link
add class="form-group col-md-12 nopadding" to div which was currently <div class="form-group">
I would suggest something like that:
<div class="container nopadding">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="recordId" class="col-sm-2 control-label">Record Id</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="recordId" placeholder="Record Id">
</div>
</div>
<div class="form-group">
<label for="id" class="col-sm-2 control-label">Id</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="id" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="familyName" class="col-sm-2 control-label">Family Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="familyName" placeholder="Family Name" maxlength="30">
</div>
</div>
<div class="form-group">
<label for="givenName" class="col-sm-2 control-label">Given Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="givenName" placeholder="Given Name" maxlength="30">
</div>
</div>
<div class="form-group">
<label for="middleName" class="col-sm-2 control-label">Middle Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="middleName" placeholder="Middle Name" maxlength="30">
</div>
</div>
</form>
http://jsfiddle.net/y838v/3/
Based on http://getbootstrap.com/css/#forms-horizontal