I have an input field:
<input type="text" placeholder="whatever">
with styles:
input {
margin: 0;
padding: 0 6px;
font-size: 19px;
line-height: 19px;
height: 36px;
width: 255px;
}
Problem is the line-height is not taking effect for the placeholder in webkit CHROME. so the text in the input field is aligned in an ugly way. Anyone else seen this and now how to fix it?
Thanks
Input placeholders don't seem to like pixel line-height values, but this will vertically centre it in the input:
::-webkit-input-placeholder { line-height: normal; }
Looking at your tags, I'm assuming you are writing something like...
<input type="text" placeholder="whatever">
Unfortunately, Chrome ties your hands when it comes to styling the placeholder, the selector looks like this...
input::-webkit-input-placeholder {}
You can find the styling options, gotchas and supported browsers in Styling the HTML Placeholder
It appears that removing your line-height declaration entirely works. It's worked for me in FF7, Chrome15 and Safari 5.1. Also looked good in IE9 and FF3.6 but does NOT look good in IE8.
I don't think I can fully replicate your problem, but perhaps you can fix it using padding: 7px 6px;.
Doing this should hopefully set your top and bottom padding to 7px which pretty much does a similar job as line-height. With different sizes (width/font-size) you should be able to choose the appropriate padding by calculating (height - fontsize) / 2 perhaps give or take a pixel or two for perfection.
Related
I've spent a few good hours debugging myself, and a few good hours researching but nothing seems to be solving my problem. I have a caption in my header that is supposed to be cut-off at the bottom, which looks fine in Safari and Chrome, but in Firefox it is positioned much higher:
First window: Firefox
Second window: Safari (chrome renders the same)
I spent about an hour and a half changing everything around in my CSS thinking it had to do with other elements around it, but made no progress. Finally I decided to make an extremely simplified version to see what the problem is:
First window: Firefox
Second window: Safari (chrome renders the same)
Same exact thing. I have a CSS reset applied so that is not the problem. I've tried setting the line-height, but that didn't fix it. I've tried every value for the CSS display property. Nothing is fixing this.
HTML/CSS for test example above:
<div class="test">
<h1>Test</h1>
</div>
.test {
margin: 0;
padding: 0;
width: 100%;
height: 185px;
line-height: 185px;
border: 1px solid red;
}
.test h1 {
font-size: 12em;
}
My website can be viewed at samrapdev.com.
Quick link to CSS stylesheet
In short, I need to figure out how to get both browsers to display the text at exactly the same height
Try and specify a font-family in your stylesheet though it's not pixel perfect
#header .youAreHere h1
{
...
line-height:1;
}
line-height must be set on h1, unless you have something like
* {line-height:inherit;}
Even if you take a webfont and define the line-height of your element you can have variations due to the line-heights of the other elements.
What works for me is to define the line-height of the body on the top of using a webfont.
Also do not forget to reset margins and paddings for all elements you're using. A good trick is to use a reset.css before your actual style sheet (you can find some at http://www.cssreset.com/)
body{
line-height: 1;
}
I have discovered an inconsistency in the way Chrome adds padding to span tags. When using a simple span tag with a small font-size and a text, the padding above and below is larger than in Internet explorer. When using a large font-size the padding is the same.
This can be tested with the following code/jsfiddle
<span>Testing A Text</span>
<span>Testing A Text</span>
body
{
font-family: Helvetica,Arial,"Sans Serif";
font-size: 10px;
}
span
{
border: 1px solid red;
}
span:last-child
{
font-size: 200%;
}
(Can be previewed here: http://jsfiddle.net/gR9em/5/)
Of course, this can be solved by conditional CSS or using different fonts but that is a thing I would like to avoid if possible. This might be "Arial" -related... However, could anyone explain this and perhaps provide a solution? Or is this a known browser CSS "bug"?
Example with image here:
I don't believe the issue is related to padding, but rather line-height.
Example with correct padding: http://jsfiddle.net/qh3aY/1/
Ideally you would set up the line-height on the <body> but I wanted to follow the OPs markup.
IIRC, <span> elements should always be inside another element like a <p>.
I have tested the jsFiddle again in Chrome and it seems like the padding below the text has disappeared and the padding above the text is less than it was when I posted this issue. Maybe something was updated in Chrome.
I guess the line-height should ideally not work differently between different browsers...
Lately i've been through a lot of times on a single situation problem:
I have a text input element in a web formulary, inside a bigger div with defined width.
Inside that bigger div, i'll put a span text like "Name: " and then i'll put the input.
I want the input to auto become as much as wider the space of the div that the span is not using.
The code would be something like this:
<div>
<span>Name:</span>
<input type="text" name="name" />
</div>
And the CSS:
div {
width: 200px;
display: block;
}
span {
display: inline-block;
font: 11px 'Lucida Sans', Verdana, Arial;
}
input {
height: 20px;
width: auto;
display: block;
}
I've been doing some research, but i seem unable to find a precise solution for this problem.
So far i've been skipping this problem by putting a inline style defining a different width for each element. But if i change the font, size, or whatever, it'll explode.
I don't like to build a fortress wall and leave it full of holes for snipers. That's why i'm looking for help :)
If you guys have any suggestion, solution or workaround way, I'd be glad to know. =D Thanks.
Semantically it's better to use label tags for this purpose:
<label>Name:</label>
Concerning your question, take a look at the CSS3 flexible box model: http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
Or if you prefer a video: http://www.youtube.com/watch?v=-OubGOxKa5I
At the time of writing, Mozilla and Webkit support this and there is a fallback for other browsers: https://github.com/doctyper/flexie
Sorry, but it's not possible with that markup. Actually the only way to do it is to shudder use tables (or display: table-cell, etc but that doesn't work in IE7 or earlier). It also generally looks better to have all the inputs aligned, don't you think?
Change display: block to display: inline for input and I think it should work.
Here is an example
http://jsfiddle.net/KYvzM/
I've seen this post already and tried everything I could to change the padding for my placeholder but alas, it seems it just doesn't want to cooperate.
Anyway, here is the code for the css. (EDIT: This is the generated css from sass)
#search {
margin-top: 1px;
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
#search form {
position: relative;
}
#search input {
padding: 0 10px 0 29px;
color: #555555;
border: none;
background: url('/images/bg_searchbar.png?1296191141') no-repeat;
width: 180px;
height: 29px;
overflow: hidden;
}
#search input:hover {
color: #00ccff;
background-position: 0px -32px;
}
And here's the simple html:
<div id="search">
<form>
<input type="text" value="" placeholder="Search..." name="q" autocomplete="off" class="">
</form>
<div id="jquery-live-search" style="display: block; position: absolute; top: 15px; width: 219px;">
<ul id="search-results" class="dropdown">
</ul>
</div>
</div>
Pretty simple? the placeholder is off for some reason but when you try to type in the input field, the text is the aligned. It seems that you can only change the color(for webkit) of the placeholder, but if I try to edit the padding of the containing input, it wrecks the design of the input! pulls out hair
Here are screenies of the placeholder and the input field with text input:
EDIT:
For now I have resorted to this jquery plugin.
It works right out of the box and it fixes my chrome's problem. I would still like to uncover what the problem is (if it has something to do with MY chrome or something)
I'm pretty sure it's not the styles since John Catterfeld reproduced it with no problems, so I'm hoping someone out there could still point me to the right direction as to why this is happening to me(my client's chrome as well. So this is probably native to Chrome/OSX if John is using windows)
I got the same issue.
I fixed it by removing line-height from my input. Check if there is some lineheight which is causing the problem
I had similar issue, my problem was with the side padding, and the solution was with, text-indent, I wasn't realize that text indent effect the placeholder side position.
input{
text-indent: 10px;
}
If you want to keep your line-height and force the placeholder to have the same, you can directly edit the placeholder CSS since the newer browser versions. That did the trick for me:
input::-webkit-input-placeholder { /* WebKit browsers */
line-height: 1.5em;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
line-height: 1.5em;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
line-height: 1.5em;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
line-height: 1.5em;
}
line-height: normal;
worked for me ;)
Angular Material
add in the placeholder if padding did not work - but not a recommended way
<input matInput type="text" placeholder=" Email">
Non Angular Material
Add padding to your input field, like below. Click Run Code Snippet to see demo
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container m-3 d-flex flex-column align-items-center justify-content-around" style="height:100px;">
<input type="text" class="pl-0" placeholder="Email with no Padding" style="width:240px;">
<input type="text" class="pl-3" placeholder="Email with 1 rem padding" style="width:240px;">
</div>
I had a problem, which appears just in internet explorer. Input field was styled
height:38px;
line-height:38px;
Unfortunately in IE the initial placeholder appears not at the correct position. But when I have clicked into the field and then left this field, the placeholder appeared on the right position.
My solution was to set:
line-height:normal;
Setting line-height: 0px; fixed it for me in Chrome
If you want move placeholder text right and leave the cursor on the blank space you need to add space(s) at the start of the placeholder attribute:
<input type="email" placeholder=" Your email" />
Removing the line-height indeed makes your text align with your placeholder-text, but it doesn't properly solve your problem since you need to adapt your design to this flaw (it's not a bug). Adding vertical-align won't do the deal either. I haven't tried in all browsers, but it doesn't work in Safari 5.1.4 for sure.
I have heard of a jQuery fix for this, that is not cross-browser placeholder support (jQuery.placeholder), but for styling placeholders, but I haven't found it yet.
In the meantime, you can resolve to the table on this page which shows different browser support for different styles.
Edit: Found the plugin! jquery.placeholder.min.js provides you with both full styling capabilities and cross-browser support into the bargain.
Remove line-height or set using padding...it's working in all browser
I've created a fiddle using your screenshot as a background image and stripping out the extra mark-up, and it seems to work fine
http://jsfiddle.net/fLdQG/2/ (webkit browser required)
Does this work for you? If not, can you update the fiddle with your exact mark-up and CSS?
I noticed the issue the moment I updated Chrome on os x to the latest stable release (9.0.597.94) so this is a Chrome bug and hopefully will be fixed.
I'm tempted not to even attempt to work around this and just wait for the fix. It'll just mean more work taking it out.
The placeholder is not affected by line-height and padding is inconsistent on browsers.
I have found another solution though.
VERTICAL-ALIGN. This is probably the only time it works but try that instead and cave many lines of CSS code.
I found the answer that remedied my frustrations regarding this on John Catterfeld's blog.
... Chrome (v20-30) implements almost all styles but with a major caveat – the placeholder styles do no resize the input box, so stay clear of things like line-height and padding top or bottom.
If you are using line-height or padding you are going to be frustrated with the resulting placeholder. I haven't found a way around that up to this point.
After reading the thread
Input size vs width
I'm clear that we should not use size attribute but css style.
What will be the cross browser css that shows exactly same width for both input[text] and textarea?
BTB, I tried
#idInputText, #idTextArea {
font: inherit;
width: 60ex;
}
Is it correct? any better solution?
Thanks in advance for any help.
You will probably get more consistent results with different browsers by applying a CSS reset first. This article lists some good examples:
https://stackoverflow.com/questions/116754/best-css-reset
Once you have eliminated the subtle browser differences on padding and margins, then your master width of 60ex should allow the inputs to line up.
The native padding for text input elements differ. You will need to assign a different width to input elements and textarea elements and experiment.
#form input.textfield { width:10em; }
#form textarea { width:9em; }
Just throw some default styles ( I prefer ems ) and pop open Firebug and experiment by changing the size values.
I usually throw a class=textfield on <input type=text> so I don't target <input type=submit> or similar.
I would avoid a generic CSS reset, but use something like this:
input[type="text"], input[type="password"], textarea {
width: 60ex;
margin: 0;
padding: 2px; /* it's best to have a little padding */
border: 1px solid #ccc; /* gets around varying border styles */
border-radius: 4px /* optional; for newer browsers */
}
As long as you're in standards mode and not quirks mode this should work fine for most browsers.
Notes:
The attribute selectors - [type="text"] - don't work in IE6 so you may wish to opt for a class name instead.
You can't get all browsers to display form fields exactly the same way.
Using ex as the unit, whilst a good idea, might not work well in a fixed-pixel width environment.
Use pixel rather than EM or pct values. 60px = 60px across all browsers, regardless of base font size.
I'm late to this party, but in case anyone runs into this and needs to use ex's for width, I finally got it to work.
Textareas by default use monospace for their font-family. So, you'll need to override that. This css worked for me:
input[type="text"], textarea {
font-family: Arial, sans-serif;
border: 2px groove;
padding: 2px;
margin: 10px;
width: 35ex;
}
Here's a Fiddle to demonstrate: https://jsfiddle.net/Lxahau9c/
padding left and right 0px