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/
Related
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;
}
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>.
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).
I want to prevent line breaks between two forms I have.
So basically:
<form action="...">
<input type="submit" />
</form>
LINE BREAK HERE
<form action="...">
<input type="submit" />
</form>
I want to remove the line break. I want the input buttons to be on the same line, like a menu.
form {
display: inline;
}
I think this is the correct solution:
form { display: inline-block; }
The inline-block value is used for the purpose of laying out native block-level elements inline. Those elements will still remain blocks.
Changing the model for an element from block to inline is a radical move because it may mess things up depending on what the contents of the element are.
For this particular issue, using inline-block is the way to go.
This is an old thread, so I probably am not helping anyone, but here is my suggestion. Many programmers avoid tables and therefore do not like my method, but I solve this problem as follows:
<table><tr><td><form></form></td><td><form></form></td></tr></table>
Or:
form {
float: left;
margin-right: 5px;
}
If display:inline isn't working, it might be because a parent element has a width that is too small to hold both next to each other, and that can cause the form elements to break onto separate lines. Try adding this rule to the style for the container that holds the two forms:
white-space: nowrap;
This only worked for me when I put < form style="display: inline-block;"/> directly into the html. When I tried putting it into the style sheet:
.form
{display: inline-block;}
it didn't work. I had to put it into the html.