I'm using Twitter Bootstrap which has been mostly painless. However, I just ran into the following problem when using inline checkboxes in a modal popup:
The first row of the checkboxes are not aligned correctly.
Note that if I remove the inline property, this continues:
The offending code is as follows:
<div class="modal-body">
<form class="form-horizontal">
<div class="row-fluid">
<div class="span4">
<h4 style="display:inline !important;">Client: </h4>
</div>
<div class="span4">
<h4 style="display:inline !important;">Start Date: </h4>
</div>
<div class="span4">
<h4 style="display:inline !important;">End Date: </h4>
</div>
</div>
<br />
<div class="row-fluid">
<div class="span12">
<h4 style="display:inline !important;">Industry: </h4> TBA
</div>
</div>
<br />
<div class="row-fluid">
<h4>Role: </h4>
<label class="checkbox inline">
<input type="checkbox" value="2"> .NET Developer
</label>
<label class="checkbox inline">
<input type="checkbox" value="1"> Business Analyst
</label>
<label class="checkbox inline">
<input type="checkbox" value="14"> Change Manager
</label>
*SNIP*
</div>
<br />
<div class="row-fluid">
<div class="span12">
<h4>Scope of Work (max. 150 words): </h4>
<textarea class="bdBox" rows="3"></textarea>
</div>
</div>
<br />
<div class="row-fluid">
<div class="span12">
<h4>Deliverables (max. 150 words): </h4>
<textarea class="bdBox" rows="3"></textarea>
</div>
</div>
</form>
</div>
Shortened for brevity.
Does anyone have any ideas on this, or should I take it to the Bootstrap issue list?
Figured this out.
There are two lines in the bootstrap.css file:
.radio.inline,.checkbox.inline{display:inline-block;padding-top:5px;margin-bottom:0;vertical-align:middle;}
.radio.inline+.radio.inline,.checkbox.inline+.checkbox.inline{margin-left:10px;}
The bottom line only applies the margin-left to checkboxes other than the first, meaning the first was not pushed across messing up the line.
If I move margin-left:10px into the first checkbox selector everything lines up. Mac's CSS was perfect for lining my checkboxes up too:
Here is something that I have tried and I suppose that is what you wanted
http://jsfiddle.net/xgKP4/
Related
I am trying to accomplish wherever in div I make a click it will mark input radio as selected item. In my situation it works only if I click on radio, on other places in same row it does not work
<div class="row" style="padding-top:30px; cursor:pointer;">
<div class="col-lg-1 col-xs-1">
<div class="box" style="margin-top:-15px">
<input type="radio" name="order" class="form-radio" value="1" onclick="selectValue()" id="checkbox" />
</div>
</div>
<div class="col-lg-6 col-xs-5">
<div class="box">
Mercedes CLS250
</div>
</div>
<div class="col-lg-5 col-xs-5">
<div class="box pull-right">
<p style="text-align:right;">2000KB</p>
</div>
</div>
</div>
<div class="row" style="padding-top:30px; cursor:pointer;">
<div class="col-lg-1 col-xs-1">
<div class="box" style="margin-top:-15px">
<input type="radio" name="order" class="form-radio" value="2" onclick="selectValue()" id="checkbox" />
</div>
</div>
<div class="col-lg-6 col-xs-5">
<div class="box">
Mercedes CLS350
</div>
</div>
<div class="col-lg-5 col-xs-5">
<div class="box pull-right">
<p style="text-align:right;">300KB</p>
</div>
</div>
</div>
I have used css cursor pointer but when I make a click it does not select chosen row.
If I understand your question correctly, you want to have a text block which when is clicked on, it triggers a click for the input radio button.
To do that, all you need is a label with the attribute of for="input_id_goes_here". Here's an example:
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female">
With that code, anytime you click the label, then the input will get selected. If you want to know more about the for attribute, take a look at this question.
FYI, the onclick attribute is for JavaScript.
Let me know if this helps and if you have anymore questions.
Update
Another way to change a radio input when a block of text is selected, is to wrap your input with a label, like this:
<label>Female <input type="radio" name="gender" value="female"></label>
So for your code, all you have to do is change <div class="row"> to <label class="row">.
Thanks to #KoshVery for pointing it out in the comments below!
you have id = "checkbox" in both inputs. ids need to be unique
<input type="radio" name="order" class="form-radio" value="2"
onclick="selectValue()" id="checkbox" />
if you want to fire the whole div when clicked, add the function to the whole row div
I have a bootstrap form like the one below.
I want to make the width of that column to be 9 so in the left 3 I can add a button to the top-right of the textarea.
The form HTML is:
<div class="form-group">
<label>Compose Message</label>
<textarea class="form-control" rows="5" value="" />
</div>
I have tried using <div class="col-md-9"> and <div class="col-md-3"> but no success.
Any clue?
This should do the trick:
<div class="row">
<div class="col-md-9">
<div class="form-group">
<label>Compose Message</label>
<textarea class="form-control" rows="5" value="" />
</div>
</div>
<div class="col-md-3">
<button class="btn">Button</button>
</div>
</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 am using twitter bootstrap and trying to create one row in which two text boxes are next to each other. Here is my code:
<div class="container">
<div class="span12">
<div class="row">
<label for="question_content">Content: </label>
<textarea class="span3" id="question_content" name="question[content]" style="resize: none;">
</textarea>
<label for="question_conversation">Conversation: </label>
<textarea class="span3" id="question_conversation" name="question[conversation]" style="resize: none;">
</textarea>
</div>
</div>
</div>
However, for some reason the form elements are stacked one on top of the other. How do I fix this?
On Bootstrap 2 (and judging by the code, that's what you're using) one quick fix could be to set display:inline on label in your custom CSS file like this:
label {
display:inline
}
Here is a demo: http://www.bootply.com/132699
EDITED: The real Bootstrap-way however is to use .form-inline in your <form> element instead:
<form class="form-inline">
<div class="container">
<div class="span12">
<div class="row">
<label for="question_content">Content: </label>
<textarea class="span3" id="question_content" name="question[content]" style="resize: none;">
</textarea>
<label for="question_conversation">Conversation: </label>
<textarea class="span3" id="question_conversation" name="question[conversation]" style="resize: none;">
</textarea>
</div>
</div>
</div>
</form>
See the documentation: http://getbootstrap.com/css/#forms-inline
And here is the updated demo: http://www.bootply.com/132701
For some reason, when I apply spans the spans do not align themselves into a proper grid. It doesn't seem to matter what type of element I apply the span to, in this case it is inputs. I obviously want them to align themselves, what am I doing wrong?
Fiddle here: http://jsfiddle.net/fKQsj/
<div class="row-fluid">
<div class="span12">
<input type="text" class="span4" placeholder="First" />
<input type="text" class="span4" placeholder="Middle" />
<input type="text" class="span4" placeholder="Last" />
</div>
</div>
<div class="row-fluid">
<div class="span12">
<input type="text" class="span4" placeholder="City" />
<input type="text" class="span2" placeholder="State" />
<input type="text" class="span2" placeholder="Zip5" />
<input type="text" class="span4" placeholder="Store" />
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="span4 offset8">
<button class="btn btn-success pull-right">Search</button>
</div>
</div>
</div>
Taken from the manual
For multiple grid inputs per line, use the .controls-row modifier class for proper spacing.
It floats the inputs to collapse white-space, sets the proper margins, and clears the float.