Here is my radio button code in struts tag, the space between radio button and radio button text box is congested how to give space between them
<div class="form-group">
<label class="col-lg-3 control-label">Gender</label>
<div class="col-lg-5">
<div class="btn-group" data-toggle="buttons">
<s:radio name="studentDTO.s_gender" id="gender" list="{'Male','Female'}" />
</div>
</div>
</div>
Many HTML elements have a default margin setting. You can override this and set it to 0. In your case, you want to reset margin-right on the radio button:
<input type="radio" name="beds" value="1" style="margin-right: 0" />1+
You probably want to add it to your stylesheet so that it applies to all radio buttons:
input[type="radio"] {
margin-right: 0;
}
I know this is an old question but to do this in Struts 2 use the cssStyle attribute if you only want it to apply to this group of radio buttons.
<s:radio name="studentDTO.s_gender" id="gender" list="{'Male','Female'}" cssStyle="margin-right:20px" />
Or you can use the cssClass attribute.
<s:radio name="studentDTO.s_gender" id="gender" list="{'Male','Female'}" cssClass="radioMarginRight" />
with
.radioMarginRight{
margin-right: 20px !important;
}
Both of these apply the CSS to the radio button and the label. To keep the margin from applying to the label with the cssClass attribute you could define the following CSS to set the label margin to 0.
label.radioMarginRight{
margin-right: 0px !important;
}
I dont know struts, but looking at this have you tried:
list="{' Male ',' Female '}"
Just putting some spaces between each of the '.
Its what you do in HTML + CSS so might work there
Related
I want to disable the label associated with checkbox. The code snippets are below:
code:
<label for="label1" class="form-checkbox-left"><input type="checkbox" name="labelname" id="label1" value="0" style="min-width: 20px;" disabled>Name 1</label>
css :
.form-checkbox-left input[type=checkbox]:disabled {
color:#ccc;
}
Somehow it is not working.
Please help
You can opt to use the element+element Selector. You need to place the input before the label, however
input[type=checkbox]:disabled+label {
color: #ccc;
}
<input type="checkbox" name="labelname" id="label1" value="0" style="min-width: 20px;" disabled>
<label for="label1" class="form-checkbox-left">Name 1</label>
you can try to do with jquery using
if ($('label1'.hasAttribute('disabled')){
$('[for="label1"]').attr('disabled', 'disabled');
}
at [for="label1"] you can put the id of lable ("if you want to")
I have just double-checked with Firefox, and adding any sort of a style definition to a checkbox doesn't change any aspect of its appearance.
It seems that you are out of luck here and would have to take a different approach by hiding the checkbox itself (not with display: none;, but with visibility: hidden; instead) and then add auxiliary CSS to actually customize its appearance.
An example on how to do this can be found on http://cssdeck.com/labs/css-checkbox-styles
Maybe that helps you derive a method that suits you best.
EDIT
If you are attempting to style the parent label of the checkbox, you are out of luck, because parent element selectors are not implemented in CSS so far, although a proposal has been made (see https://shauninman.com/archive/2008/05/05/css_qualified_selectors for details).
EDIT 2
You could try this by moving the label definition behind the checkbox definition:
<input type="checkbox" name="labelname" id="label1" value="0" style="min-width: 20px;" disabled><label for="label1" class="form-checkbox-left">Name 1</label>
Then your CSS should look like this to facilitate the change:
input[type="checkbox"][disabled] + label {
color: #ccc;
}
This in turn modifies the text of your label.
I have this HTML:
<input type="radio">
<span class="label">
<label id="options_34537_2label" for="options_34537_2">
</label>
</span>
Now I also have some CSS, which hides the radio button itself and puts an image in front of my label.
input[type="radio"] {
display: none;
}
label:before {
background: url("someimage.jpg") no-repeat scroll 0 0 transparent;
}
In IE and FF I can click the image to select the option, in Chrome, clicking does not work at all. Any idea how to solve this issue?
Thanks!
You should put the <input> inside the <label> to make it cliquable:
<label><input type="radio"></label>
And use the background property on your label directly, instead of using the :before pseudo-class. Then add some text or specify a width to show your background.
I have a checkbox and two text fields. When the checkbox is checked, the two textfield appear (via jquery code). I want that the two label "First field" and "Second field" be aligned with the label "MyCheckbox" Or, in some way, that the two textfield label should be indented respect to the level of the checkbox.
This is my html code:
<div>
<input type="checkbox" name="mycheckbox"> MyCheckbox
</div>
<div id="mydiv">
<div><label>First field</label>
<input type="text" name="first_field" value="">
</div>
<div><label>Second field</label>
<input type="text" name="second_field" value="">
</div>
</div>
How could I do it with css?
#mydiv div {
padding-left: 16px;
}
JSFiddle
You could put them inside of the same div and append to the div using jquery. You would access the div like this
$('input[name=mycheckbox]').parent()
and the append like this
$('input[name=mycheckbox]').parent().append($('#mydiv').html());
If you put the first field and second field outside of the div and the div has a default width //width = 100%
It will be put underneath your first checkbox div. So you need to do one of two things...
Use the above jquery to put your code inside of the 100% div
Or specify the first div's width and float the item next to it an
example of this is
////the float is optional
//div{
//width: 50%;
//float:left;
//}
//#mydiv{
//width: 50%;
//float:left;
//}
I have a div that contains a couple of radio buttons. These show/hide a textbox.
<p>Some text</p>
<div>
<div>
<input id="show" name="radioGroup" type="radio" value="1" /><label for="show">Show</label> -
<input id="hide" name="radioGroup" type="radio" value="0" /><label for="hide">Hide</label>
</div>
<div class="myTextBox">
<input type='text'>
</div>
</div>
<p>Some text</p>
When I show/hide the .myTextBox then the text bumps a couple of pixels. This is due to the padding & margin on the textbox.
Without removing these settings (padding/margin) is there a way to eliminate the CSS bump?
See example on jsFiddle http://jsfiddle.net/nTJZN/1/
See here.
What I am doing is basically instead of show() and hide() I'm altering the visibility property.
function ShowHideTextbox()
{
if($("#show").is(":checked"))
$(".myTextBox").css('visibility','visible');
else
$(".myTextBox").css('visibility','hidden');
}
This is because your input box is taller than the text, which causes the line to grow when the input box is shown. By inspecting the element, I determined the line was 28px high when the input box was visible, so applying a line-height of 28px fixes the problem, like so:
div
{
display: inline-block;
line-height: 28px;
}
See http://jsfiddle.net/X4X3U/
For the CSS gurus out there, this markup outputs a checkbox with a label Value1 to its right, but Value1 is too close to the checkbox.
<dd id="rr-element">
<label for="rr-1">
<input type="checkbox" value="1" id="rr-1" name="rr[]">
Value 1
</label>
</dd>
So I'm trying to create a padding-right effect to the right of the checkbox, but it's not working. The checkbox and label move together. How can I target the checkbox only or its text only so I create a padding gap?
dd label input {
padding-right:100px;
}
Use margin-right. padding is inside the element, and often acts funny with input elements because they are rendered using the OS's native input components, and are a mess to customize in general.
JSFiddle here
No unclickable gap between checkbox and label.
No line wrap disconnection of the checkbox and label.
No spaces added by code indentations.
More readable.
<dd id="rr-element">
<input type="checkbox" value="1" id="rr-1" name="rr[]">
<label for="rr-1">Value 1</label>
</dd>
<style>
#rr-element {
white-space: nowrap;
}
#rr-element label {
padding-left: 0.4em;
}
</style>