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
Related
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 am looking for a way to append a text field inline with a radio button, I am currently using Boostrap. If someone know a specific class for this purpose, that will be appreciated.
My current approach is always mis-aligned, the textbox goes right under the radio button which is something i dont want.
JSFiddle here. http://jsfiddle.net/fs85eedu/
<div class="radio">
<label class="control-label">
<input type="radio" name="radioname" id="radioid" class="radio_class">
<label>text here</label>
<div class='row'>
<div class="col-md-5">
<input type="text" id="q4_c_1_2" name="q4_c_text" placeholder="Enter role/titile" class="form-control">
</div>
</div>
</label>
</div>
Maybe something like this. Just put both controls in same row.
<div class="radio">
<div class='row'>
<div class="col-md-2">
<label class="control-label"></label>
<input type="radio" name="radioname" id="radioid" class="radio_class">
<label>text here</label>
</div>
<div class="col-md-3">
<input type="text" id="q4_c_1_2" name="q4_c_text" placeholder="Enter role/titile" class="form-control">
</div>
</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>
Does anyone have any ideas of how to create a two panel modal. So for example one side would be a login form or something and the other side would be a list of what users get. Or one side would be a physical contact information div and the other side would be an email contact form. I tried to do two divs under the modal div tag and have one pull-left the other pull-right with each span5 or span6 but it didn't work. I ask because I have this issue. Also can anyone tell me why my contact form has so much space between the label and the input box? Go to scoopclassifieds.com (not trying to plug my site, can't post pics yet) and click contact us. I have placed the html mark up blow
<div class="modal hide fade" id="contactForm" aria-hidden="true">
<div class="modal-body">
<form action="" method="post" class="form-horizontal">
<div class="control-group">
<label class="control-label">Email:</label>
<div class="controls">
<input type="text" name="email" id="email" class="input" />
</div>
</div>
<div class="control-group">
<label class="control-label">Subject:</label>
<div class="controls">
<input type="text" name="subject" id="subject" class="input" />
</div>
</div>
<div class="control-group">
<label class="control-label">Message:</label><br/><br/>
<div class="controls">
<textarea rows="5" class="input span4" name="message" id="message"></textarea>
</div>
</div>
<div class="control-group"><div class="controls"><input type="submit" name="contactUs" id="contactUs" class="btn" value="Contact Us" /></div></div>
</form>
</div>
</div>
Sorry if the code is so horribly formatted. I used cpanel text editor to develop it. I know its a bad idea but I had to do it as fast as possible to provide a live example.
Try putting a row-fluid inside the modal-body, and then 2 span6 inside that..
<div class="modal-body">
<div class="row-fluid">
<form class="span6">
</form>
<div class="span6">
</div>
</div>
</div>
You may also want to increase the default width of the modal..
.modal {
width:45%;
left:45%;
}
Demo on Bootply: http://bootply.com/69517
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/