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;
}
Related
My existing web application uses css div class="medBlutext" for the texts:
.medBluText {font: 0.7em Book Antiqua, Georgia, Times New Roman, serif; font-size: 12px; color: #0000ff;}
When I use this div tag next to a button or other form field like this:
<tr>
<td align="Right"><div class="medGreyTextbold">Subject</div></td>
<td>
<input type="text" name="Email_Subject" value="" class="inputReqText" Required="True">
<input type="submit" name="emailsend" value="S E N D" class="SubmitButtons">
<cfif IsDefined("url.err")><div class="medBluText"><cfoutput>#url.err#</cfoutput></div>
</td>
</tr>
The error message which is in url.err does not appear at the same line as the submit button but it appears below the submit button. Like there is a break tag after the submit button. if I don't use the div tag the message appears next to the send button but I need to make the text appear the same throughout so I need to use the div tag. How can I still use this div tag and make the text appear at the same line?
Your CSS style only has font properties, there's nothing that prevents you from using it on other elements like a span. The difference in styling that you're seeing is that a div is a block level element. It will always take up the full width of it's containing element. Which means it is going to start on a new line. Use an inline element like a span instead. Since your style is not using a property like margin and only font properties both elements should display the same.
.response-text {
color: #0000ff;
font: 12px 'Book Antiqua', Georgia, 'Times New Roman', serif;
}
<label for="subject">Subject</label>
<input type="text">
<span class="response-text">Some error occurred</span>
You can also set the div to display: inline; to make it behave like an inline element like a span.
FWIW I would look at using a different naming convention for CSS classes that doesn't use specific property values like blue. See my example above. Now, if the text color ever changes to red, you don't have an element displaying red text with a class of .medBlueText.
You might want to move away from tables for your form. Not mandatory but they're a lot less flexible than using divs. You might even want to work in flexbox.
<div> is a block level element which will break into a new line. Use display:inline-block instead.
.medBluText {
font: 0.7em Book Antiqua, Georgia, Times New Roman, serif;
font-size: 12px;
color: #0000ff;
display:inline-block;
}
<table>
<tr>
<td align="Right"><div class="medGreyTextbold">Subject</div></td>
<td>
<input type="text" name="Email_Subject" value="" class="inputReqText" Required="True">
<input type="submit" name="emailsend" value="S E N D" class="SubmitButtons">
<cfif IsDefined("url.err")><div class="medBluText"><cfoutput>#url.err#</cfoutput></div>
</td>
</tr>
</table>
I am constructing a basic html5 website with 5 pages for practice as I am in the process of relearning html5 and CSS.
I have a div with ID "education" and Class "content-list".
Inside this div is a Caption and an unordered list Class "content-ul"(NOTE: Caption is contained in "content-list"). The list contains 3 list items.
I want to set the font-weight to bold for the caption, but not the unordered list.
Here's what I have:
HTML:
HTML:
<div id="education" class="content-list">
<caption>Education:</caption>
<ul class="content-ul">
<li>Tafe</li>
<li>College</li>
<li>High School</li>
</ul>
</div>
CSS:
.content-list {
... styles
font-weight:bold; /* Sets caption and list to bold */
.... styles
}
.content-ul {
.... styles
font-weight:normal; /* Sets list back to normal */
.... styles
}
This achieves the desired result, but I am wondering if there is a better/more efficient way of doing this.
Keep in mind, 4 of the 5 pages use this code. For this reason I opted against using in line styles as I would have to do it 4 times in total. This would remove the need to set the list to bold and then back to normal again, but would still use more code than the chosen method.
Any help/suggestions would be great.
caption is for tables, use i.e. a h4 for lists
<div id="education" class="content-list">
<h4>Education:</h4>
<ul class="content-ul">
<li>Tafe</li>
<li>College</li>
<li>High School</li>
</ul>
</div>
Side note, styling a caption work when used properly
table, th, td {
border: 1px solid black;
}
table caption {
color: red;
font-weight: bold;
}
<table>
<caption>Caption</caption>
<tr>
<th>Header</th>
</tr>
<tr>
<td>Cell</td>
</tr>
</table>
Looking through your example, I can see you only want Education to be bold and not the content other than it. For this simply, do it like
caption{
font-weight:bold
}
CSS in OP won't be needed.
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'>
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