Input not being fully contained by parent - html

I've got this search form: http://jsfiddle.net/1emsaoq1/2/
<div class="search_language">
<div class="menu_search_container">
<form action="/search">
<input autocomplete="off" onkeydown="if (event.keyCode == 13) { this.form.submit(); return false; }" id="search_field" name="q" placeholder="Rechercher..." type="text">
</form>
</div>
</div>
The result I'm trying to get is having the input vertically aligned inside the red div. When I inspect the input and parents, I can clearly see that it's parent is well vertically aligned inside the red div but not the input. What is wrong here?

Add vertical-align: top to the #search_field element:
Updated Example
.menu_search_container form #search_field {
/* other styles.. */
vertical-align: top;
}
By default, the input element's display is inline-block. In addition, the default value of vertical-align is baseline. Changing the value to top essentially corrects this behavior you are seeing.

The problem comes from your line-height into your .search_langage, set it to zero or take it off, and your problem will be fix.

Related

Input and button inline

Is there a multi-browser way to inline input and button? See http://jsfiddle.net/wf592/. Input appears below button. Simple margin doesn't help:
<div>
<input type="text" style="margin-top:-50px;" /><button style="height:25px; width:20px" />
</div>
This error showed up when I used jQueryUI calendar: calendar button is automatically inserted after the input tag. So I don't want to change markup with more divs.
Demo Fiddle
Add:
input, button{
vertical-align:middle;
}
More on vertical-align from MDN:
The vertical-align CSS property specifies the vertical alignment of an
inline or table-cell box.

CSS - dynamic length text input field and submit button in one row

I have:
<div>
<input id="input" type="text" />
<button id="submit">submit</button>
</div>
which gives me this
If I expand the main panel by dragging it with the mouse cursor the width the new space is empty:
I want that the <input type="text" /> fills the whole horizontal new space but that the submit button remains in the same row.
I tired to use <input style="width:100%" type="text"/> but then it fills the whole row and the submit button appears in the next row:
I also tried a table as mentioned in that thread:
Liquid textfield width
The result was that it works "a little bit" the submit button overlaps the input text and a certain space on the right always remains empty:
Can somebody help me with an code idea for fill the whole space except the (static) size of the submit button.
Thanks!
The "table" method you linked to will work, but you're missing one crucial property on your input elements: box-sizing.
http://cssdeck.com/labs/sbffl3l2
<div class="foo">
<div class="bar"><input type="text"></div>
<div class="bar"><input type="submit"></div>
</div>
.foo {
display: table;
width: 100%;
}
.bar {
display: table-cell;
}
.bar:first-child, input[type="text"] {
width: 100%;
}
input {
box-sizing: border-box; /* this is the key */
}
Prefixes may be required: http://caniuse.com/#feat=css3-boxsizing
I believe you can do this:
<input type="text" style="width:calc(100%- widthofbuttoninpixels);" />
It's not advisable to do inline styles though.
Edit: Make sure you also define a fixed width for the button
Why not give width of 70% to input and 20% to button?

Center text vertically next to a one row textarea?

I want the text that sits next to a one row textarea to be centered vertically with the textarea.
This is the default behavior if I put text next to an input of type="text".
Id like to stick with the single row textarea rather than an input here because this field is there for the user to paste a fair amount of pre formatted data into. The user wont normally care what the data says or need to see it unless the program finds a problem. If a problem is found an error is shown, at which point its helpful if the user can drag out the text area to view the data and research the issue.
My Code:
<tr>
<td class="vert" > New PNR Info
<textarea rows="1" cols="20" name="origInfo1" id="origInfo1" style="overflow:hidden"> </textarea></td>
<td align="center">Change Fee
<input type="text" size="4" id="fee"name="fee"></td>
</tr>
Ive Tried:
css like this:
.vert {
vertical-align: middle;
}
and this vertical-align: top;
and wraping the two in a p tag like this
<p>New PNR Info<textarea rows="1" cols="20" name="origInfo1" id="origInfo1" style="overflow:hidden"> </textarea></p>
to no avail.
If my question is not clear maybe a screenshot will help. I want the offending text by the red arrow to be cetered like the text by the green arrow.
Apply the vertical alignment to all elements like this
Demo
<p class="whatever">
<label for="alignme">Label Text</label>
<textarea id="alignme"></textarea>
</p>
.whatever * {
vertical-align: middle;
}
.whatever * is equivalent to
.whatever label, .whatever textarea {
vertical-align: middle;
}
It doesn't seem logical at first, but the vertical-align property needs to go on the taller element:
http://jsfiddle.net/N5NuA/
textarea {
vertical-align: middle;
}
I believe the problem is you are setting the parent (td or p) to align to the top and since your textarea is inside that element it aligns according to parent, not the text.
What I think will work is setting the textarea vertical alignment.
<textarea style="vertical-alignment:middle">
If that does not work, also change the parent element to middle. Also try text-top or text-bottom for the text-area if those changes do not work also.

How align div to a form field?

Currently I have the following HTML code.
<div class="field">
<label>E-mail address: </label>
<input type="text" id="email" name='email' style="width:200px;"></input>
<span class='warning' id="emailWarning" > </span>
<div class="tip" id="emailTip"></div>
</div>
However, I want the text in the div element (class = 'tip') to be aligned with the start of the form's text field.
How should I do this using HTML and CSS?
Here's what is looks like now:
http://jsfiddle.net/pEJMD/embedded/result/
This would be a quick workaround. You should put both the .tip div and the input into a wrapping div.
You can set a fixed size to the label. Than push the div to the right with the size of the label:
<div class="field">
<label style="width:100px;">E-mail address: </label>
<input type="text" id="email" name='email' style="width:200px;"></input>
<span class='warning' id="emailWarning" > </span>
<div class="tip" id="emailTip" style="margin-left:100px;">
The quick brown fox jumps over the lazy dog
</div>
</div>
And the result.
Well, either you use a <table>, putting in one cell the <label> and in the other the <input>, or you use fixed widths/margins or paddings.
Solution 1: Table
Table solution
In this solution you use a table to hold the form. On column is for labels, the other column is for inputs. In this case you will have the tip in the input column, and it will align automatically with the input.
This has the pro to be working for flexible dimensions of your label/inputs. And tables are not always evil. Just remember that, if you want to keep your label aligned with the input, add a vertical-align:top to your CSS.
Solution 2: Fixed width
Fixed-width solution
In this solution you give a fixed width to your label, and move the .tip div using either margin, padding or left.
This will hold your layout in place, so be careful of extremely long labels!
You don't need an explicit width at all, nor tables; just use CSS tables (see my answer to this related question):
CSS
form { display: table; }
p { display: table-row; }
label { display: table-cell; }
input { display: table-cell; }
HTML
<form>
<p>
<label for="a">Short label:</label>
<input id="a" type="text">
</p>
<p>
<label for="b">Very very very long label:</label>
<input id="b" type="text">
</p>
</form>
Here's a JSFiddle: http://jsfiddle.net/DaS39/1/
And if you need the labels right-aligned, just add text-align: right to the labels: http://jsfiddle.net/DaS39/
Use margin-left:
Change:
<div class="tip" id="emailTip">
To:
<div class="tip" id="emailTip" style="margin-left:95px;">
DEMO
Learn more about the CSS margin property here.
You can give a height to the label, give a width to the parent div and float your tip. See the demo: http://jsfiddle.net/pEJMD/4/
Here you go: http://jsfiddle.net/4sJ2t/
You just need to give your label a fixed width, and then your tip a left margin
label {width:100px; text-align:right; margin-right:5px;}
.tip {margin-left:105px; padding: 5px 0;}

unable to align the search bar on the right side of the page

I want to align the search bar on the extreme right of the page. To do this,I wrote the following :
<form method="get" action="#">
<input type="search" name="q" style="text-align:right" />
</form>
But it doesn't align the search bar on the right. Why is that ?
<form method="get" action="#" style="float:right">
Although, you should not use inline styling. Try to use external styling as much as possible.
What float does is move the affected element to one side of the screen. All the following elements will align themselves horizontally with the floated element.
Let's say we have 2 elements like this.
|| Element1 ||
|| Element2 ||
If I apply float:left on Element1, then the output will look like this.
|| Element1 | Element2 ||
If I apply float:right instead, then the output will be reversed.
|| Element2 | Element1 ||
In a nutshell, float does exactly what it says. It floats an element to the edge of the screen, and makes it the edge for the following elements.
PS : I wrote the edge of the screen for simplicity's sake. You can apply float in a hierarchical fashion as well. In that case, the edge of the parent element becomes the edge to align with.
text-align does just that, it aligns the text in an element to the right. In the case of an input box, it places the cursor to the right of the input field. You want to float the input box to the right, which places the input box to the far right of its parent element (in this case the form):
HTML
<form method="get" action="#">
<input placeholder="Search" type="search" name="q" id="search-box" />
</form>
CSS
form{
background-color: #000;
overflow: auto;
height: 50px;
padding:5px 5px 0;
}
#search-box{
float:right;
}
Here's the jsFiddle