Now in my project, using webview to display html.
For one input field, we want to align the placehoder to right.
-webkit-input-placeholder {text-align: right; color: red;}
The placeholder is red, but not align right.
This just occurs on Android 4.x, not on the desktop chrome and ios webview.
Thanks.
Try this.
::-webkit-input-placeholder {text-align: right; color: red;}
Related
I have a div styled to truncate centered text with an ellipsis, with some padding on each side. It works when using a desktop browser, but on iPad the text seems to ignore the right padding and becomes centered incorrectly.
I'm using this for the styling:
div {
text-overflow: ellipsis;
width: 120px;
padding: 0 38px;
overflow: hidden;
white-space: nowrap;
border: 1px solid black;
text-align: center;
}
An example can be seen here. View on iPad to see the problem. http://jsfiddle.net/35Lyk9yp/
I'm thinking this might be some bug with the mobile browsers? It didn't work on iOS Safari or Chrome, but it's ok on Windows Safari and Chrome and Firefox. Is there a simple workaround for it?
Edit:
I found a workaround by using an inner div with the content that I used to do the ellipsis, and then used the outer div to set the padding. If there is a way around it with one element though, please let me know.
In order to get your code to work you need to have CSS overflow, width and display.
You are probably missing the display.
I've found what seems to be a bug in WebKit for iOS 7, but only on iPad 3 and 4, which leeds me to believe it's somehow hardware-related.
The bug: If I add the spread value (the fourth value) to CSS box shadows the whole shadow disappears. I've put up an exampel here.
Can anyone else confirm this error on iPad 3 and 4 with iOS 7?
Still an issue in IOS 7.0.4.
Add a one pixel border radius to force the browser to render the shadow in landscape mode and while zooming.
border-radius: 1px;
We've found a good rule of thumb when dealing with safari and/or iPad issues (or both). Put the following rule on the element or class to force hardware rendering.
transform: translate3d(0,0,0);
This solved my problem getting a shadow (used as a border with the spread value) to render on an iPad the same as other devices.
It is even more strange i was looking into the exact same problem.
If you use inset you can define your spread and then it is working fine!
an other fine fact is that your dropshadow will be gone as you turn your ipad into landscape mode.
This is a quite annoying bug!
I had a similar issue on iPad mini w/ iOs 7.0.3
the problem appeared both in safari and in chrome
input field with inset box shadow didn't appear at all regardless the zoom
div drop shadow appeared, but when zoomed in changed to a line and further zoom in hide the line as well.
I found on another thread this solution:
"Try adding -webkit-appearance: none;, because iOS tends to mess up forms."
and it solved the problems !
Something similar here. Applied box-shadow to image elements. It shows fine at zoom=1. But if you zoom in, it disappears on iPad 3 with iOS 7.
CSS Code used:
#photostrip > img {
-webkit-box-shadow: 0px 6px 8px rgba(0,0,0,0.33);
-moz-box-shadow: 0px 6px 8px rgba(0,0,0,0.33);
box-shadow: 0px 6px 8px rgba(0,0,0,0.33);
}
Same issue with iPad Air / iOS 7 :(
Setting -webkit-appearance didn't help, neither did border-radius.
I used the following CSS to fix it (it lets you use the spread setting on other browsers, and overrides for webkit/iOS only):
.box_shadowed
{
box-shadow: 2px 2px 4px 2px #ccc;
-webkit-box-shadow: 2px 2px 4px #ccc;
}
I had the same issue on iPad 4 with iOS7. When I set CSS box shadow for an element it appears as intended on iPad portrait view. But when I rotate the iPad to landscape view the box shadow gets disappear.
I tried StrandedPirate's solution - adding 1px border radius to the element and it worked! This solution might not be applicable for all cases, but for my case it is adoptable.
I had the same problem and added border-radius:1px to fix it.
I was using:
border-radius: 100%;
box-shadow: 0 0 0 20000px rgba(255,255,255, .6);
and the shadow wasn't appearing on iPad(iOS 11): Safari and Chrome.
I tried all the other answers but with no luck.
The solution for me was to reduce the spread from 20000px to 922px. This was the max value that I could use so the shadow would appear.
One single rule didn't helped in my case.
At the end I fixed adding ALL these rules:
-webkit-appearance: none;
border:0;
border-radius: 1px;
height: 1px;
In particular setting also the height.
I have attached two pictures, the first shows the "desktop" of the webapp I work on, some of the icons you see open dialogs made of a <div/> containing an <iframe/>, but while on a normal pc it all works properly, on the iPad it seems there is a problem with the z-index of some elements, as shown in second picture.
The small red rounds with number inside are defined as follows:
.countComunicazioni {
position: relative;
background: url(/images/admin/menu_sgs/counter.gif) no-repeat center center;
height: 35px;
width: 35px;
color: #FFF;
top: -105px;
left: 120px;
z-index: 0;
font-weight: bold;
display: none;
}
.countComunicazioni p {
margin-top: -5px;
padding-top: 10px;
}
The markup is a <div class="countComunicazioni"/> tag and a <p/> tag inside.
I also noticed that now the problem also appears in Google Chrome V22, the numbers in red circles are always on top even if they have z-index == 0 and the dialogs have z-index > 1000.
As per this bug report ( http://code.google.com/p/chromium/issues/detail?id=144518 ), the change seems to be intended, even if I would bet it'll broke many layouts, not only ours.
This problem was not present in previous versions of Google Chrome, nor is present on Firefox V15 or Internet Explorer V9, where everything is rendered problem.
How can this problem be solved? I'm no CSS expert, so I must admit I have tried little, if anything, so far... And also, who is "right" here? Is our markup incorrect, or does the problem lie in google chrome new rendering strategy?
EDIT
It seems I've been able to solve the issue shown in the two pics: all the dialogs generated from my web app are placed inside a <div/> with position:fixed placed on the very top of the body, now I tried to move the div to the very bottom of the page, and the layout seems now correct.
There is one more problem though: when opening a modal dialog, the opaque layer that is supposed to be created between the dialog and the below content, is actually created above it, see new screenshot.
How could this problem be solved? Does it require modifying our javascript or is it an issue with jquery ui itself?
Just found out myself that the way that chrome 22+ handles z-index has been altered.
Check out this awesome explanation here that I didn't write here...
http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements
Basically the way I understand it is that elements which have
position: fixed
now get counted with their own z-index layer so you'll have to adjust your pages accordingly to suit.
Hope that helps!
I'm trying to prevent my button from flashing blue after clicking, anyone know what class causes this change? so I can override it
Cheers!
For anyone landing here and wondering what to do with .ui-btn-active, I'd like to build on sqlisers answer with:
.ui-btn-active
{
color: #2F3E46 !important;
background: none !important;
background-color: #eee !important;
text-shadow: 0 /*{a-bup-shadow-x}*/
1px /*{a-bup-shadow-y}*/
0 /*{a-bup-shadow-radius}*/
#ffffff /*{a-bup-shadow-color}*/;
}
Just change the color values to whatever you like.
If this happens on your mobile, I'd suggest adding this to your stylesheet:
* {
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
This will remove the default tap-highlight function of the webkit browser (on any mobile). Seems to work mostly on Android phones, but it does have affect on iOS devices as well.
The class you're looking for is
.ui-btn-active
I have the following HTML-page:
<html>
<head><style>
* { margin: 0; padding: 0; border: none; }
button { width: 14px; background: #F00; }
</style></head>
<body>
<button></button>
<button></button>
<button></button>
</body>
</html>
When I run this code in any desktop browser, it works perfectly; the buttons are 14 pixels wide. When I run this code in Safari on an iPad, the buttons are wider. Is there some minimum width for buttons? Can this width be overridden?
Just now encountered the same problem. I did small trial/research which showed that font-size affects horizontal paddings (both left and right).
So, to fix this - explicitly state padding: 0 or any other padding you require.
iOS 11.2, iOS 10.3.3
Answering my own question: apparently, the minimum width of <button> depends on the font size. So by setting the font size to 0, I can make the buttons smaller. I do realize that small buttons are not good when used on a touch-driven device like the iPad, so I'll probably create an alternate, more touch-friendly version of the UI.