I have some "col-md-12" divs on forms that appear to "cover" preceding inputs such that they are not clickable.
I have created a bootply with Bootstrap 3.0.0 to illustrate the issue. unclickable inputs
If I make the same bootply with bootstrap 3.0.3 then the input fields are now accessible clickable inputs
What I want to know is whether this is a bootstrap bug that has been fixed or whether my layout is breahing some rule or other?
you need to put your cols into a div with the row class
<form>
<div class="row"> // HERE
<div class="col-md-6">
<label class="control-label col-md-4">Home Phone:</label>
<div class="col-md-8">
<input id="contact_detail_home_phone" name="contact_detail[home_phone]" size="30" type="text" value="123 5668" class="form-control">
</div>
</div>
<div class="col-md-6">
<label class="control-label col-md-4">Work Phone:</label>
<div class="col-md-8">
<input id="contact_detail_work_phone" name="contact_detail[work_phone]" size="30" type="text" value="582 5135" class="form-control">
</div>
</div>
</div>
<div class="row"> // AND HERE
<div class="col-md-12">
<label class="control-label">Notes:</label>
<textarea cols="40" id="contact_detail_notes" name="contact_detail[notes]" rows="4" class="form-control"></textarea>
</div>
</div>
</form>
If you use medium size columns col-md- you can only have total 12 column units per each <div class=row>.
So, don't put more than total 12 units of col-md instead one row.
I assume this is limitation of doing layouts with columsn, floating divs and web page rendering legacy.
Related
this is my current HTML for display a form field with bulma.
<body>
<div id="root">
<nav class="navbar is-primary is-navbar-sticky">
</nav>
<section class="section">
<div class="container">
<form>
<div class="field">
<label class="label is-medium">
"Title"
<div class="control">
<input type="text" class="input is-medium is-danger" placeholder="Put the title of item here" required="" value="">
<p class="help is-danger">title's length should be equal or greater than 10. Current: 0</p>
</div>
</label>
</div>
</form>
</div>
</section>
</div>
</body>
So far so good.
A problem is that the input will take full width on each breakpoint, it's too much for a desktop resolution.
How to make the input only takes full width for mobile breakpoint while it could take a certain width after the mobile breakpoint.
Is there a bulma way to do this? Rather than write my own css rule?
Your using bulma framework So assign grid system of bulma framework you can use class column in your input element and you can use how much column u you want to set width of input field
<div class="control">
<input type="text" class="input column-12 is-medium is-danger" placeholder="Put the title of item here" required="" value="">
<p class="help is-danger">title's length should be equal or greater than 10. Current: 0</p>
</div>
I am fairly new to Bootstrap and I'm trying to make a simple form, all elements of which are in a single line on the screen. My html code for the form looks something like this:
<form class="form-horizontal">
<fieldset>
<div class="form-container">
<div class="form-group">
<label>Search by:</label>
<input class="form-control" type="text">
</div>
<div class="form-group">
<label>Something:</label>
<input class="form-control" type="text">
</div>
</div>
</fieldset>
</form>
By default, the labels for my input fields appear about the input fields. I want them to be on the left side of the input fields. I've googled and checked on here how to implement this, but none of the solutions I found have worked (I tried adding classes to my form and changing their CSS, and tried using bootstrap's form-inline functionality).
Does anyone know how I could make the form look how I want it to look?
You will want to make two modifications to each form group in order to utilize the bootstrap grid system.
not sure which version of BS you are using but for grid it is the same concept: https://v4-alpha.getbootstrap.com/layout/grid/
You will want to use bootstrap grid system to define that the label and input on are the same line. Keep in mind that there are 12 columns in 1 row so items you want to be on the same line must add up to 12.
Add the following classes to your label: "col-lg-2 col-md-2 col-sm-2 control-label"
Wrap your input in a div and add the following classes: "col-lg-10 col-md-10 col-sm-10"
You will notice that between these two elements, the columns add up to 12 so in the bootstrap grid system, they will be on the same line.
(I also wrapped this in a container just for a more tidy display on this post)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<form class="form-horizontal">
<fieldset>
<div class="form-container">
<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Search by:</label>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<input class="form-control" type="text">
</div>
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Something:</label>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<input class="form-control" type="text">
</div>
</div>
</div>
</fieldset>
</form>
</div>
I can't make out the convoluted logic behind where <label> elements are actually placed. I want a form with two rows. I want a label for each row, and then an input box after that. I would like the responsive behavior that when the viewport gets narrow, the label appears just above the input. When wide the label is left and the input right.
Works OK most of the time, but sometimes the <label> behaves so strange and I struggle trying to just get a simple two row form to work. Here is the sample:
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="well">
<div class="form-group">
<label class="col-md-2 control-label">
Reminder
</label>
<div class="col-md-5 container">
<input type="text" class="form-control"/>
</div>
<div class="col-md-5 container">
Minutes before meeting
</div>
</div>
<!-- Form Control TYPE Begin -->
<div class="form-group">
<label class="col-md-2 control-label">Type</label>
<div class="col-md-10">
<div class="radio radio-primary">
<label>
<input type="radio" value="1"
class="form-control">
Circle Meeting
</label>
<label>
<input type="radio" value="2"
class="form-control">
Operational Meeting
</label>
</div>
</div>
</div>
</div>
<body>
I just spent 15 minutes making this selfstanding, so you should be able to put this in a file and load it directly into a browser.
The result is that instead of putting the label on the left, it is put in the row above (in that DIV) instead of in the DIV that the label is declared in. I have tried a number of manipulations, but the label seems to want to "jump" out of the DIV it is defined in, and into the DIV before it, and that messes up the layout of both DIV tags which are meant to be rows in a form.
See that the "Type" label does NOT appear on the left edge, but rather floating in the previous DIV and with the last element within that DIV.
Also the layout of the radio buttons and the labels on them are very inconvenient.
I would very much appreciate if someone can explain what is going on, and how to avoid this in the future. (Not just a solution to this case, but an explanation that will allow me to avoid future cases as well.)
This should fix it; Set the form and fields tags around your form; some class changes
<div class="well">
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="col-md-2 control-label" for="textinput">
Reminder
</label>
<div class="col-md-5">
<input type="text" name="textinput" class="form-control"/>
</div>
<div class="col-md-5">
Minutes before meeting
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Type</label>
<div class="col-md-10">
<label class="radio-inline" for="radios-1">
<input type="radio" name="radios" id="radios-1" value="1">
Circle Meeting
</label>
<label class="radio-inline" for="radios-2">
<input type="radio" name="radios" id="radios-2" value="2">
Operational Meeting
</label>
</div>
</div>
</fieldset>
</form>
</div>
I have a row that is split down into various columns and sub-columns. In the proper example there are several more inputs but I've removed them for clarity as they're not needed for this example.
<form id="inputForm" class="form-inline" role="form">
<div class="row">
<div class="col-xs-4">
<label class="control-label">Primary Packaging:</label>
</div>
<div class="col-xs-6">
<label for="pack1Height" class="control-label">Height:</label>
<div class="input-group">
<input type="text" id="pack1Height" class="form-control small text-right" />
<span class="input-group-addon">mm</span>
</div>
</div>
<div class="col-xs-2">
<label class="control-label">Vol:</label>
<label class="control-label">999</label>
<label class="control-label">cm<sup>3</sup></label>
</div>
</div>
</form>
If you look at http://jsfiddle.net/53vu25ad/ you can see the issue as "Primary Packaging" and "Vol: 999 cm3" are not vertically aligned within the row - they're top aligned. Is there something I'm missing here?
(ps: On my form, the "height" label and the input element are on the same line, I have no idea why they're not in this jsfiddle, but it's not relevant to the question - I would still expect to see the two labels either side aligned vertically).
Using bleeding-edge not-yet-released Bootstrap v3.2.1: JS Fiddle
The trick is to use a dummy .form-control-static:
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">Primary Packaging:</label>
<p class="form-control-static"> </p>
</div>
</div>
Well without using experimental bootstrap, the way I got around this was adding a simple custom class that matched the form-control element height of 34px.
By setting the row line-height to the same, it automatically valigns content.
.fixedRow {
line-height: 34px;
}
<div class="row fixedRow">
<div class="col-xs-4">
<label class="control-label">Primary Packaging:</label>
</div>
...
Updated jsfiddle: http://jsfiddle.net/53vu25ad/2/
Please find the updated jsfiddle
You may need to use the .form-group class for .form-inline
<form id="inputForm" class="form-inline" role="form">
<div class="form-group">
<label class="control-label">Primary Packaging:</label>
</div>
<div class="form-group">
<label for="pack1Height" class="control-label">Height:</label>
<div class="input-group">
<input type="text" id="pack1Height" class="form-control small text-right" />
<span class="input-group-addon fw1">mm</span>
</div>
</div>
<div class="form-group">
<label class="control-label">Vol:</label>
<label class="control-label">999</label>
<label class="control-label">cm<sup>3</sup></label>
</div>
</div>
</div>
</form>
I'm trying to put an input field's label next to it instead of above it using bootstrap. Wrapping this in form-horizontal works, but it's not actually in a form (just an ajax call that reads the value). Is there a way to simply move the label to the left side of the input?
<div class="controls-row">
<div class="control-group">
<label class="control-label" for="my-number">ALabel</label>
<div class="controls">
<input id="my-number" type="number"/>
</div>
</div>
</div>
The fiddle is at http://jsfiddle.net/7VmR9/
Yes, you can do this by bootstrap column structure.
<div class="form-group">
<label for="name" class="col-lg-4">Name:</label>
<div class="col-lg-8">
<input type="text" class="form-control" name="name" id="name">
</div>
</div>
Here is a Bootply Demo
The div is a block element, that means it will take as much width as it can and the input element is in it.
If you want the label to be next to the input element: either put the label in the div or make the div an inline-block element.
<form class="form-inline">
<div class="form-group">
<label for="my-number">ALabel</label>
<input type="number" id="my-number" class="form-control">
</div>
</form>
Source: https://getbootstrap.com/docs/3.3/css/#forms-inline
You can take help directly from website they provided, well documented.
Here is a link to a Fiddle with Bootstrap css.
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email"/>
</div>
</div>