I'm having difficulty styling a <fieldset> that is a numbered list item in a form.
I've created a form and have made each question an item in an ordered list, like so:
<li>
<label>foo</label>
<input type='text'>
</li>
<li>
<label>baz</label>
<textarea></textarea>
</li>
Now I'm trying to style each list element so that each list number and the question (<label> element) appear together on a line, and the interactive widget appears on the line underneath. This is easy enough for questions that are made up of inline elements, but I'm running into trouble with check boxes and radio buttons that I have grouped together with a <fieldset>.
I've removed the default styling on the <fieldset> and <legend> elements to try and make these questions look like the other list items in the form. But now I'm getting this really odd behaviour where the list number is aligning with the bottom input option (as opposed to with the label).
Changing the list-style-position doesn't help, and fiddling around with the <input> or <label> styles doesn't seem to affect it. I tried changing the <ol> to display: flex and doing a few things with that but that didn't do anything either.
What has worked has been getting rid of the fieldset elements all together, but then there's no semantic relationship between the buttons and the questions, which I know is important for screenreaders. I'm sure I could also get rid of the numbering all together, but I don't want to. I looked it up before I started writing this form and there was nothing to say that nesting elements in <li> was an issue.
I found this blog as a guide to styling <fieldset> but it didn't help me fix my issue.
Here's a fiddle that demonstrates my issue (Q1 and Q3 are demonstrating the effect I'm going for; Question 2 has the weird styling issue).
https://jsfiddle.net/ocfk23un/45/
Basically, I'd like a solution to this issue or I'd like to know why this is happening before I abandon using the fieldset.
You should keep using the HTML that you have as it is semantically correct.
You just need to need to add vertical-align: top; to your fieldset styles:
fieldset {
display: inline;
padding: 0;
border: 0;
vertical-align: top;
}
Related
I am tearing my hair out on this one and it seems I am probably not searching the right terms and the google results I get seems to be general layout type of questions.
I have some data that I wish to represent in a web page. There are some 20~30 fields of different data. If I were to do it with what I know, I would so something like this(total of 3 columns and 30 rows each field is different data):
<table>
<tr><td>Field1:</td><td><input id="dataforField1"></input></td><td>Field2:/td><td><input id="dataforfield2"></td></tr>
<tr><td>Field3:</td><td><input id="dataforField3"></input></td><td>Field4:/td><td><input id="dataforfield4"></td></tr>
</table>
However I have been reading lately that div is much preferred when presenting non-tabular data. So I attempted to do this:
<div style="float:left;">
<ul>
<li>Field1</li>
<li>Field2</li>
<li>Field3</li>
</ul>
</div>
<div style="float:left;">
<ul>
<li><input id="tag1...</li>
<li><input id="tag2...</li>
<li><input id="tag3...</li>
</ul>
</div>
but my field labels are not lining up with my data input elements. Field1 seems to match input1 horizontally. But when I get to field10, it is off by a lot. I tried it without ul and li and use br after each, but I can't seem to get them to line up.
Question:
How do I get them to match if I don't do table?
I need clarification on the word "tabular". If my data were a table, it would only ever going to have 1 row. When is it okay to use table?
What do people use to line things up when they are trying to implement similar things?
Edit:
I want Field1 to line up horizontally with input tag1 and so on.
Edit2:
Added a picture to show how things are not lining up. it would be the same without li.
I would generally suggest adopting a grid system for this purpose. There are many great ones. My favorite one for web development is Bootstrap's grid. Bootstrap as a framework is amazing as well.
I will also add a quote of my comment regarding this:
... It is really recommended to only use a table when you are actually
willing to show a real table with information in it. The old way of
presenting forms in tables to achieve alignment is just a no-no these
days. Grid systems do it better and they are more responsive.
However.
The disalignment was caused by loss of relativity between the text (labels) and the input fields. As the list goes longer, the proportions are losing. This is because the height of the text is not the same as the height of the input field.
CSS:
li {
height: 40px;
}
This makes sure all <li> elements will have the same height. Of course it's recommended to apply the style to a class and not directly to an element, but this is just for the sake of the solution.
CodePen: http://codepen.io/arielweinberger/pen/jqveoX
I haven't managed to re-produce what you said you are experiencing.
For labels and inputs you should use, you guessed it: labels and inputs. Put each pair under the same parent, make them inline-blocks with a fixed width and you're good to go. No need for external tools, this is as basic as it gets.
label {
margin-right: 10px;
width: 120px;
display: inline-block;
}
<div style="float:left;">
<ul>
<li><label>Field1</label><input/></li>
<li><label>Field2</label><input/></li>
<li><label>Field3</label><input/></li>
<li><label>Field4</label><input/></li>
<li><label>Field5</label><input/></li>
<li><label>Long Field Name</label><input/></li>
<li><label>Field6</label><input/></li>
<li><label>Field7</label><input/></li>
</ul>
</div>
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>
I've created a nice set of form elements in Photoshop and am looking to convert them into HTML and CSS. The simple input-text form will have a background image, as the field does not change in size. However, the text-area form will dynamically change size as the user types.
Normally, to build out this sort of style, I'd wrap the form field in divs, as such:
<div class = "textarea-top">
<div class = "textarea-bottom">
<textarea></textarea>
</div>
</div>
Or by using multiple background-images in one wrapping div:
<div class = "textarea">
<textarea></textarea>
</div>
Is there a better way to approach this? To restate, the field styles are advanced images that can be repeated (for the body of the field), and have styling for the top and bottom. The question is, what is the best practice in dealing with these advanced form styling?
I'm not entirely sure what you mean by "best practice", but one thing I'd improve are the semantics.
You could (should?) use <fieldset>'s instead of a, rather meaningless, <div>.
And you don't need to use two <div>'s around the textarea, or even multiple background images on a single <div> (which is a CSS3 property, and not widely-supported).
Instead, you should wrap the <textarea> in a <label> element, and nest your background-images as I've described below:
Try this:
<fieldset class="expandableInput">
<label>
Semantic text:
<textarea></textarea>
</label>
</fieldset>
Bonus: wrapping form elements in <label>'s like this, affords a larger click area, for the user to gain focus on the form element at hand. Just be wary of <select>'s, which doesn't play nice (even though it's valid HTML)
The CSS would be something like:
.expandableInput {background: url(/path/to/first/img);}
.expandableInput label {display: block; background: url(/path/to/second/img);}
.expandableInput textarea {display: block; margin-top: 3px; background: url(/path/to/third/img);}
Also;
For consistent looks on form elements, in every browser & platform, I can highly recommend Nathan Smith's Formalize CSS (it requires JS for HTML5 support in older browsers).
In this fiddle, you can see that the horizontal rule does not go all the way across (under the number). I want it to. I have tried using list-style-position:inside;, however this means that I cannot force the number to appear in the correct position (because of the floated left image). Is there an elegant way to do this using CSS, or do I have to resort to generating the numbering myself and then styling appropriately?
You seem to be well aware of the list-style-position property, so you should know why the horizontal rule will not span all the way under the bullet/number. The list has a padding on the left, pushing the list elements to the right. Their contents won't go out of their space :).
Here's how I got over the issue: http://jsfiddle.net/J4b6Y/14/
[EDIT]
Fix for webkit browsers: http://jsfiddle.net/J4b6Y/16/
[EDIT2]
Works in all browsers AND has valid HTML o_O http://jsfiddle.net/J4b6Y/37/
[EDIT3]
OK, here's another one... http://jsfiddle.net/J4b6Y/39/
UPDATE 4
Seems like Update 3 worked well on webkit but not FF... so it's time to use real CSS power.
http://jsfiddle.net/J4b6Y/122/
UPDATE 3
Now what about this
http://jsfiddle.net/J4b6Y/105/
UPDATE 2
http://jsfiddle.net/J4b6Y/48/
UPDATE
Try this if it works for you
http://jsfiddle.net/J4b6Y/33/
I would suggest that you remove the hr tag and the floating image properties.
If you cannot set the image with css background, you can do the following:
HTML
<li>
<img src="" alt="test"/>
<p>Test</p>
</li>
CSS
li{
border-bottom:1px solid black;
list-style-position:inside;
}
li p{
display:inline-block;
}
Also, if you can remove the p tag, you will save few bites.
From the other answers to the question, it would seem that whilst there are ways of accomplishing this with CSS, there isn't an elegant way. As such, my prefered solution is to generate the numbering in the HTML and style appropriately. This can be trivial to do if the page is generated as a result of server side scripting.
I shall keep an eye out for more elegant ways of solving this with CSS and update this question if I find any.