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.
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 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.
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.
I'm learning CSS and HTML.
In my code I have:
<style>
table, td, th
{
padding: 5px;
}
</style>
This rule works on all tables on the page.
Now I want to make a table without padding:
Here is the source:
<table>
<tr>
<td>Login</td>
<td><input type="text" name="login" class="input"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" class="input"></tr>
</tr>
</table>
How to do this?
If you want to add specific styles to this table that override the default styles you've defined, then you'll need some way to reference it in CSS.
Typically, you would give it a class or an ID -- eg <table class='myspecialtable'>....</table>
Then you can have a stylesheet which overrides your default 5px styles, just for this table.
.myspecialtable, .myspecialtable td, .myspecialtable th {
padding: 0px;
}
If you can't add an ID or class to this table, then you could add it on a parent element, and the effect would be the same (as long as that parent doesn't contain any other tables, of course). In this case, your CSS would look something like this:
.myspecialtablecontainer table, .myspecialtablecontainer td, .myspecialtablecontainer th {
padding: 0px;
}
You should change your CSS to define a style instead.
.padded { ... }
Then you can set the class to that style for any tables you want to use that style.
<table class="padded">
</table>
When you set a style, as you have done, for all elements of a particular type, then the only way to remove them is to set the style to something else, or not include a reference to that CSS file from the page that you don't want to use them.
One way would be to give your table a class like so:
<table class="nopadding">
[... table rows and columns...]
</table>
And then put this in your css:
.nopadding, .nopadding td, .nopadding th
{
padding: 0;
}
Which says "any element with the class should have a padding of 0". The .nopadding th and .nopadding td has to be there and is a way of saying "all th and td who is inside an element of class nopadding shouldn't have any padding either", since you previously told all th and td to have a padding of 5px.
I remeber when I first started learning HTML.
What you're after is an id or a class attribute. You'd have two tables like so:
<table class="table1">
<tr>
<td>Login</td>
<td><input type="text" name="login" class="input"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" class="input"></tr>
</tr>
</table>
<table class="table2">
<tr>
<td>Login</td>
<td><input type="text" name="login" class="input"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" class="input"></tr>
</tr>
</table>
To make is so that table1 had padding, but table2 didn't, you would use the appropriate CSS rules to identify and style the tables:
.table1, .table1 td, .table1 th
{
padding: 5px;
}
.table2, .table2 td, .table2 th
{
padding: 0px;
}
There's many ways I could have done this with CSS. For example, You could also use ids in this case, but it's easier to use classes as an id can only be used once per document.
A slightly better approach in this case would be to take advantage of cascading rules. I could have kept your original CSS and just added the second set of rules:
.table, .table td, .table th
{
padding: 5px;
}
.table2, .table2 td, .table2 th
{
padding: 0px;
}
In this case, only tables with the class table2 would have the 0px padding - all other tables would have 5px padding.
It would be a good idea to read the W3CSchools introduction to CSS - http://www.w3schools.com/css/css_intro.asp. This will introduce you to the basics and get you on your way.
Simple use
<style>
table, td, th
{
padding: 0px;
}
</style>
Also try border-collapse: collapse;.
<table cellpadding='0'> If this don't work, you can create a css class that removes the padding and use that in your table: <table class='no_padding'>
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