I have checkboxes as shown in http://jsfiddle.net/Lijo/Fw3fz/. I need to align the checkboxes horizontally. How to align them using CSS?
Note: The following HTML code is generated from ASP.NET. I cannot change this HTML code.
<table id="Checkboxlist1">
<tr>
<td><input id="Checkboxlist1_0" type="checkbox" name="Checkboxlist1$0" value="red" /><label for="Checkboxlist1_0">Red</label></td>
</tr><tr>
<td><input id="Checkboxlist1_1" type="checkbox" name="Checkboxlist1$1" value="blue" /><label for="Checkboxlist1_1">Blue</label></td>
</tr><tr>
<td><input id="Checkboxlist1_2" type="checkbox" name="Checkboxlist1$2" value="green" /><label for="Checkboxlist1_2">Green</label></td>
</tr>
</table>
Create a CheckBoxList and set the horizontal layout property:
<asp:CheckBoxList ID="cbl" runat="server" RepeatDirection="Horizontal">
<asp:ListItem>Red</asp:ListItem>
<asp:ListItem >Blue</asp:ListItem>
<asp:ListItem>Green</asp:ListItem>
</asp:CheckBoxList>
More info:
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.checkboxlist.repeatdirection.aspx
You have to change the trs display property: http://jsfiddle.net/Fw3fz/4/
#Checkboxlist1 tr{
display:inline-block;
margin-right:20px;
}
Or, use float: http://jsfiddle.net/Fw3fz/10/
#Checkboxlist1 tr{
float:left;
margin-right:20px;
}
If you want some space between the checkboxes and the labels, add this snippet:
#Checkboxlist1 tr label{
margin-left:5px;
}
However, it's very uncommon to display table rows inline or to float them. If possible, change the HTML structure.
#Checkboxlist1 tr {
float: left; // or diplay: inline-block
margin-right: 15px;
}
#Checkboxlist1 td label {
margin-left: 5px;
}
DEMO
If you are using ASP.NET Framework 4, you can check following properties:
CheckBoxList.RepeatDirection Property:
Gets or sets a value that indicates whether the control displays vertically or horizontally.
CheckBoxList.RepeatLayout Property (to get rid of table layout)
Gets or sets a value that specifies whether the list will be rendered by using a table element, a ul element, an ol element, or a span element.
Either put them in different cells but in one line (tr), or lose the table and use css float.
Related
The selectOneRadio element in JSF is translated to a table, where the radio button and its label are put within the same <td> in a table.
<!-- JSF Element -->
<h:selectOneRadio id="types" label="Type"
value="#{bean.selectedType}"
layout="pageDirection">
<f:selectItems value="#{bean.types}"/>
</h:selectOneRadio>
<!-- Generated HTML -->
<table id="j_id_i:types">
<tbody>
<tr>
<td>
<input id="j_id_i:types:0" type="radio" value="VALUE1"
name="j_id_i:types"/>
<label for="j_id_i:types:0"> Value #1</label>
</td>
</tr>
<tr>...</tr>
...
</tbody>
</table>
Before I was using Bootstrap, the elements within the <td> would appear side by side, but now look under each other.
The processed CSS for the element is the following, as given by Firebug.
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
color: #333333;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
}
html {
font-size: 100%;
}
I have no clue what may be producing such behaviour. It's not a concern of width, as this is the single element within the <div>, and without bootstrap it is rendering side by side.
That's because the <label> has due to the Bootstrap CSS become a HTML block element which starts naturally at a new line.
You need to make it a HTML inline element again. So, you need to override the Bootstrap CSS accordingly. Perhaps you want to apply this for labels in table cells only. E.g.
td label {
display: inline;
}
I know that you can assign a class to the generated table by using CssClass on the RadioButtonList but I need to be able to style the generated <td>'s individually.
Easy with JQuery but I'd much rather not have to resort to that.
Adding cssClass="myClass" to the ListItem results in the following broken HTML
<table id="myTable">
<tbody>
<tr>
<td>
<span cssclass="some_class"> // Well this is rubbish!
<input id="myRadioInput" type="radio" name="myRadioInput" value="myValue" >
<label for="myRadioInput">myLabel</label>
</span>
</td>
<td>
<input id="myRadioInput2" type="radio" name="myRadioInput2" value="myValue2">
<label for="myRadioInput2">myLabel2</label>
</td>
</tr>
</tbody>
</table>
So my question is: Is it actually posible to either assign a class or apply inline styling to the generated <td>'s INDIVIDUALLY?
PLEASE NOTE
This is a question about ASP.NET. Answers that simply tell me how to style HTML elements are not answering the question.
If you want to do it in code (e.g. if you need to dynamically adjust the style based on complicated logic) you can set the style attribute on the ListItem (setting the class attribute might work as well but if your ListItem is disabled, asp.net will override it with a special aspNetDisabled class):
item.Attributes["style"] = "color: lightgray; font-style: italic;";
To style all the td's you could add the CSS like so...
#myTable td{
color:Red;
}
Other than that (if you wanted different styles for each td) jQuery would be the only way to add classes to those generated td's.
$('#myTable td:eq(0)').addClass('td1');
$('#myTable td:eq(1)').addClass('td2');
...
OR
$.each($('#myTable td'), function(i){
$(this).addClass('td'+i);
});
This is one of the reasons I dislike ASP.NET controls with all the extra markup you have no control of through the properties panel.
You can do it as follows:
<table>
<tr>
<td class="yourcssclassname"></td>
<td class="yourcssclassname2></td>
</tr>
</table>
<style type="text/css">
.yourcssclassname
{
padding: 10px;
}
.yourcssclassname2
{
padding: 15px;
}
</style>
or you can
<table>
<tr>
<td style="padding:10px;"></td>
<td style="padding:15px;"></td>
</tr>
</table>
Hope this helps
You are so close to the solution. Add class attribute instead of cssclass on the items for individual styling. This will add a span tag surrendering the input and label tags with the right class.
<style>
.radiobuttonlist .red { display: block; background-color: red; }
</style>
<asp:RadioButtonList runat="server" CssClass="radiobuttonlist">
<asp:ListItem Text="Item1" Value="1" ></asp:ListItem>
<asp:ListItem Text="Item2" Value="2" class="red" ></asp:ListItem>
<asp:ListItem Text="Item3" Value="3" ></asp:ListItem>
</asp:RadioButtonList>
You can target the input elements and labels with:
input[type="radio"] { margin-right:10px; }
input[type="radio"] + label { color:red; }
If you had a class on the table, you could add that to be more explicit. Should be backwards compatible to IE7.
In the following example, I'm trying to get the text, input box and icon to align without over lapping.
http://jsfiddle.net/zGZM7/2/
Is there some css I'm missing?
Thanks
Edit, sadly I need a solution which will work with FF and IE6 :(
You have a lot of irrelevant CSS in your fiddle and the only relevant bit isn't getting called as it in your example requires to be under a ul with id #icons. Removing the ul#icons with the following:
.ui-icon {float: left; margin: 0 4px;}
Should make it work as you described.
example:
http://jsfiddle.net/niklasvh/kTFw7/
Split them in different tds
<table>
<tr>
<td>Foo</td>
<td><input type=text id=Foo class=textInput></td>
<td></td>
</tr>
</table>
or
add style float:left to the input
<td>
<input type=text id=Foo class=textInput style="float:left">
</td>
or like Niklas's idea
.ui-icon {float: right; margin: 0 2px;}
ASP.Net has a tag called CheckboxList. The output of this tag looks like this:
<table class="checkbox">
<tbody>
<tr>
<td>
<input id="/*longdynamicstring1*/" type="checkbox" name="/*longdynamicstring2*/" />
<label for="/*longdynamicstring1*/">Label Text</label>
</td>
</tr>
</tbody>
</table>
I want to position the label and the input but I cannot find out how. Tried the following:
.checkbox input{
padding-right: 5px;
}
and
.checkbox input[type='checkbox']
{
padding-right: 5px;
}
but neither of them had any effect. Because it's ASP I cannot set a class for the input elements and I cannot reference the id because it's dynamic.
Your selector works well, it's just that padding has no effect on the check box. Margin will work, for example:
.checkbox input {
margin-right: 50px;
}
See it in action: http://jsbin.com/irari
In addition, take a look at the RepeatLayout property - it can make the generated HTML more CSS friendly.
I have a simple HTML table with 2 columns containing text fields and headers for 'Name', 'Comments' and 'Email'.
I'm looking for the best strategy on styling this HTML fragment if it were to appear on multiple pages - requiring different dimensions on each page. I've been reading a lot about CSS recently but havent stumbled across enough information yet that really makes me comfortable to know the best way to design such .css.
For instance I might show the comments form at 50% width on the 'comments' page, but only at 20% in a sidebar in some additional places on the site.
I am mainly concerned about styling the widths of the boxes - but of course the same approach applies for the text. For instance the name field should not be as wide as the email field. I'm thinking fixed widths are better than percentages.
There are obviously many ways to style it. Assume I have 1 master css file already.
1) Put percentage widths on the input tags and then the outer div would be 100% width for whatever panel it is contained in. This requires no page specific css but I don't like the idea of percentages inside the td tags, plus I cant change the height easily of the textarea.
2) create styles for #Name, #Comments and #Email in each individual page as additional styles in <head><style> *
3) style based on #Name, #Comments and #Email in a page specific css file. Are page specific files good or bad? I'm not even sure I like styling based on the ids here because they're dynamically generated and if for some reason they needed to change I'd have to update the css everywhere.
4) style based on #Name, #Comments and #Email but qualify them with a descendent selector specific to each page. So i'd have .faqPage #Name for when this appears on the FAQ page. Obviously these go in my master css file.
5) create class names for 'emailField,nameFieldandcommentsField` [options 2,3,4 are repeated for this option]
6) create class names for 'shortField,fullWidthFieldandtextInputField` [options 2,3,4 are repeated for this option]
7) you get the idea :)
8) something else
I'm just a little overwhelmed with all the options. How do I go about deciding which is the best way? A specific goal is to be able to style the same HTML on multiple pages (obviously thats what css is all about though - but it does affect which options I can use).
<div id="pnlSubmitComments">
<table class="fieldTable">
<tr>
<td align="right">
<label for="Comments">Name:</label>
</td>
<td>
<input id="Name" name="Name" type="text" value="" />
</td>
</tr>
<tr>
<td align="right">
<label for="Comments">Email:</label>
</td>
<td>
<input id="Email" name="Email" type="text" value="" />
</td>
</tr>
<tr>
<td align="right" valign="top">
<label for="Comments">Questions:</label>
</td>
<td>
<textarea id="Comments" name="Comments">
</textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input id="btnSubmitComments" name="btnSubmitComments" type="submit" value="Submit Questions" />
</td>
</tr>
</table>
</div>
PS. The actual field names more specific such as CommentsName - its just easier to put Name here for readability.
Side comment: Maybe you shouldn't use tables to layout this form but fieldsets, it would leave you with more flexibility. For example if you decide to have the labels and input fields on top of each other in a more narrow column...
your example without tables (looks also much prettier):
<style type="text/css">
<!--
form { /* set width in form, not fieldset (still takes up more room w/ fieldset width */
font: 100% verdana, arial, sans-serif;
margin: 0;
padding: 0;
min-width: 500px;
max-width: 600px;
width: 560px;
}
form fieldset {
/* clear: both; note that this clear causes inputs to break to left in ie5.x mac, commented out */
border-color: #000;
border-width: 1px;
border-style: solid;
padding: 10px; /* padding in fieldset support spotty in IE */
margin: 0;
}
form fieldset legend {
font-size: 1.1em; /* bump up legend font size, not too large or it'll overwrite border on left */
/* be careful with padding, it'll shift the nice offset on top of border */
}
form label {
display: block; /* block float the labels to left column, set a width */
float: left;
width: 150px;
padding: 0;
margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
text-align: right;
}
form input, form textarea {
/* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
width: auto; /* set width of form elements to auto-size, otherwise watch for wrap on resize */
margin: 5px 0 0 10px; /* set margin on left of form elements rather than right of
label aligns textarea better in IE */
}
textarea {
overflow: auto;
}
/* uses class instead of div, more efficient */
form br {
clear: left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
}
-->
</style>
<div id="pnlSubmitComments">
<form>
<fieldset>
<label for="Comments">
Name:
</label>
<input id="Name" name="Name" type="text" value="" /><br />
<label for="Comments">
Email:
</label>
<input id="Email" name="Email" type="text" value="" /><br />
<label for="Comments">
Questions:
</label>
<textarea id="Comments" name="Comments">
</textarea><br />
<label for="spacing"></label>
<input id="btnSubmitComments" name="btnSubmitComments" type="submit" value="Submit Questions" />
</fieldset>
</form>
</div>
Now to your main question. I would do it as follows:
I would use the id's of the different layout columns I want to use the form in. So if I use it in my main column () I would write CSS accordingly like so:
#main .pnlSubmitComments form fieldset {
/*your CSS*/
}
and for the side column respectively
#side .pnlSubmitComments form fieldset {
/*your CSS*/
}
You can have control over each element by assigning classes like so:
<input type="text" class="email" name="email" id="email" />
and then you do exactly as described above:
#main .email {
/*your css for the .email textbox/*
}
You can easily do it with one css file, if you can add a style class on a container element.
For example, page 1 would have the following html:
<body class="page1">
<!-- repeated html here -->
<input />
</body>
And on page 2 you'd have:
<body class="page2">
<!-- repeated html here -->
<input />
</body>
In your single css file you can target the input tags based on the class of the body element:
body.page1 input { width: 25%; }
body.page2 input { width: 50%; }
So, you keep the html the same, just change the class (or id) of a container element, and use that to write different css rules.
Update: After rereading your list, i see this is more or less on your list as number 4. I think this is a good option if you can use it. I also use it to target different browsers, by adding a class indicating the browser on a body tag.
1) Use common css and set some of the values like width in code behind.
2) Create multiple css files for different needs and link right css to page using code behind.
Sorry it took so long to get back to you!
CSS-GRID with grid-template-areas is a fantastic way to do this!
You can name regions and then switch the css with responsive media queries and change the layout without ever having to rearrange the HTML.
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas