So I have two fieldsets, wrapped in in one label that I want to display adjacent to each other. Here's my code: fiddle
So the two fieldsets containing the input boxes and instructions respectively should appear side-by-side. What should I change/add in my code to make it work? Thanks
having the fieldsets float: left; will work fine.
look at this: http://jsfiddle.net/5brSk/2/
You will have to make sure that the container of your 2 fieldsets is large enough to hold both fieldsets next to each other, otherwise it will break (again).
If you want the two fieldsets side by side, you can use a table structure
<label>
<table>
<tr>
<td>
//field set 1
</td>
<td>
//field set 2
</td>
</tr>
</table>
</label>
Add some css to fix it in the end.
And technically there is no need for the label tag.
Do the fieldsets styled as display: inline-block; ( http://jsfiddle.net/5brSk/16/ ) to get them side-by-side, and don't use a label as the parent - use it's form or a div / span. There are countless other things that make your code invalid though (duplicate IDs etc)
Related
I'd like to have three cells in a table select the appropriate checkbox when you click on them, so I wrapped them with a label tag.
<table>
<tr>
<td>
<input id="input_id" type="checkbox">
</td>
<label for='input_id'>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
</label>
</tr>
</table>
Unfortunately this broke the click functionality. Normally when you click the text in a label it toggle the check, but this doesn't work with wrapped elements. Any ideas why? Should it, or is there some reason this is a bad idea?
Interestingly, it does work if I use three separate labels around the cell contents with the same 'for' attribute....
It's a bad idea to write invalid mark-up as per your example. The only element that should wrap a td is a tr.
As it stands, your example won't break the click functionality, because the td tags will be discarded by the parser.
However, if the example was inside a table and tr element, then the input and label elements would be moved to before the table, and therefore wouldn't be wrapping either the tds or the "stuff" text (which stay inside the table), so clicking on that text will have no effect.
My text input seems center aligned but my select inputs are top-aligned.
How can I fix this and have them both be the same?
Current HTML code:
<td><input text-align="top" name="configuration[targets_attributes][0][name]" id="configuration_targets_attributes_0_name" size="30" value="bob" type="text"></td>
<td><li class="select input required" id="configuration_targets_attributes_0_maximum_fte_input"><select id="configuration_targets_attributes_0_maximum_fte" name="configuration[targets_attributes][0][maximum_fte]"><option value="1.0" selected="selected">1.0</option>
<option value="0.9">0.9</option>
<option value="0.8">0.8</option>
...
</select>
</li></td>
I would start by being more consistent with your containers. You put the input directly inside the td, but you put the select inside an li. Try putting them both in the same containers. You probably don't want to use an li right there since it's not in a list. So I would probably get rid of the li in the second td.
Must be your CSS. It works fine without any styling: http://jsfiddle.net/32mxD/1/
Also, as other suggested, from consistency and best practice point of view, not a good idea to have LI within a TD and then have Select within the LI
As Callan said, get rid of the li within the td
JSFiddle : http://jsfiddle.net/s8KR3/
If you are still having problems with elements on the same row being on a different height, you should use
td {
vertical-align: middle;
}
in your css. Note that if it isn't aligned properly, it's probably due to another css rule you already added, but didn't post here.
You're using a text-align HTML attribute, which, to my knowledge, doesn't exist. Instead, since you have this in a table, you should be using the CSS property vertical-align: middle.
You also have <li> elements directly inside your <td> tags, which I believe is also invalid. <li> elements can only be children of either <ul> or <ol> tags.
Having said that, using a <table> is not really appropriate for this use. It can be done, but there may be a better way, possibly using floated divs. Tables are meant for tabular data, not for layout. Or perhaps get rid of the table and use a <ul> with floated <li>tags.
Here is an example using a <ul> with floated <li> tags: http://jsfiddle.net/LU3VU/
I am trying to align my floating labels with my floating input fields. Of course, I have been searching around but no available answers helped me out.
Find it here: jsfiddle
The problem is related to the font-size I am setting for the body-tag. Remove it and you'll see that the label and input is vertically aligned.
How can I fix this (without removing the font-size style for body, my entire application is depending on this one)?
Since you've a list of fields I would wrap every pair of label + field inside a list-item and thus applying a basic clearing to <li> element like so
#addagentform li {
height: auto; overflow: hidden;
}
you achieve the effect.
see fiddle: http://jsfiddle.net/AGV6G/6/
Instead of tricky and error-prone floating, just use a simple and logical table, with labels in one column, corresponding input items in another, and you’ll get things done in no time. This will also fix the problem that now the labels can get very, very far from the input items.
<form ...>
<table>
<tr><td><label for="firstname">*Förnamn:</label>
<td><input type="text" name="firstname" id="firstname">
<tr>...
</table>
</form>
Please take a look at this fiddle: http://jsfiddle.net/d3uc9/4/
I have a problem with this, as the two divs, in a table, next to each other, are not on the same margin line, even thought they share the same css class etc.
What have I done wrong in the example, and must I change to make them on the same margin-top line?
Thanks, I have tried to be as clear as possible.
What I mean is that they should share the same margin-top line, but they don't, and what must I do to fix this?
You just need something like:
td { vertical-align: top;}
Example fiddle
This says that the content of a table cell is aligned to the top of the cell rather than to the middle. This is needed because your left hand div is not as big as the one on the right.
Also I notice that you are duplicating ids several times in your HTML (eg <div id="stylized" class="myform">). This is not valid HTML and can potentially cause unexpected behaviour in browsers. IDs must be unique and if you want to identify multiple elements in the same way for style purposes then you should use classes.
eg.
<div class="stylized myform">
Just add to your css:
td {vertical-align:top;}
Adding valign="top" will make the column on the left align to the top of the row.
The problem is the vertical alignment of the table. The easiest way to fix it is to add valign="top" to either the <tbody> or <tr>. You could also do it through css by specifying vertical-align:top for the <tr>.
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
How do i replicate this kind of a structure using <div> or <span>'ed CSS
Depends on what you're trying to replicate.
With the simple example you've given, it's not easy to tell exactly what you're trying to achieve, but if what you're tring to do is put two blocks side by side (ie as columns in a page layout), you just need to create a couple of <div> elements and style them using CSS to appear next to each other. Depending on exactly what you want, there are a number of ways you could do the stylesheets.
One option would be to set them both as float:left;. Use width:... to set how wide you want them in pixels or percent.
If float is too complex for you (and it is quite a big jump in concept from a table-based layout), you may want to consider using display:inline-block; instead. This will also allow the <div>s to be positioned next to each other, but gives you more control over how they position themselves.
Finally, if the contents of the <table> is actually a table of data, don't be afraid of keeping it in a table - the <table> tag and its friends are still valid HTML, and putting tabular data into a table is still a good thing.
If you mean that you want to display two DIVs next to eachother, try using the css styles float:left or float:right. use another div with clear:left, clear:right or clear:both to reset following divs to normal behavior.
Here is a link explaining more about that:
http://www.w3schools.com/css/css_float.asp
(click the 'try it' links for very good examples)
I don't know if that's what you're looking for... but I hope so!