I’ve used Fontastic.me to create an iconfont. It works great except in the native browser of Android 4.2.2 and 4.3 (eg: modern Samsung tablets).
In these browsers, the characters of the entire font have no width. This occurs with every font made with Fontastic.me (even the fonts it supplies itself). This is a major problem when centering the icons (horizontally).
I've set up a webpage to test it: http://ajuin2013.boondoggle.eu/fontastic-streamlineicons/icons-reference.html. The pink color shows the width of the character.
The following screenshot compares the normal behaviour with the AndroidBrowser-behaviour :
http://ajuin2013.boondoggle.eu/fontastic-streamlineicons/fontastic.png
I’m sure it’s because of the Fontastic, because when i use Icomoon as fontgenerator, the problem doesn’t occur. I've also notified the owner but he says he can't look into it because he doesn't now how to install an Android Emulator on his Mac.
Does anyone has a clue to what's happening here? What causes the character-space to collapse?
I had the same problem yesterday. I resolved it with a little bit of a work around. Like you said, when you want to center the icon with text-align:center; it ends up more to the right. If you put it to the left, it aligns left as intended. So I made the speudo element exactly the same width as the icon and centered the speudo element with margin: 0 auto; In that case you can leave the text-align to the left.
I know it's not the perfect solution, but for now it works for me and maybe also for you.
I had the same problem and resolved it by using icomoon.
Related
First, hello to everyone, I'm kinda new here, altough this site has helped me with lots of stuff.
Here's my problem, I've made images in 's with text behind them, so that when you hover with your pointer over it, the image slides to the side and you can read the text. Pretty simple. Now the problem that I'm having is that when I lower the screen size(eg view it on an Android), the responsive design kinda doesn't work for those images because there's some weird spacing to the left, even though the image can fit on that screen size.
Here's the site with the problem (I use it for learning purposes :)): This
your responsive works fine (bootstrap I guess). The problem is you have a fixed width in your .slide1, .slide2, .slide3 that is messing the 33.3333% width of your col-sm-4 . Basically you need to use mediaqueries to adapt your animation.
adding overflow:hidden to col-sm-4 will show you better what is happening, and adding to your slides max-width:100% may be the first steps to fix your web. Later your problem will be the image size
The problem is following - on mobile Chrome (Google Nexus 5) my box-shadows have an ugly visible border, instead of a seamless transition into background underneath. Is there any way to correct that? It's not visible on any of the desktop browsers. Even Chrome Device Emulator displays it properly.
Any ideas? Prefixing does not help... I though about substituting the shadows with linear-gradient background, but it requires additional, non-semantic markup and is hella tricky in comparison to comma-separated shadows.
http://i.stack.imgur.com/FRc3C.png
EDIT: as mentioned in comments (thanks, #vlrprbttst) - it's not an inset shadow.
I have a fixed header and footer, which need to drop shadow on the background. The problem is, I can't really change the layout, I need to modernize it. Previous designer used pngs as backgrounds, I figured that it's gonna be better if I replace all images with CSS3 to reduce the amount of HTTP requests. Now I get complaints that it's ugly - justified ones.
We have started integrating ActionBarSherlock into our app. Everything looks great, it's a really great lib, that gets in easily. But, there's one issue we don't know how to solve:
Some of the icons on some pages for larger screens get stretched. Has anybody had such problem?
Upd. 1.: Device that has icons stretched is running on Android 4.2.2 (it's Nexus 7 actually). All ok on a smaller screen like HTC Desire (2.3.3).
Upd. 2.: As the example of what is happening: there's an icon of a size of 48x52 pixels. It is in the "drawable" folder. It is used as the background for a Button widget. Before the update the app used this icon as is, i.e., it looked like 48x52. Now, looking at the element borders it looks as if the app is stretching the widget's width to be 52x52 or even wider, keeping the height same. layout_width, layout_height are set to "wrap_content"
Ok, using this answer I managed to fix -
changed all the Buttons to ImageButtons
all the android:background-s to android:src-es
android:background-s set to 'transparent'
But! I don't know why it happened and why it worked! Any clues? Thank you!
Don't know if someone already saw this bug. Note that this only happens with Android 4.x stock browser. It has been tested successfully with Chrome on Android 4, stock browser on previous versions, iOS, Blackberry OS6 & 7, Playbook, ...
Look at http://www.hello-gurus.com/labs/sandbox/plain-form.html
It works fine in the simulator (see http://cl.ly/image/1z3G1T2y2p2c) but goes totally wrong on the latest GalaxyTag (see http://cl.ly/image/1O123A3d0y3q)
Normal behavior should be text staying on the right. A padding on the left keeps the text to overlap with label. Input is 100% width so active zone is on the entire width.
That's how it works on every other browser, where Android stock one aligns it on the left only when focus! Plus, it makes the disappear even if the input has a transparent background :S
Even worse, sometimes its value get empty on blur x_X
This is getting me insane!
Any solution or anything i may give a try?
Thanks a lot!
I'd encountered a similar problem where a ghost field would appear on the Android devices on focussing an input field. This CSS for input fields solved my problem:
input[type='text'] { -webkit-user-modify: read-write-plaintext-only; }
Might be worthwhile giving this a try.
That is quite odd. Have you tried adjusting your css? It is possible to achieve the same desired layout but with a different approach.
Example:
for your labels:
remove -- position:absolute;
add -- display:inline-block;
change -- width:25%;
for your inputs:
change -- width:70%;
I setup something similar (static content) and it seems to be working for me.
I am developing a mobile site, so I'm using CSS to make things as liquid as possible.
I'm having an odd difficulty. Within a div container, I have a <p> that is supposed to fill the width of the div. I've tried width:auto, width:100%...nothing seems to work on Android Browser. Here are examples:
iOS (Correct):
Android (Incorrect; not fully spreading; added more text than iOS version so you can see what I'm talking about):
Both screenshots taken from respective emulators.
Here is the odd thing, though... If I give the class applied to these <p>'s a background color, the Android browser then allows the <p> to fill the full width of its parent div (looks identical to iOS). The really odd part, though, is that if I make the background color transparent (I thought I had it tricked lol), then it goes back to doing as shown in the example.
So, I have a <p> only properly referencing its CSS if it has a background-color applied... am I stupidly overlooking something, or is this some issue with Android Browser? Any ideas how to fix it?
Thanks for your time.
While it may not be the best solution, I finally just made an "invisible" transparent png and set it as the <p>'s background, and that fixed the issue... if you can call it fixing. :) I have to assume it is some kind of error in Android's Browser, as I tried this in every browser, desktop and mobile.
It is the intended behavior of Android phones. It will enhance the readability of copy text, since you are not forced to scroll sideways if you pinch zoom the page.
It can be managed on your own phone maybe in the browser's settings, but that is not the solution you want.
It can be 'fixed' by the workaround of applying a background-image to the element you want.
This can be done with a base64 encoded data url:
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
In your mobile browser's settings, look for something called "Auto Fit Pages" and disable it. This setting (in Android) is ON by default. Turn it off and your text will flow as it should.
the div or any element above this could be the issue.
if you give fixed width to the p element, does it work well ?