Contact box in the footer the textarea and input boxes are in a div 310px wide.
http://www.bantros.net
They have been set to be 308px wide with 1px border. In IE9, Firefox and Opera everything is the same width but in Chrome (my default browser) the textarea overflows unless the width is set to 304px.
Using Inspect Element I can it reports it as being 314px wide but I'm not too sure why it is doing this. Any info or help will be appreciated, thanks
There is a browser-applied padding: 2px. Apply padding: 0.
.form1 textarea, .form1 input {
padding: 0;
}
This sort of issue can be solved using a CSS reset, btw.
One thing I can see, which I believe is the source of the problem: In textarea, chrome puts a 2px padding for left and right. In input chrome puts 0px padding on left and right.
If you override that it should be fine.
Related
I am using Angular to create a filter for our Website. One of the filters is a video length filter, where you can input the desired length in minutes. The input field has the following Styles (Stylus):
border: 1px solid rgba(85, 85, 71, .5)
border-radius: 5px
color: #009090
display: block
font-size: 58px
height: 56px
line-height: 72px
margin-top: 40px
padding-bottom: 10px
width: 96px
&:focus
border: 1px solid #009090
outline: none
It works as expected in Chrome and Firefox:
But Safari misaligns the content:
The padding-bottom, which centers the content for Chrome and Firefox seems to have no effect on Safari (and the effect of 10px is anyway less smaller than the huge misplacement that happens on Safari). I also tried every possible combination of line-height, font-size, margins and paddings but had no luck.
Strange is also that the blinking cursor seems to be well aligned in Safari, when nothing is put in:
Although the input is misaligned, the cursor stays perfectly centered vertically:
Safari seems to add a "Shadow-Content (User Agent)" to the input field which is well aligned then (but is strange anyway, because an input-element cannot have children):
As soon as I type something in, the input is misaligned again and won't let me style the contents of the shadow-DOM (note the little locks in the Developer tools):
I really don't know how to vertically center the text inside the input in Safari. Has anyone had the same issue?
THat's due to the discepancy between height and line-height:
height: 56px
line-height: 72px
The line won't fit into the container that way. line-height should at maximum be as high as height, and preferably the same as font-size. Also paddings add to the height, so adjust these values accordingly.
input::-ms-clear {
display:none;
}
IE11 input width changes when clicked -
this solution works for clicking the text box
Changing the text in text box changes the width in IE 11
http://jsfiddle.net/3TwKF/20/
Please let me know for any solution
Please change the css
table.fields input[type='text'], table.fields input[type='password'], table.fields select, .inpt
width: 98%; to width:100%
It will work. All the best
It look like it is a bug in IE you can use margin on the child element.
How can I work around this IE11 layout bug related to table-cell, text-decoration, and padding?
So change your percentage based padding to px or em based wil fix the problem.
https://jsfiddle.net/3TwKF/22/
padding: 2px .5em;
I have a textarea which is dynamically create/inserted into the DOM. If the text area is below 75px height and the text inside of it exceeds that then you would expect a scroll bar however you don't see it.
Any other textarea that is larger than 75px will show the scroll bar properly.
Is there a way to fix this, or is that just a Firefox default behavior?
Here is my CSS
textarea {
position:absolute;
border:0;
overflow:auto;
resize:none;
}
UPDATED: The behavior is now not consistent, now it goes down to 60px below 60px no scrollbar
Works for me with height smaller than 75px. However, when the height of textarea is very small (about 35px) scrollbar won't fit and is therefore not displayed. Try adding following CSS for the textarea:
textarea {
resize: none; //disable resizing, so that the scrollbar is 100% high
overflow: auto;
}
As Firefox and Internet Explorer simply do not support any CSS styling of the scrollbar. Using a plugin really is your only option
I have this really simple form: http://jsfiddle.net/TKb6M/91/. Sometimes, when I zoom in or out using Chrome, the input borders disappear. For example, when I zoom to 90% I get:
Naturally, your mileage may vary.
In case you're wondering about those <span> tags, I added them following the recommendation at How do I make an input element occupy all remaining horizontal space?.
Is there a problem with my CSS or is this a Chrome bug? It seems to work fine on Firefox. What can I do to avoid this behavior?
Thanks.
I'm pretty sure that Luís Pureza has solved his issue, but I found a really easy way to solve it changing only this:
If you have a table border like this one:
INPUT,TEXTAREA {
border-top: 1px solid #aaa
}
Change it to this one:
INPUT,TEXTAREA {
border-top: thin solid #aaa
}
I found this solution across this link: https://productforums.google.com/forum/#!topic/chrome/r1neUxqo5Gc
I hope it helps
You are forcing Chrome to do subpixel calculation, and this usually has strange behaviours.
If you change the height of the input to 30px, then a 90% zoom works ok (because this is 27px), but a zoom of 75% not (because this is 22.50 px).
You can also avoid this by giving the border a width of 3px. In this case, you will see that the borders width is different in different places .
Anyway, the very best solution is to give more space around the inputs so that the border can be drawn cleanly even if it is in a subpixel position.
I know I'm late in the game, but fudging it a bit and set the border width to 1.5px seems to do the trick every time.
I had the same problem with a bordered div wrapping borderless input , and all the great answers here does not helped me.
Finally, adding:
overflow: auto;
to the div element (the one with the problematic border) did the trick.
It's because your setting a fixed height, and when zooming the input is growing larger than that height, making the border disappear. Use line-height and padding to get the desired height instead - see updated Fiddle
Update: Ignore what I said, it's because you're setting overflow:hidden on your span, removing that should do the trick. Might result in a need to change width of input though.
On a side note; you're making your span a block element which is fine and works, but it looks a bit bad. Try using block elements, like a instead of changing an inline element to a block, if possible.
I had a similar issue with chrome in 2018 - the top border was missing on inputs and textareas. The fix was to specify the top border in css simply as
INPUT,TEXTAREA {
border-top: 1px solid #aaa
}
I can't explain why that was needed, and it was only losing the borders in certain places, but at least that was a quick workaround.
In case overflow: hidden is neccessary , mention overflow: hidden only for the browser you are facing the width issue . In other browser, metion display: flex so that the width is automatically taken correct and also, so that on zooming in/out the borders do not disappear.
For example :
Width was not correct in my case only for IE, so I mentioned :
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.spanStyles {
display: block;
overflow: hidden;
}
}
And the zooming in/out issue was occuring in firefox and chrome, so I mentioned
.spanStyles {
display : flex;
}
this resolved my issue in all browsers.
thanks for all your answers above, I got the border issue such as this, the border display is a mess when zoomed down. finally found overflow: hidden worked for me.
export const InputWrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
height: 56px;
border-radius: 4px;
border: 1px solid #707070;
padding: 16px 0 16px 16px;
overflow: hidden;
When I use the following CSS:
input[type=button] {
background-color: white;
border: 1px solid black;
font-size: 15px;
height: 20px;
padding: 7px;
}
with this HTML:
<input type="button" value="Foo" />
I expect to see this, so the total height becomes 36px:
1px border
7px padding
20px content (with 15px text)
7px padding
1px border
But instead both Firefox 3.6 and Safari 4 show this: (Haven't tested in other browsers)
Screenshot http://labs.spiqr.nl/upload/files/1223ef9cbae3ab6e43bd1f9215ebedb157ac7b22.png
1px border
7px padding
4px content (with 15px text) => height - 2 * border - 2 * padding
7px padding
1px border
Does anyone have any idea why this happens?
(Even if it's expected behavior, what's the logic behind it?)
Form elements have traditionally had a width/height that includes their padding/border, because they were originally implemented by browsers as OS-native UI widgets, where CSS had no influence over the decorations.
To reproduce this behaviour, Firefox and others render some form fields (select, button/input-type-button) with the CSS3 box-sizing style set to border-box, so that the width property reflects the entire rendered area width including the border and padding.
You can disable this behaviour with:
select, button {
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
}
(or, which is more common for liquid form layouts where you want to use ‘100%’ width, you can set the others to border-box.)
The -browser prefixed versions have to be there to catch browsers that implemented this before the standardisation process got so far. This will be ineffective on IE6-7, though.
A few things you can try:
Set the doctype of the document (<!DOCTYPE html>)
Set the input to be display:block or display: inline-block
Use a reset stylesheet.
It makes sense because the height of the element is naturally more than what you set it to. input elements are assigned a height which, in this case, should be enough to contain the text of your element but you set it to a smaller amount. To show this, remove your height setting.
I got it working removing the padding of the input button and setting a height around 20. then adjusting the height, padding of the anchor element.
I Also set the line-height, font-size and the font-family.
worked on FF,IE,safari and chrome :D