CODEWITHSUNDEEP
androidcssandroid-emulatorandroid-browser
master_gracey
master_gracey

Reputation: 354

<p> style incorrect unless background color applied

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):

Correct orientation

Android (Incorrect; not fully spreading; added more text than iOS version so you can see what I'm talking about):

enter image description here

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.

Upvotes: 5

Views: 1187

Answers (4)

yunzen
yunzen

Reputation: 33439

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);

Upvotes: 2

Brian
Brian

Reputation: 11

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.

Upvotes: 1

master_gracey
master_gracey

Reputation: 354

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.

Upvotes: 5

Nabeel Khan
Nabeel Khan

Reputation: 3993

the div or any element above this

could be the issue.

if you give fixed width to the p element, does it work well ?

Upvotes: 0

Related Questions