CODEWITHSUNDEEP
androidhtmlcsswidth
Jucks
Jucks

Reputation: 400

What would cause a <p> element to not span full width in the Android browser

I have been asked to take a look at a strange issue and cant figure it out. Basically

elements would typically span full width as they are block elements, but on certain pages they don't seem to want to. I have tested this on the default ICS Android and Dolphin and it is playing up on both. This question sums up the issue, only the answer does not work: Why won't the Android browser span this paragraph over the full browser width?

UPDATE: A strange solution? If I set the following CSS p{ background:#fff; } it resolves the problem, what could cause some a strange issue. The issue is, I need the background to be transparent.

Upvotes: 5

Views: 7334

Answers (8)

Jchabin
Jchabin

Reputation: 103

This may not be the answer you need, but I found it works if you give is a CSS display:inline; property instead of the display:block; default, it will not span the whole screen any longer. I'm not completely sure if this works on Android (I don't have one), but I had a similar problem on my laptop and this fixed it.

Upvotes: 0

Lucas
Lucas

Reputation: 21

Instead of using <p>, <div> or other tags inside <td>, you can simply use <span> and will do the trick. It seems that starting with android 4, the default internet browser has some interpretation problems. I tested before on android 2 and it work just fine without any "adjustments".

Upvotes: 2

user2112383
user2112383

Reputation:

This is also true for the <li> tag. Same problem. I fixed both issues by adding p, li {background: url('');} to my css stylesheet.

Upvotes: 2

Daniel Boehme
Daniel Boehme

Reputation: 1

I have the same issue on 2 different sites. I had to work around this by setting a transparent png background-image.

In my case the p elements had exactly the width of the device's screen width - so rotating the device changed the width of the p elements.

Even setting a fixed width with !important on the p was ignored!

Upvotes: 0

user1830605
user1830605

Reputation: 129

It's a hack, but my solution was setting background: url(''); on my paragraph and heading tags. I need my background to be transparent so I can't set a colour.

Oddly setting background: rgba(0,0,0,0); doesn't work either for some reason?

If you want to be safe and actually supply a valid image url you can use:

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2NkAAIAAAoAAggA9GkAAAAASUVORK5CYII=);

This is a base64 100% transparent single pixel background.

I will note that this situation only started occurring for me when I set my viewport to 640 so that the mobile site would scale fine for any mobile browser.

This seems to be a bug with viewport scaling not functioning correctly from what I can tell.

Upvotes: 10

cookie_monster_az
cookie_monster_az

Reputation: 41

This one is a trip alright.
I set my Android to not auto fit pages, fixed the problem.
I then set my phone to auto fit pages, added to my <p> in my css background: black; and it is fixed.
Another odd thing is that in my stylesheet, if I set p{ text-align: center}, the <p> spans all the way across like I expect, with my phone set to auto fit pages and no background setting. I also did text-align: right, works as expected. I then changed text-align: left, now it is broken again. Very, very odd issue here....

Upvotes: 4

mcottingham
mcottingham

Reputation: 2056

I've found a solution to this issue that actually works!! This is actually a setting in the android browser "Auto-Fit Pages". Turning that off will resolve this issue with certainty.

Mike

Upvotes: -1

Fuzzical Logic
Fuzzical Logic

Reputation: 13015

Based on this question and your previous question, there seems to be no obvious reason why it shouldn't work. However, something that happened WAY back in the day was if you didn't declare (in some unnamed browsers) specific attributes, the properties would not inherit like they were supposed to.

Because there is no reason that the <p> should render that way, AND the previous used to be a known issue, I would recommend setting the width of the <body> to 100% as it may be a case of lost inheritance.

EDIT: Alternative

Another popular solution to the previously mentioned issue was to wrap the offending elements in a <div> of class container that had the specified width. Both are typically viable solutions that significantly improve cross browser consistency.

Hope this helps, FuzzicalLogic

Upvotes: 1

Related Questions