i am trying to get the following code to work on an androind 2.1 phone (HTC Sense UI):
h1 {
font-size: 14px;
font-weight: bold;
color: #FFF;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
however, the text-overflow property does not seem to work. has anybody else had this problem, or found a way to work around it?
on Android 2.2 and 4, I use a line height greater than the font size (always em) with a display type "-webkit-box" and a vertical orientation.
Here is an example:
.myClass{
display : -webkit-box;
-webkit-box-orient : vertical;
text-overflow : ellipsis;
-webkit-line-clamp : 3;
overflow : hidden;
font-size : 0.9em;
line-height : 1.2em;
}
I see you have no width defined. If the element is allowed to get arbitrarily wide there is never going to be any overflow >within> the element. The element overflowing its parent wil not give you the desired effect.
It seems that the 'ellipsis' is not working when your 'display' is set to '-webkit-box', reset to 'block' will do.
This may help: https://bugzilla.mozilla.org/show_bug.cgi?id=672944#c0
Related
I've been trying to center a number inside of a circle, and I just can't quite get it. Every time I think I have it, it seems like it on some platform it doesn't work (whether it's an apple phone, an android browser, Safari on Mac OS X, or Chrome / Firefox on Windows) there's a 1-2 pixel difference.
Here's the code:
.unread-replies {
display: flex;
justify-content: center;
text-align: center;
align-items: center;
background-color: #F24648;
border-radius: 50%;
width: 25px;
height: 25px;
font-weight: 500;
color: white;
font-size: 17px;
border: 1px solid #00000066;
}
* {
box-sizing: inherit;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important;
}
<div class="unread-replies">1</div>
Fiddle copy here: https://jsfiddle.net/3vr2mkfb/3/
In this case it seems like it's not vertically centered on Chrome in my desktop browser, but it is vertically centered on Chrome on my Android phone. Why the discrepancy?
If I try small hacks like padding-bottom: 2px; then it inevitably causes some problem on some other platform. I think I instead need the actual fix, but I don't know if there is one?
add some line-height with the same value as the font-size and see if it fixe anything.
Use Viewport Units like vw for width and vh for height instead of px and % because it will help you make your webpage/website responsive.
It will surely solve your issue but if it doesn't let me know in the coments I will try my best to help you.
I've been trying to fix this bug for days, yet I didn't find a single solution.
On certain levels of zoom (even on my phone with default zoom) I can see grey borders below some divs. I've been trying to fix this with A LOT of options including:
box-shadow
margin-bottom
outline: none
... and some other ones which I don't even remember anymore
The issue can be seen here.
PICTURE LINK
It's visible on the top of the triangle.
The whole code is available here:
https://noobish.eu/beta/
I went through your website (BTW great design) and i think i figured out a solution for your issue. You need to add a negative margin to the triangle to cover the space:
.white_triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 130px 50vw 0 50vw;
border-color: white transparent transparent transparent;
margin-top: -5px; /* Here's the addition */
}
Update:
The margin-top solution seems to be buggy, so I found another solution, which would require adding a before element on top of the border. Here's the code:
.white_triangle_container:before {
content: "";
position: absolute;
width: 100%;
height: 8px;
background: #fff;
margin-top: -4px;
border-radius: 0 0 50% 50%;
}
This is how it looks: https://i.gyazo.com/25db9e4b9db16c42d374cfd78b47736d.png
I have an element which I animte with translate3d transform. The parent element has overflow: hidden, but on Firefox Mobile 19.0.2 during animation the animated element is visible outside of the parent element.
Animating the top property instead of translate3d is working, but it's not hardware accelerated and it's not smooth enough.
It works fine on all other mobile and desktop browsers I tested on.
I guess this is a Firefox Mobile bug, but does anyone have a workaround for this?
Here is jsfiddle link for testing: http://jsfiddle.net/dioslaska/6h8qe/
The minimal test case:
HTML:
<div id="cont">
<div id="translate">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</div>
Css:
#cont {
width: 50px;
height: 90px;
border: 1px solid black;
margin: 20px;
overflow: hidden;
}
#translate {
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
}
#translate.a {
-webkit-transform: translate3d(0, -60px,0);
-moz-transform: translate3d(0, -60px,0);
}
#translate div {
height: 30px;
line-height: 30px;
text-align: center;
}
UPDATE: It looks like the problem is solved in Firefox 27.
After a lot of searching I found a workaround here:
http://jbkflex.wordpress.com/2013/04/04/css3-transformations-showing-content-outside-overflowhidden-region-in-firefoxandroid/
Adding a background and opacity: .99 to the container element seems to solve the problem.
But still no information about what causes the problem
I tried the opacity: .99 hack but it was causing the layout to get pushed down..
so i tried another hack which i find that worked by applying this to your style sheet:
* {
outline: 1px solid transparent;
}
I'm sorry, but I seems found a more simple solution.
Without layout damage.
If scrolling container has height a more over than device height then this issue disappearing.
It's has a different values for portrait and landscape orientation.
It's really work with Sencha Touch 2 at FF v.23 on Android 4.0.4 for me.
We have an issue with our responsive design. We use this style for mobile devices on our responsive theme:
body {
margin-left: 10px;
margin-right: 10px;
overflow-x: hidden;
max-width: 90%;
}
Below you can see a difference between iOS Broswer and Chrome:
It does not make sense to apply margin to your body, as it is the outermost element. Instead your should use a padding.
According to this ancient blog post Body padding and margin, different browsers will handle margin and padding on the body element in different ways. It wouldn't surprise me if this type of difference is still occurring today.
It worked with percentages:
body { margin-left: 5%; margin-right: 5%; overflow-x: hidden; max-width: 90%; margin: 0 auto; }
I am having problems with the default style of Sencha (or Android not sure) for the text inputs and password fields, it works ok on iOS devices and on some android devices, but HTC and others put their awful default style (white background and grey border) which i can nohow change or hide. Because of that all the layout looks very awful....
see the image please.
Even the sample of Sencha Touch has the same problem.
see please the second image here.
Please if you have any suggestion what is the reason of it or how it is possible to hide i
would be very grateful!! here is all i have tried for that
input {
background: transparent !important;
border: 0 transparent !important;
-webkit-appearance: none;
}
input[type=text] {
background: transparent !important;
border: 0 transparent !important;
-webkit-appearance: none;
}
input:focus{
outline:none;
background: transparent !important;
border-color: transparent !important;
-webkit-focus-ring-color: transparent;
-webkit-appearance: none;
}
Thanks in advance
Andrei
What you're seeing is actually an Android "feature" that generates a native control on top of your styled input field.
If you try to move your field on focus you should see that the field is intact, try the following css rule to see the phenomena:
input:focus {
position: absolute;
left: -20px;
}
What you could do is try to set -webkit-user-modify: read-write-plaintext-only; which works on some phones (not sure about < 2.3), but can break some functionality. E.g. for a number field you still get a qwerty-keyboard instead of a number pad etc.
So try it out, hopefully it helps you and is suitable for your needs.