I am trying to change the width of my input button. I can change it using chrome devtools when it's set to mobile, but once the React app is deployed and I check it on my phone, the width is unchanging. See screenshot below.
Thus far, I've changed my width size to all kinds of pixels and percentages and added these properties:
.TodoApp .button{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Related
I have a simple input with some styles.
input {
display: block;
width: 100%;
padding: 4px 6px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
<input type="email" id="email" name="email" placeholder="Email">
The code works just fine with Firefox. However, in Chrome, when the input is focused it get shrunk a little bit (smaller than in normal state).
I've tried to apply border-box sizing on this input but the problem still retains. How should I fixed that?
Use the :focus pseudo class.
input:focus {
outline: none;
}
Like this: JSFiddle.
It works fine for me in Chrome and Firefox as well. Also worth to consider of using normalize.css (or something similar), to avoid (or fix) the browsers default css attriibute settings.
I'm create a web form, that has one custom input field with type "text".
CSS looks like
input {
height: 39px;
font-size: 14px;
color: #fff;
background: #000000 url(../img/search-bg-white.png) no-repeat 95% center;
border: none;
padding: 0 50px 0 10px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
When I tap on it at iPhone 6 all elements are desapiare exluding form elements without this input
And the result is http://gyazo.com/790da935bbfc946420cd37a24b2302db and I don't understand what to do
I've seen a host of disappearing elements, weird scroll behaviors, and keyboard issues happen on various iOS 8+ webview applications. The issue appears to be related to embedding inputs inside scrollable elements, or a combination of scrollable elements with some other element on the page--I've not been able to isolate it beyond that. (The behaviors I see don't always occur on a page with inputs, so #Josh Crozier's answer above would work 100% of the time for my case.)
The solution I found was to wait until after the page was rendered, then adjust the z-index of the scrolling element, which I hypothesize is forcing the rendering engine to repaint the layer.
To test whether this works for you, try loading the page on an iPhone 6 connected to your developer Mac by USB, and inspecting the page in Safari. Just before you tap into the input field, use the Safari dev tools to adjust the z-index of the parent scrollable container (or to add a z-index if not present). Then tap into the field and see if that continues to be a problem. If the problem doesn't occur, you'll have to attach some JavaScript to your page to force a repaint/relayout/reswizzle of the page after it has rendered.
Good luck. :\
I find the solution for this bug. I put on body element css property -webkit-overflow-scrolling: touch and when I removed it - all works fine.
i have a problem that i couldnt find a solution for it. I use bootstrap on my website and it uses
*, *:before, *:after {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
for all buttons.
Now i just installed arrowchat scrip and i have a problem with this rule from above, it ruins my css from arrowchat. I tryed to add
-webkit-box-sizing:content-box !important;
to my arrowchat class but still it doesnt affect with anything. Can someone give me a solution for this?
-webkit-box-sizing: content-box; /* Android ≤ 2.3, iOS ≤ 4 */
-moz-box-sizing: content-box; /* Firefox 1+ */
box-sizing: content-box; /* Chrome, IE 8+, Opera, Safari 5.1 */
You need all of them to cover all the browsers
http://trulyamped.com/test/art.html
For some weird reason whenever i toggle one of the options such as web/ios/print the animation does a weird glitch and the animation skips.
but when i delete the codes *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
from my style it works properly but only to find that my hover animation is clipped.
So what i am asking is how do i get the animation glitch to stop? (just click on one of the filters on the site to see the glitch)
for comparisons look at http://designwoop.com/labs/filtered-portfolio/ and you can see how smooth it looks
i am really nit picky and the way the animation is not smooth bothers me.
it's easy since you already know the reason that couses glitch.
quicksand is a plug-in so it's not smart enough to calculate css.
And also it is better not to apply box-sizing css for practice.
I would suggest take the
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
out and calculate width and padding by yourself for figcaption
I am trying to add padding to a box via:
.p-box-header{
border: 1px solid orange;
float: left;
width: $p-box-width;
padding: 0px 0px 0xp 20px;
}
and it looks like this:
The 'Food' header is adding 20px to it's width. This didn't happen in box below. Why is this happening and how can I prevent?
thx
Note : You wrote "0xp" and not "0px". If this doesn't solved your problem, then read the following.
You should take a look at a CSS3 property called box-sizing.
This forces the browser to render the box with the specified width and height, and place the border and padding inside the box.
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
More infos here : http://css-tricks.com/box-sizing/ and it's available since IE8 (CanIUse - Box-sizing)