QUESTION 1:
Why do the following textarea and text input have different vertical text alignment if they both have the same font-size, line-height, height, padding ?
QUESTION 1.1
How can I make the textarea have the same vertical alignment as the input ?
.myTextarea {
display: block;
font-family: Arial;
font-size: 14px;
line-height: 21px;
height: 32px;
padding: 2px 5px;
resize: none;
}
.myInput {
display: block;
font-family: Arial;
font-size: 14px;
line-height: 21px;
height: 32px;
padding: 2px 5px;
}
.myDiv {
margin-top: 20px;
margin-bottom: 5px;
font-weight: bold;
}
<div>
<div class="myDiv">Textarea</div>
<textarea class="myTextarea" rows="1">12345</textarea>
<div class="myDiv">Input</div>
<input class="myInput" type="text" value="12345"/>
</div>
Textareas are for multiline texts while inputs are made for single line.
That's why line height won't have effect on input as it's considered to be equal to the input's height.
You can remove line height on your input since it has no effect on it.
Beside you should have the same line height as height for your textarea to reproduce the same effect than the input.
.myTextarea {
display: block;
font-family: Arial;
font-size: 14px;
line-height: 32px;
height: 32px;
padding: 2px 5px;
resize: none;
}
.myInput {
display: block;
font-family: Arial;
font-size: 14px;
height: 32px;
padding: 2px 5px;
}
.myDiv {
margin-top: 20px;
margin-bottom: 5px;
font-weight: bold;
}
<div>
<div class="myDiv">Textarea</div>
<textarea class="myTextarea" rows="1">12345</textarea>
<div class="myDiv">Input</div>
<input class="myInput" type="text" value="12345"/>
</div>
Related
I would like to know why the span and input have different padding even if I set it the same. It behaves the same in Firefox and Chrome. Which CSS rule affects this?
span, input {
font-family: sans-serif;
font-size: 11pt;
font-weight: 400;
line-height: 16pt;
padding: 15px;
border: 1px solid black;
}
<span>Some text</span>
<input type="text">
line-height doesn't affect span because, by default, it is "inline" and input is inline-block. So if you set for span display: inline-block it should work
span, input {
font-family: sans-serif;
font-size: 11pt;
font-weight: 400;
line-height: 16pt;
padding: 15px;
border: 1px solid black;
display: inline-block; /* << here */
}
<span>Some text</span>
<input type="text">
I want to keep dollar symbol at beginning of text box. I am able to achieve this using the below code.
It works find in chrome and IE. The dollar symbol goes and sits next to label in firefox. How do i fix this problem? And for aligning the dollar symbol inline with text i use top 2px. Is there a way to better the css code.
.input-symbol-dollar:after {
color: #37424a !important;
content: "$";
font-size: 16px !important;
font-weight: 400;
left: 10px;
position: absolute;
top: 2px;
}
.input-symbol-dollar {
position: relative;
}
.abc-input {
border: 2px solid #c9c9c9;
box-shadow: none;
color: #6b6f72;
font-size: 0.9375rem;
text-transform: none;
width: 100%;
color: #37424a !important;
font-family: "Roboto Regular", sans-serif;
font-size: 16px !important;
font-weight: 400;
height: 42px !important;
padding-left: 17px !important;
display: inline-block !important;
}
label {
color: #37424a;
display: inline-block;
font-family: "Roboto Bold", sans-serif;
font-size: 15px;
font-weight: 700;
margin-bottom: 8px;
}
<label for="abcInput" class="abc-label">lable filed </label>
<span class="input-symbol-dollar">
<input type="text" id="abcInput" tabindex="0" name="abc" class="abc-input " placeholder="0.00"></span>
https://jsfiddle.net/8jdek3zt/5/
It looks like there's a lot of unnecessary code in your example.
Here's a simplified version that works on Chrome, Firefox and IE (not tested in Safari).
span {
display: inline-block;
position: relative;
}
input {
border: 2px solid #c9c9c9;
box-shadow: none;
font-family: "Roboto Regular", sans-serif;
font-size: 1.5em;
height: 42px;
padding-left: 20px;
}
span::before {
content: "$";
font-family: "Roboto Regular", sans-serif;
font-size: 1.5em;
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
}
<span>
<input placeholder="0.00">
</span>
Here's an explanation of the vertical centering method for the pseudo-element:
Element will not stay centered, especially when re-sizing screen
The reason why this is happening is because the span is an inline element, so it's positioning isn't calculated as you are expecting it to be. The easiest solution would be to set display: block on the <span class="input-symbol-dollar">
As for positioning it in a cleaner way, you could consider making the symbol display block as well, with a height 100% of the input and set the line-height equal to the input height. I've updated your fiddle but the relevant code is below:
https://jsfiddle.net/chzk1qgm/1/
.input-symbol-dollar {
position: relative;
display: block;
}
.input-symbol-dollar:after {
color: #37424a !important;
content: "$";
font-size: 16px !important;
font-weight: 400;
position: absolute;
display: block;
height: 100%;
top: 0;
left: 10px;
line-height: 46px; // height of input + 4px for input border
}
Alternatively, you could just change the span to a div, as a div is a block level element by default. The rest of the styles would remain the same though.
try putting span in div.
<label for="abcInput" class="abc-label">lable filed </label>
<div>
<span class="input-symbol-dollar">
<input type="text" id="abcInput" tabindex="0" name="abc" class="abc-input " placeholder="0.000">
</span>
</div>
.custom-text{
border: 2px solid #DDD;
width: 100%;
padding: 5px;
}
<div class="custom-text">
<span>$</span>
<input style="border: none;"/>
</div>
When the placeholder's font-size is different to input font-size, the placeholder is misaligned vertically in Chrome (in Firefox it works fine).
Screenshot:
Here is the HTML / CSS:
body {
padding: 20px;
}
input {
padding: 0 10px;
color: green;
font-size: 30px;
height: 57px
}
input::-webkit-input-placeholder {
color: blue;
font-size: 14px;
line-height: 57px;
}
input::-moz-placeholder {
color: blue;
font-size: 14px;
}
<input type="text" value="" placeholder="Placeholder text">
Also available as a jsFiddle.
This seems like buggy behaviour by Chrome, the placeholder is aligned vertically with the baseline of the larger font size in the input.
In order to correctly vertically center the smaller placeholder text in Chrome, you can use position: relative and top: -5px as a workaround.
Workaround
body {
padding: 20px;
}
input {
padding: 0 10px;
color: green;
font-size: 30px;
height: 57px;
}
input::-webkit-input-placeholder {
color: blue;
font-size: 14px;
position: relative;
top: -5px;
}
input::-moz-placeholder {
color: blue;
font-size: 14px;
}
<input type="text" value="" placeholder="Placeholder text">
I'm using a <ul> with css display: inline; set to use as a toolbar/menu at the top of my page like this:
As you can see, the text vertically aligns perfectly, however the img on the left is too high, and the input box on the right is slightly low. I'm struggling to move them so they are perfectly vertically aligned.
Below is my CSS:
.mynav {
font-weight: 300;
border: 1px solid #ccc;
border-width: 1px 0;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
background-color: #0067b1;
}
.mynav li {
display: inline;
align-items: center;
vertical-align:middle;
line-height:35px;
}
.mynav a {
color: white;
display: inline-block;
padding: 15px;
font-size: 14pt;
text-decoration: none;
}
.mynav input {
margin-left: 25px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-style: italic;
-moz-border-radius: 10px;
border-radius: 10px;
border: none;
padding: 5px;
width: 200px;
height: 25px;
margin-top: 0px;
}
.mynav i
{
font-weight: 300;
color: white;
font-size: 24px;
margin-left: 15px;
}
And my HTML (if needed):
<ul class="mynav">
<li><img src="http://www.advancegroupholdings.com.au/my_logo_nav.png" style="width: 100px; height:25px; padding-right:25px;" /></li>
<li>My Jobs</li>
<li>Obtain a Quote</li>
<li>Submit New Instruction</li>
<li>Settings</li>
<li>Help</li>
<li><input type="text" placeholder="Enter Your Ref or Job Number"/><i class="fa fa-search"></i></li>
</ul>
As for the input box, it has a padding of 5 which I have tried to remove with no luck. I have also set margin-top: 0px on the input, still no luck.
As for the logo, I'm also quite stumped. I've tried adding margin-top: 5px, but it's not working.
I also have found both these questions on StackOverflow:
<ul> horizontal nav bar... vertically-align element
css - verticaly align horizontal li
The first had no effect and the second wanted to change the CSS to display: flex, which for me gets rid of the horizontal bar, doesn't it?
Can anyone help me get the logo and the input box (and the magnifying glass) vertically centered? Thank you in advance!
Plunker here
I created a small bootstrap example for what you require. Different to what you have but give the required output more or less. Hopefully you can continue from here if this solution works for you.
HTML
<div class="col-md-2"><img src="http://www.advancegroupholdings.com.au/my_logo_nav.png" /></div>
<div class="col-md-1">My Jobs</div>
<div class="col-md-2">Obtain a Quote</div>
<div class="col-md-2">Submit a New Instruction</div>
<div class="col-md-1">Settings</div>
<div class="col-md-1">Help</div>
<div class="col-md-3"><input class="inputHeight" type="text" placeholder="Enter Your Ref or Job Number"/><i class="fa fa-search"></i></div>
</div>
</div>
CSS
.navbar {
width:80%;
font-weight: 300;
border: 1px solid #ccc;
border-width: 1px 0;
margin: 0;
padding: 0;
text-align: center;
background-color: #0067b1;
vertical-align:middle;
line-height:50px;
}
.inputHeight {
margin-left: 25px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-style: italic;
-moz-border-radius: 10px;
border-radius: 10px;
border: none;
padding: 5px;
width: 200px;
height: 25px;
margin-top: 0px;
}
Plunker Example
Adding next two rules to your image will center it correctly.
display: inline-block;
vertical-align: sub; /* or text-bottom */
As for the input , it looks correctly centered to me.
In your specific example it's enough to add vertical-align:middle; to <img> and to <a>, <i> elements! Also I'd recommend to have <li> elements as inline-block, not inline for more flexibility.
In general case, to align vertically the image height must be equal as
other element's line-height in the line and vertical-align:middle has to be set.
If image height is 25px then set:
.mynav li, .mynav i {
vertical-align:middle;
line-height:25px;
}
img {
vertical-align:middle;
height: 25px;
line-height:25px;
}
Here you go: https://plnkr.co/edit/Xf3uvvjuqykQMjnhVxes?p=preview
There is some padding from the top to the Keep me logged in text.
How can I remove the padding and make it look like this ?
HTML:
<div class="login-radio">
<input type="radio">Keep me logged in
</div>
CSS:
.login-radio {
font-size: 12px;
position: fixed;
left:60%;
top: 7%;
color: white;
font-family: arial;
}
Try this:
HTML:
<div>
<div class="email">
<input type="email" />
</div>
<div class="checkbox">
<input type="checkbox" />
<span>Keep me logged in</span>
</div>
</div>
CSS:
.email input {
float: left;
margin-top: 5px;
margin-left: 5px;
font-family: arial, sans-serif;
font-size: 12px;
outline: none;
}
.checkbox input {
float: left;
margin-top: 10px;
margin-left: 5px;
color: #000;
clear: both;
}
.checkbox span {
float: left;
margin-top: 7px;
margin-left: 2px;
font-family: arial, sans-serif;
}
Here's the fiddle.
Regards, Milan.
Try to use this:
HTML
<div class="login-radio radio">
<input type="radio" class="radio">
<label>Keep me logged in </label>
</div>
CSS
.login-radio, .login-checkbox, .radio, .checkbox {
display: block;
min-height: 20px;
margin-top: 10px;
margin-bottom: 0px;
padding: 0px;
margin-left: -20px;
}
input[type=checkbox] {
box-sizing: border-box;
margin: 4px 0 0;
line-height: normal;
}
.radio label, .checkbox label {
display: inline;
cursor: pointer;
}
Is this is what you want exactly the position of your radio button to be or something else
.login-radio input {
vertical-align:top;margin-top:1px;
}
http://jsfiddle.net/we9x6k3j/1/
3 steps that will fix your problem:
Remove the default margin and padding that the browser applies to the <input> by default.
Wrap the text in a <label>.
Apply vertical-align: middle to the <input> and the <label>.
Working Code Snippet:
.login-radio {
font-size: 12px;
position: fixed;
left:60%;
top: 7%;
color: black;
font-family: arial;
}
input{
margin: 0px;
padding: 0px;
}
input, label{
vertical-align: middle;
}
<div class="login-radio">
<input type="radio">
<label>Keep me logged in</label> <!-- wrap the text in a label -->
</div>
FIDDLE HERE
CSS:
.login{
width: 200px;
height:80px;
background-color: brown;
color: white;
}
.loginInput{
margin-left: 3%;
margin-top: 1%;
}
.loginRadio input{
margin-left: 3%;
vertical-align: top;
}
Key change is the vertical alignment of loginRadio input.