I have a problem with a web application. I have these CSS rules to make sure that if text is overflowing it will be shown with three dots. It works perfectly on all browsers that I have tested(desktop and mobile). One big except is android stock browser and more importantly only RTL mode (I have attached an image of the rendered output).
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
The output should be Option 1, Option 2 and so on. There is enough space to fit this small text there but is cut off.
I have tried to use text-rendering: optimizeLegibility option and it helps in some cases but not all.
Does any one have any ideas what might be a solution for this problem?
Thank you for your time!
Related
I have a fixed footer with bottom: 0. It works fine except on android it is appearing below the screen. I have some other fixed elements that are also appearing off screen. For some reason I cant container them within the screen I've searched around and tried a view things but no joy. My guess is that if I change something in the viewport it will fix it. The image was taken from google chrome emulating the site on an S4 but the same problem persists on my actual phone also. The code for the footer should just make it sit at the bottom and it works fine in other browsers. I can change the value of bottom to around 26px then the whole footer becomes visible on the screen but that is not the fix I want. Any ideas?
.footer-fixed{
position: fixed;
bottom: 0;
z-index: 99;
width:100%;
background-color: #111;
height: 50px;
}
i've had this issue before,
but only on android versions lower then 4.4, so maybe you could tell me what android version you are working on,
try adding:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes"/>
to your
<head></head>
on Android < 2.3 devices for elements that are fixed behave as "STATIC", (thats why your top element could be functioning normally, because its the first element and pushes the rest down)
Android 2.3 supports it but u need to disable viewport scaling as i think once written by bradfrost cant exactly remember, it was a while ago
if you experience flickering of the elment try adding
-webkit-backface-visibility: hidden;
to your css class, or even extend it with
-webkit-transform: translate3d(0,0,0); makes some devices run their hardware acceleration.
-webkit-perspective: 1000;
its solves the flickering, but the thing is on some android versions you only need to add the backface-visibility hidden and on some the other 2 rules (trial and error). i should go for the first one, (at first) because adding the translate 3d, will drain more battery
anyways if its just a website try the solution above,
if you are making a cordova app, try adding https://crosswalk-project.org/ which add their own webview to your cordova package solving all these browser quirks on android.
--
a sidenote
when a element has position fixed, its display will be set to block,
and you have width: 100% on your elment, so if you are not using box-sizing:border-box;
the element would have a width of 100% + padding + margin added to it,
i don't know the rest of your css, maybe you are setting margin or padding by a container class which is
(check the metrics of your element with chrome inspector)
If this is the case you could do 2 things
change display
width: 100% to auto;
or add: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
box-sizing: -webkit-box-sizing: border-box;
or add normalize: https://necolas.github.io/normalize.css/ to your project, above your own css (link tag) within the head (Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.)
I have a website that has a different theme from its mobile site.
They share the same content and plugin , but different themes.
I have 3 buttons that are on my mobile site that shows clear only on certain phones.
when I pull up the site on a different phone, sometimes the buttons look smashed together and almost like the dont have css linked to them
why does this happen on certain phones , idk.....
the buttons say "search jobs" "employers" "candidates"
what could this be, please help
https://hughesjobs.net
Different Phones have different operating systems and (very likely) different web-browsers. Each browser hast its very unique default-css-files embedded. If you do not specify your css entirely, then a browser will "fall back" to its own unique default-css-file (at least regarding the undefined css properties).
This happens a lot with Iphones, Ipads, etc.
Mobile devices have (again) their own css-properties.
Your question is regarding the consistent design of buttons.
The answer is: debug on different devices AND be 100% specific about all css properties.
BR
update:
according to your code, this detailed css-styling should make your buttons look the same in different browsers:
.containerm button {
padding: 5px;
margin: 5px;
width: 100px;
height: 36px;
background-color: #BBB;
color: white;
font-size: 14px;
}
Although my site isn't the best, it's a mash of HTML and isn't even responsive, it works as expected in every browser except for the Android Browser. I have a secreenshot below of the select box in the android browser, and then in every other browser. I'm really not sure how to approach this as I generally work things out in the end with trial and error, and like I said my code really isn't that good!
Any help would really be appreciated :) thanks very much.
Android (using www.modern.ie to test):
Other browsers:
The CSS for the select box:
#form .input-select {
background: url(../images/field-bg.png) repeat-x;
height: 30px;
width: 210px;
border: 1px solid #c2c2c2;
border-radius: .2em;
font-size: 14px;
padding: 5px;
-webkit-appearance:menulist;
Form elements are among the most unreliable parts of HTML/CSS regarding cross-browser rendering consistency. Especially some properties of the box model (height in conclusion with border or padding) are troublesome.
Citing from that article:
Developers tried to fix this problem by turning these elements [input, select] into block-level elements. [...] A common pattern to solve this problem is to avoid the height property and instead to use the font-size and padding properties.
A great CSS collection to start with is normalize.css. You should think about using (parts of) it, to get as much rendering consistency as possible.
You are already using em as unit for border-radius, for scalability in older browsers, especially IE 6-8, you could go for ems for all length units.
I've forked your fiddle, to include those ideas. See http://jsfiddle.net/Volker_E/4v3sm71g/
By the way, Chrome v36.0.x on Android 4.4 doesn't show a difference at all per default.
#form .input-select {
? float:right; ?
clear:right;
}
#form label {
? float:left; ?
clear:left;
}
I'm trying to use hardware acceleration in a phonegap application. I have read that I have to put a css 3dtransform for this pourpose. So, I have used a webkit-transform3d in the main class of my html element, but I continue to see some lag during the animation.
I want to open and close a box, settings is height from 0 to somevalue and viceversa.
I have write an example here: http://jsfiddle.net/VG7V5/6/
As you can see, I have defined the class container in this way:
#container {
box-shadow: 0.1em 0.1em 0.2em 0em #777777;
width: 100%;
max-height: 15em;
overflow-y: auto;
transform: translate3d(0em,0em,0em);
-webkit-transform:translate3d(0em,0em,0em);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
If I open the example with my Nexus 5 with Android 4.4.2 I see some lags during the animation, with or without the transform3d enabled (infact in jsfiddle it starts with the transform commented). It seems as nothing change.
Is there something wrong???
Thx
Maybe I have found the solution by myself.
As explained in this article
is possible to achieve high performance animations if they are of these types: position, scale, rotation or opacity.
Essentially the animation should not change the dimensions of the element, because it causes too much overhead for the cpu/gpu.
So, changing the height of the element, as in my example, is not a great idea. :D
I have some CSS and HTML where the font-size is explicitly styled to be 13px, and for the most part it stays that way, but occasionally Chrome on the Nexus 7 sometimes displays a part of the same page as 14px;
Unfortunately, I have been unable to recreate the issue in jsfiddle, so I'm not sure what is going on.
Some if the styles I use to influence the font-family and font-size can been seen at my attempt to recreate the issue at http://jsfiddle.net/K9hyG/2/.
When using the Chrome debugger, I can see the following in the Computed Style for one of the offending paragraphs:
border-collapse: separate;
color: rgb(51,51,51);
display: block;
font-family: Optima, Lucia, 'MgOpen Cosmetica', 'Lucida Sans Unicode', sans-serif;
font-size: 14px;
font[size="2"] - 13px default.aspx:427
body - 13px default.aspx:2
height: 36px;
text-align: left;
text-shadow: rgb(255,255,255) 0px 1px 0px;
width: 877px;
The text-shadow is generated by my usage of jQuery Mobile. In the Chrome debugger, two instances of the text-shadow directive appear. One inherited from div.ui-page.ui-body-c.ui-page-active (ui-body-c is the activating component) and the other from body.ui-mobile-viewport.ui-overlay-c, (ui-overlay-c is the activating component), but both definitions from the same section of CSS in the theme file.
If I deactivate one of them, the offending paragraph actually changes to 13px in Chrome Debugger, but still looks the same on the device. If they are both deactivated in Chrome Debugger, then it goes back to 14px. This still happens, even if the text-shadow set to rgb(255,255,255) 0px 0px 0px.
I've seen this post, but that issue is largely unresolved as well.
A colleague of mine has discovered the answer. It looks like I am the unwitting victim of Font Boosting
As per the link, Font Boosting can be disabled by providing max-height: 1000000px on the element in question or on body, body * for all elements.
Your problem is likely due to Chrome's text scaling setting, which sets text at a particular scale for accessibility reasons. A lot of users use this who struggle to read small text on their mobile. You cannot fix this and shouldn't try to resolve it, especially with sites that support mobile devices.
I recommend you either ignore it or modify your CSS so that it supports slightly differing text sizes.
After some tests this rule helped me out. Must be added either to the element containing boosted text or it's parent depending on the div/table structure.
element or parent element {
/* prevent font boosting on mobile devices */
width: 100%;
height: auto;
min-height: 1px;
max-height: 999999px;
}
Maybe the width and heigth values must be corrected according your needs.