I am attempting to use a cssclass to add whitespace. I have coded with the below, but I am not getting any extra whitespace.
What is the proper way to code for this?
.checkboxlistformat {
margin-left:30px;
}
<div align="center" runat="server" id="checkboxlistdiv">
<asp:CheckBoxList ID="checkboxlisttest" CssClass="checkboxlistformat" runat="server" RepeatLayout="table" RepeatColumns="4" RepeatDirection="vertical" OnSelectedIndexChanged="checkboxlist_SIC_SelectedIndexChanged"></asp:CheckBoxList>
</div>
Assuming your ASP generates a corresponding <label> for the text. You can target the text with an ancestor descendant selector as .checkboxlistformat label:
.checkboxlistformat label {
margin-left: 30px;
}
<input id="checkboxlisttest" type="checkbox" class="checkboxlistformat">
<label for="checkboxlisttest">Checkbox</label>
Alternatively, you could always simply place the margin on the right of the checkbox:
.checkboxlistformat {
margin-right: 30px;
}
<input id="checkboxlisttest" type="checkbox" class="checkboxlistformat">
<label for="checkboxlisttest">Checkbox</label>
Hope this helps! :)
Related
I have this code below which I have built in order for it to be ALL on the same line. Problem is, for some reason the form input field is several spaces away from the label. Thus something like this happens:
https://jsfiddle.net/pswLLhru/
Any help so as to remove the extra spacing between the two input fields?
Thank you
label {
display:inline-block;
width: 130px;
}
<div class="block">
<label>Currently I am </label>
<input type="text" id="labelinput" style="width:60px;"/>
<label> in </label>
<input type="text" id="labelinput" style="width:60px"/>
</div>
Just deleting your CSS:
label {
display:inline-block;
width: 130px;
}
will remove the white space from your inputs and show your div with the 2 inputs on the same line.
Also I would recommend indenting your code to make it easier to read in larger/future projects.
Delete the width in your css and use comments in your markup
<div class="block">
<label>Currently I am </label><!--
--><input type="text" id="labelinput" style="width:60px;"/><!--
--><label> in </label><!--
--><input type="text" id="labelinput" style="width:60px"/>
</div>
How do I bring my radio buttons closer to the labels?
input[type="radio"]{
float: left;
width: auto;
margin-left: 3em;
}
<fieldset id="payment_method">
<legend>Payment Method</legend>
<input type="radio" name="payment_method"value="Bill Me">
<label for= "payment1"> Bill Me</label>
<input type="radio" name="payment_method"value="Bill Me">
<label for= "payment2">Credit Card</label>
</fieldset>
You do not need to float your inputs, you can just give the labels a negative margin instead like so:
label {
margin-left: -1px;
}
Just don't apply any rules to your radio input. As all form elements are non Block-level elements (excluding form itself) so you don't need to float them (in your case) and remove the extra margin. See the fiddle
input[type="radio"] {
/* No styling */
}
I like wrapping my input/label pairs in a <div> for easier styling. After that you could just remove the line break between the label and input tags:
<fieldset id="payment_method">
<legend>Payment Method</legend>
<div class="fieldgroup">
<input type="radio" name="payment_method"value="Bill Me"><label for= "payment1">Bill Me</label>
</div><!--/.fieldgroup-->
<div class="fieldgroup">
<input type="radio" name="payment_method"value="Bill Me"><label for= "payment2">Credit Card</label>
</div><!--/.fieldgroup-->
</fieldset>
It's not terribly pretty, but it is the most cross-browser compatible solution, since each browser treats inline-block spacing differently.
Or, if you want to keep your code tidy, you can use floats like you tried originally:
CodePen
input[type='radio'],
label {
float: left;
}
.fieldgroup:after {
content: "";
display: block;
clear: both;
}
I get the following snippet of html from a CMS:
<label title="">
Land
<input id="Land" name="Land" size="20" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="Land" data-valmsg-replace="true"></span>
</label>
I need to center the text Land, but I can't seem to figure it out. I've tried setting text-align: center on the label, but it doesn't work. I can't modify the markup. Is it something simple I'm missing?
EDIT:
I want to center it over this input:
Don't mind the right edge of the input field. The label span 100% of the width of the input field.
There is two ways to deal with that .
1.The display property specifies if/how an element is displayed so label must be displayed as block or inline-block to center it
label {
display: inline-block;
text-align: center;
}
2.you can use html tag center
<center>
<label title="">
Land
<input id="Land" name="Land" size="20" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="Land" data-valmsg- replace="true"></span>
</label>
</center>
And if you want to center the word Land over the centered Label , you can just add this
<center>Land</center>
the tag is an inline element and therefore exactly the same width of its content.
You would need a div or something to do this
Doing this without being able to alter the markup itself would be messy at best and will probably consist of some javascript/jquery
the label is not expanding on 100% width because it's an inline element. to enable this - set on the label css:
label {
display: block;
text-align: center;
}
or insert the text directly into a block element like: div, etc.
Edit:
Simply add the following CSS to achieve the desired result:
label input, label span {
display: block;
}
See a live demo: http://jsbin.com/sebinuje/1/edit?html,css,output OR http://jsfiddle.net/mayank_agarwal/5yUQr/
Enclose the snippet with a div element and apply the text-align property on the div.
HTML:
<div id="label-enclosure">
<label title="">
Land
<input id="Land" name="Land" size="20" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="Land" data-valmsg-replace="true">
</span>
</label>
</div>
CSS:
#label-enclosure{
text-align:center;
}
Although I'm loath to recommend using a <br/> tag here is one way given your current structure
JSfiddle
HTML
<label title="">
Land
<br/>
<input id="Land" name="Land" size="20" type="text" value=""/>
<span class="field-validation-valid" data-valmsg-for="Land" data-valmsg-replace="true"></span>
</label>
CSS
label {
text-align: center;
display: inline-block;
}
I'm really not that good at CSS, and I want to know how to correctly style a form in a manner that it puts each single text input and label in a line. like this :
<label for="input1">...</label>
<input type="text" id="input1"/>
<label for="input2">...</label>
<input type="text" id="input2"/>
<label for="input3">...</label>
<input type="text" id="input3"/>
<label for="input3">...</label>
<input type="text" id="input3"/>
and it would be shown in the webpage like :
(label)(input)
(label)(input)
(label)(input)
(label)(input)
<label>foo</label>
<input type="text"/>
<label>foo</label>
<input type="text"/>
<style>
input, label { float:left }
label { clear:left; }
</style>
http://jsfiddle.net/RpRS5/
I recommend this tutorial by A List Apart about Prettier Accessible Forms. You can also use a definition list with some custom styling, e.g.,
<dl><dt><label></label></dt>
<dd><input></dd></dl>
And something like:
dl dt {
float: left;
width: 8em;
}
Edit: to sum up the A List Apart article, they suggest you put form fields in an ordered list ol. Labels are displayed as inline-block so they appear horizontally next to their associated fields.
Put them in a list, or in a structure like a list (that is to say, wrap each "row" in a div).
Put your inputs inside the label element and then you can simply display: block them or float them, I prefer display but it would be easy enough to change.
<label>Hello <input type="radio" name="what" value="Hello" /></label>
http://jsfiddle.net/Bpxfp/
http://jsfiddle.net/ud7YE/1/
you can control the space between the label and input by varying the width of the wrapper. Just set the height of the label and the top margin of the input same in value but negative
I find enclosing label and input or select tags in a div or list. And the label and select tags should be of type inline-block
<div>
<label>Name: </label><input type="text" />
</div>
<div>
<label>Place: </label><input type="text" />
</div>
CSS:
label {
display: inline-block;
}
input {
display: inline-block;
padding: 2px;
}
div {
display: block;
margin: 2px 0;
}
This would work out well.
I have a list of checkboxes, each one with a label:
<input type="checkbox" id="patient-birth_city" name="patient-birth_city" />
<label for="patient-birth_city">(_PATIENT_BIRTH_CITY_)</label>
<input type="checkbox" id="patient-birth_state" name="patient-birth_state" />
<label for="patient-birth_state">(_PATIENT_BIRTH_STATE_)</label>
<input type="checkbox" id="patient-birth_country" name="patient-birth_country" />
<label for="patient-birth_country">(_PATIENT_BIRTH_COUNTRY_)</label>
Without using any CSS they are showed in the same line (I suppose they have a default "inline" or "block-inline" display). The problem is I can't modify HTML structure and I need each pair checkbox-label appear in a new line. Like this. Is it possible using only CSS?
The good thing about label tags is you can wrap the input elements:
<label>
<input type="checkbox" id="birth_city" name="birth_city" />
City
</label>
<label>
<input type="checkbox" id="birth_state" name="birth_state" />
State
</label>
<label>
<input type="checkbox" id="birth_country" name="birth_country" />
Country
</label>
And if you add the following CSS:
label {
display: block;
}
It will display it how you want.
Demo here
As you CAN'T edit your HTML, this CSS would work:
input, label {
float: left;
}
input {
clear: both;
}
Demo here
Using float:left and clear:left you can do this with only css.
Demo: http://jsfiddle.net/VW529/2/
input {margin:3px;}
input, label {float:left;}
input {clear:left;}
The only problem is that the example does not show more information of parent elements, giving the container element overflow:hidden and/or clear:both might be needed to prevent floating elements next to the last label. (edited jsfiddle code with container div)