I would like to vertically align a text input field with the adjacent text, namely, with a heading that precedes it and a radio button that follows it (all styled with display: inline). Here is an image of what I would like to see:
Now, without a vertical-align property on the input field, I get the following:
I.e., the input field is lower than the adjacent text. Playing around with the possible values of vertical-align on the input field, I realized that vertical-align: super gives me what I want (i.e, what can be seen in the first image). But I do not understand why it gives me what I want. I would have expected that vertical-align: baseline or vertical-align: text-bottom would do what I need. So my question is this: Why does vertical-align: super produce the result that it does? Is it a coincidence that it gives me what I want (i.e., a workaround rather than the solution)? If so, what would be the proper solution?
Here is my HTML and CSS:
h1,
form,
div.search {
display: inline;
}
input#search_string {
vertical-align: super;
}
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h1>Heading</h1>
<form>
<div class="search">
<input type="text" id="search_string" />
<input type="radio" id="option" />
<label for="option">Some option</label>
</div>
</form>
</body>
</html>
The default setting for vertical-align is indeed "baseline", and it also works that way in your example. What you are forgetting is that the baseline alignment doesn't align the bottom borderline of the input box, but the baseline of the text that is inside that box. If you write something in there, you'll see it. (BTW, it's the same if you create a div with a border and text inside it.)
In the following snippet (which is almost identical to your code except that the alignment is not defined , i.e. default, i.e. "baseline") I added a value text to the input tag, so here you see the baseline alignment.
h1,
form,
div.search {
display: inline;
}
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h1>Heading</h1>
<form>
<div class="search">
<input type="text" id="search_string" value="here's some text" />
<input type="radio" id="option" />
<label for="option">Some option</label>
</div>
</form>
</body>
</html>
And I would say that YES, it's a coincidence that the super setting gives you something so close to the desired result that you see it as correct. super actually just means that the element is "raised" (sorry, i don't know the English word, but its like the number "2" in "three to the power of two").
I guess the safest way to achieve what you want would be to apply position: relative; to that input field, and a bottom setting to offset it from the default alignment. If you use the em unit in that (as I did below), it's relative to the font size, but to find an adequate value will still be a matter of trial and error:
h1,
form,
div.search {
display: inline;
}
#search_string {
position: relative;
bottom: 0.3em;
}
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h1>Heading</h1>
<form>
<div class="search">
<input type="text" id="search_string" />
<input type="radio" id="option" />
<label for="option">Some option</label>
</div>
</form>
</body>
</html>
Related
Trying with the below code but not getting exact output.
Can someone please help me here?
<head>
<title>question3</title>
</head>
<body>
<form>
name:<input type="text" name="hjcg"><p style="text-align: right">jgdfiuhio hjgiofhuorgfo gfd7uyte8u7tr98gt</p>
username::<input type="text" name="hjcg"><span style="text-align: right">hjgdfiuhio hjgiofhuorgfo gfd7uyte8u7tr98gt</span>
</body>
</html>
<p> tags are block level elements which makes them full width on a new line.
To make them appear on the same line as other elements, you can style them as inline or inline-block elements or use elements that are inline like <span>
To make elements appear on the next line you can use <div> tags which are block level elements by default (which you can change too using css)
<html>
<head>
<title>question3</title>
</head>
<body>
<form>
<div>
name:<input type="text" name="hjcg">
<span style="text-align: right">jgdfiuhio hjgiofhuorgfo gfd7uyte8u7tr98gt</span>
</div>
<div>
username:<input type="text" name="hjcg">
<span style="text-align: right">hjgdfiuhio hjgiofhuorgfo gfd7uyte8u7tr98gt</span>
</div>
</form>
</body>
</html>
Using Flex should fix your issue, but you should definitely consider using an external css file.
You can add it to your html page with:
<link href="your_style_file.css" rel="stylesheet">
then you could try:
form{
display: flex;
}
or even better, giving your form a class or an id like
<form id="my-form">
or
<form class="these-forms">
and then
#my-form{
display: flex;
}
or
.these-forms{
display: flex;
}
Please check FlexBoxFroggy if you want to learn Flex basics in minutes.
What you are doing actually with text-align is align text within its container.
What you want in aligning items inside the form. Displaying the form as Flex will help you do that.
I'm not good in css and not able to quick fix this issue.
I have the following html, css code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>temp</title>
<meta name="generator" content="Studio 3 http://aptana.com/">
<meta name="author" content="Subhranath Chunder">
<!-- Date: 2011-08-19 -->
<style type="text/css">
div {
width:400px;
}
p, input {
display:inline-block;
height:80px;
}
ul.error-list, li {
display:inline;
}
</style>
</head>
<body>
<div>
<p><input type="text" value="Name" name="name" /></p><ul class="error-list"><li>Error 1</li></ul>
<p><input type="text" value="Email" name="email" /></p><ul class="error-list"><li>Error 1</li></ul>
<p><textarea name="address" />Address</textarea></p><ul class="error-list"><li>Error 1</li></ul>
</div>
</body>
</html>
The first two error messages corresponding to the first two input elements is getting vertically centered. But, for the textarea element, the error message is vertically at the bottom.
If I change the last element to input type element, then it gets vertically centered. But, I need the last element to be of textarea type.
Can anyone fix the css, and give an explanation of why it's behaving as such.
Try this.
<style type="text/css">
div {
width:400px;
}
p, input, textarea {
display:inline-block;
height:80px;
}
ul.error-list, li {
display:inline;
}
textarea {
vertical-align:middle;
}
</style>
As for why this happens: input and textarea are different elements, and they behave in different ways. Possibly because input only takes one line of text, and the error message is by default aligned to the bottom line of text, for inputs it looks as you want it to. But textarea takes many lines of text, so the error message aligns to the bottom of the element, rather than the bottom of the text in the element.
I'm trying to reduce the amount of html markup related to presentation in my front end code. In a form I'm currently working on, I want to have 2 column of form fields. One way that will definitely do what I want is this:
<html>
<head>
<style>
body {width:400px;}
.col {width:200px; height: 100px; float:left; display:block;}
label, input {display:block;}
</style>
</head>
<body>
<div class="col">
<label>Field1:</label>
<input>
</div>
<div class="col">
<label>Field2:</label>
<input>
</div>
</body>
</html>
I want to achieve the same results when rendered in browser WITHOUT the div tags in the mark up. So I did something like this:
<html>
<head>
<style>
body {width:400px;}
label,input {width:200px; height: 30px; float:left; display:block;}
</style>
</head>
<body>
<label>Field1:</label>
<label>Field2:</label>
<input>
<input>
</body>
</html>
This is close, but I want the <label> markup tag to appear before each <input> markup tag in the code like so:
<label>field1</label>
<input>
<label>field2</label>
<input>
But problem here is that I can't think of maintainable css code that will make the label appear on top of each input field. Is there a good way to make both the mark up and the rendered result appear the way I want to?
One solution is to put the input inside the label..
<label>Field1:<input></label>
<label>Field2:<input></label>
then example CSS..
label {width:200px; height: 30px; display:inline-block;}
input {display: block;}
or
label,input {width:200px; height: 30px; display:inline-block;}
Seem's hacky, but this works.
http://jsfiddle.net/pxfunc/VCaMe/1/
using class="col1" or class="col2"...
HTML:
<form>
<label for="i1" class="col1">Label 1</label>
<input id="i1" class="col1" type="text" value="Input 1" />
<label for="i2" class="col2">Label 2</label>
<input id="i2" class="col2" type="text" value="Input 2" />
</form>
CSS:
form {width:600px;background-color:#eee;overflow:hidden;}
.col1 {display:block;float:left;line-height:30px;width:301px;height:30px;background-color:#f00;border:0;}
.col2 {position:relative;top:-30px;display:block;float:right;line-height:30px;width:299px;height:30px;background-color:#ff0;border:0;}
That said I still agree with the first comment under the question, seems like over-thinking a solution that could use div's or some kind of <label> & <input> wrapper
I have two <fieldset>s inside a single div (nothing else), that are positioned next to eachother (positon: absolute, div is set to relative).
Is there any way to make these fieldsets both the same height without setting a fixed height?
I have some idea that maybe I can make both have a max height of the parent, and a min height of auto?
Also, would it then be possible to make the content of the fieldsets position centred vertically?
I'm not concerned if it works with IE, but needs to work on Firefox and Webkit, and if possible Opera.
Thanks
Edit: You can see the page here: https://dl.dropbox.com/u/2318402/SO/login.html
You can put them in a parent container like a table or div, and have the two children be at height=100%.
The only other two options are the ones you didn't want, at a fixed height like height=59px, or you can do it via javascript.
For the vertical positioning, you can stick them in a parent container like a table or div and then slap on there a vertical-align:center
I'm a bit late but you can always use tables (don't like those either but well.. table works in this situation).
<table>
<tr>
<td style="vertical-align:top">
<fieldset></fieldset>
</td>
<td style="vertical-align:top">
<fieldset></fieldset>
</td>
</tr>
</table>
The following works, without using js/jQuery, but does rely on -in this example- using a css3 psuedo-element :nth-of-type(odd), though this could be replaced by applying a css class to the odd-numbered fieldsets.
It also relies on using height: 100% for the fieldsets, which itself is dependant upon the parent element (in this case the form) having a specified height. If that's a problem then, for the purpose of demonstration, I've used overflow-y: auto; on the fieldsets to restrict their dimensions to that of their parent, but with a scroll behaviour to reveal the overflow.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://davidrhysthomas.co.uk/mindez/css/stylesheet.css" />
<style type="text/css" media="all">
form {
width: 50%;
height: 200px;
}
fieldset {
width: 30%;
height: 100%;
margin: 0 1em 0 0;
padding: 0.5em 1em;
overflow-y: auto;
}
fieldset:nth-of-type(odd)
{
float: left;
}
label {
display: inline-block;
width: 30%;
}
input[type=text]
{
display: inline-block;
width: 50%;
}
</style>
</head>
<body>
<div id="wrap">
<form enctype="form/multipart" method="post" action="">
<fieldset>
<label for="one">Label 1</label><input id="one" name="one" type="text" />
<label for="two">Label 2</label><input id="two" name="two" type="text" />
</fieldset>
<fieldset>
<label for="three">Label 3</label><input id="three" name="three" type="text" />
<label for="four">Label 4</label><input id="four" name="four" type="text" />
<label for="five">Label 5</label><input id="five" name="five" type="text" />
<label for="six">Label 6</label><input id="six" name="six" type="text" />
</fieldset>
</form>
</div>
</body>
</html>
Demo online at: http://www.davidrhysthomas.co.uk/so/fieldsets.html.
Obviously, if there's any questions or problems feel free to raise them in the comments and I'll try my best to help you out. =)
I have the following HTML
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<style>
.box
{
border:solid black 1px;
padding:0px;
margin:0px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<input class="box" style="width:300px;" /><br />
<input class="box" style="width:150px;" />
<input class="box" style="width:150px;" /><br />
<input class="box" style="width:100px;" />
<input class="box" style="width:100px;" />
<input class="box" style="width:100px;" />
</form>
</body>
</html>
The idea is that the textboxes should finish pixel perfect on the right hand side.
I will eventually add spacing on rows 2 and 3 enlarging the widths to compensate, but for the moment I would like to get this simple sample to render.
So how can I remove the margins of these textboxes such that the align properly?
They're not lining up because of the whitespace between them.
If you were to remove all the newlines and tabs between the <input> elements, it would display as you want.
I found adding float: left; to .box did what you wanted.
.box {
padding:0px;
margin:0px;
float: left;
}
Are you talking about right justifying all the textboxes?
If so, that's not a margin question. That's simply putting the textboxes in a containing element. Perhaps a and then set the text-align: right; css style on the div.
The border is not included in the width, so a box with a 1px border and a width of 150px will actually be 152 px wide.