I know this has been asked before but I the answers don't seem to work for me.
I am looking to decrease the size of my textbox and line it up beside a select and some text.
Here is my code.
<div class="controls">
<div class="btn-group">
<label class="btn btn-default">
<input type="checkbox" name="blah" value="true">
Title
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>5</option>
<option>8</option>
</select>
<input class="form-control col-xs-1" placeholder="x" type="text" required="required">this should be beside the textbox. I also want the textbox to be small. One character small.
</label>
</div>
</div>
Also in bootply.
http://www.bootply.com/NePcbYQqfm
Thank you in advance!
Try this:
<div class="controls">
<div class="btn-group col-xs-4">
<label class="btn btn-default">
<input name="blah" value="true" type="checkbox">
Title
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>5</option>
<option>8</option>
</select>
</label>
<input class="form-control input-sm" placeholder="x" required="required" type="text">this should be beside the textbox. I also want the textbox to be small. One character small.
</div>
</div>
It will work.
Related
I used this Bootstrap 3 code to change radios into buttons:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="sim_type" value="option 1" checked>Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="sim_type" value="option 2">Option 2
</label>
</div>
It works well in the jsfiddle but in my website the color of buttons are not changed when clicked. It always is like this:
But the submitted value is correct.
I added this code to add .active class manually:
// Change the color of selected radio button
$('label.btn').click(function() {
$(this).parent('.btn-group').children('label.btn').addClass('active');
$(this).removeClass('active');
});
UPDATE:
This code is not needed. You just need to add class 'active' to one of labels initially.
This code works well without any js:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="sim_type" value="option 1" checked>Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="sim_type" value="option 2">Option 2
</label>
</div>
I am experimenting with the excellent Bootstrap DateTimePicker plugin but appear to have hit the buffers right at the start. The page control appears correctly but the calendar button is entirely unresponsive - no picker actually pops up. I have created this fiddle to illustrate the problem. Examining the console output for the fiddle does not reveal anything obviously wrong.
I noticed that the sample code uses jQuery 1.8.3 so I tried dropping back to that but to no avail. I suspect that I am getting something wrong here but I cannot quite figure out what that might be. I'd be most grateful for any help.
The test markup I am using is quite straightforward - and copied directly from the Datetimepicker example docs
<div class="form-group">
<label for="dtp_singleshot" class="col-md-2 control-label">Choose</label>
<div class="input-group date form_datetime col-md-5" data-link-
field="dtp_singleshot">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<input type="hidden" id="dtp_singleshot" value="" /><br/>
</div>
First of all, you have to remove readonly attribute from your input. You don't need second hidden input. Then you have to assign id of dtp_singleshot to your input-group or input.
<div class="form-group">
<label for="dtp_singleshot" class="col-md-2 control-label" id="dtp_singleshot">Choose</label>
<div class="input-group date form_datetime col-md-5" data-link-
field="dtp_singleshot">
<input class="form-control" size="16" type="text" value="">
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
</div>
JSFIDDLE
I am creating a bootstrap btn-group that I want to give the user the ability to select one or no options from. Everything on the data end is working great except for the fact that I can not remove the active class from the button when the user turns it off.
<div class="btn-group" id="localRasterBG" data-toggle = "buttons">
<label class="btn btn-default localBaseMaps" id="btnLand Cover" data-layerName="Land Cover" onclick="rasterButtonClick(event)" >
<input type="radio" name="options" id="btnLandCover" autocomplete="off"> Land Cover
</label>
<label class="btn btn-default localBaseMaps" data-layerName="Elevation" onclick="rasterButtonClick(event)">
<input type="radio" name="options" id="btnElevation" autocomplete="off"> Elevation
</label>
<label class="btn btn-default localBaseMaps active" id="btnPopulation" data-layerName="Population" onclick="rasterButtonClick(event)">
<input type="radio" name="options" id="btnLandScan" autocomplete="off"> Population
</label>
</div>
However, I am unable to remove the "active' class with javascript:
function rasterButtonClick(e){
e.target.removeClass("active");
}
Any idea what I could be doing wrong?
Thanks, Tyler
removeClass is a jQuery function, you need to change it to:
$(e.target).removeClass("active");
Working on this form - form A trying to replicate the same behaviour as you can see in this one - form B. In the form B, if you click in the <label> of each option, it just works, while in form B, you have to click each one of the <input> elements if you want to make a different choice. Why?
Both samples have not CSS included, no CSS libraries loaded, it's just HTML
Form A
<form accept-charset="UTF-8" class="edit_order" id="edit_order_260" method="post">
<div style="display:none">
<input name="utf8" type="hidden" value="✓">
<input name="_method" type="hidden" value="put">
<input name="authenticity_token" type="hidden" value="N+XdGRhPcpB+999PYEU5Bs5bvdBYkLd4Ko+cNdhoppA=">
</div>
<h3 class="panel-title">
<label for="order_Best price"><input checked="checked" id="order_delivery_option_best_price" name="order[delivery_option]" onclick="enable_submit();" type="radio" value="best_price">
Best price</label>
</h3>
<h3 class="panel-title">
<label for="order_Best delivery date"><input id="order_delivery_option_best_delivery_date" name="order[delivery_option]" onclick="enable_submit();" type="radio" value="best_delivery_date">
Best delivery date</label>
</h3>
</form>
Form B
<form role="form">
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
</form>
Just remove for attribute from the labels. For example:
<label><input checked="checked" id="order_delivery_option_best_price" name="order[delivery_option]" onclick="enable_submit();" type="radio" value="best_price">Best price</label>
Or make for value match the value of the id attribute of corresponding input tag. Like this:
<label for="order_delivery_option_best_price"><input checked="checked" id="order_delivery_option_best_price" name="order[delivery_option]" onclick="enable_submit();" type="radio" value="best_price">Best price</label>
In this case you don't have to nest the input inside the label and it will still work:)
I have an array of models, all of them being instances of one class. I need to create a form which contains subforms corresponding to the models from the array.
Have to use CForm, because i've made a nice small extension of it, which can render subforms in CJuiTabs. In the code used at the moment POST-parameter names are wrong, because they get prefixed by the name of the class of a model from the array.
Below you can see a snippet of HTML-code generated. See those YPageInfo[...] named inputs? That's the problem - only one set of inputs with this prefix gets received by the server.
<div style="visibility:hidden"><input type="hidden" value="1" name="yform_20bd4d2c" id="yform_20bd4d2c" /></div>
<div class="row field_name">
<label for="YPageRevision_name">Name</label>
<input name="YPageRevision[name]" id="YPageRevision_name" type="text" maxlength="45" />
</div>
<div class="row field_parent_id">
<label for="YPageRevision_parent_id">Parent Id</label>
<input id="YPageRevision_parent_id_hidden" name="YPageRevision[parent_id]" type="hidden" /><input id="YPageRevision_parent_id" type="text" value="" name="autocomplete-field" />
</div>
<div id="yw1">
<ul>
<li>en</li>
<li>ru</li>
</ul>
<div id="enSubFormTab"><div class="row field_title">
<label for="YPageInfo_title" class="required">Title <span class="required">*</span></label>
<input name="YPageInfo[title]" id="YPageInfo_title" type="text" maxlength="256" />
</div>
<div class="row field_content">
<label for="YPageInfo_content" class="required">Content <span class="required">*</span></label>
<textarea name="YPageInfo[content]" id="YPageInfo_content"></textarea>
</div>
</div>
<div id="ruSubFormTab"><div class="row field_title">
<label for="YPageInfo_title" class="required">Title <span class="required">*</span></label>
<input name="YPageInfo[title]" id="YPageInfo_title" type="text" maxlength="256" />
</div>
<div class="row field_content">
<label for="YPageInfo_content" class="required">Content <span class="required">*</span></label>
<textarea name="YPageInfo[content]" id="YPageInfo_content"></textarea>
</div>
</div>
</div>
<div class="row buttons"><input name="submit" type="submit" value="Create" />
</div>
I found one way to do what I needed.
In the elements property of the sub-form there are some inputs declared. Each standard input element declared there is an instance of CFormInputElement, so it has the attributes property. Here you can set any HTML attribute, which will be rendered in the resulting input tag. I put my custom name attribute here, and change it in a loop, where i create sub-forms configuration items for the main CForm.
Maybe there is a better way?