asked on

Font based icon not centering in Android WebView

I'm working on a mobile app, which has some pictures on the screen, and each picture has an associated button on the top right with a heart icon.

The icon is basically a font glyph.

The thing is that the icon and the button look perfect on FF, Chrome, and even IE (I checked on IE 9). The problem is that the icon is not centered in Android's WebView (Android's default browser, or PhoneGap). In the android browser, the icon appears to be right aligned within the button.

You can check out a test page here: http://work.kryptomens.com/Temp/index.html

Try loading this page (on mobile devices) in Chrome, and FF. Then try to see it in Android's default browser. You'll see what I mean.

You can check out the code by viewing the source of the page at the above link.

I hope somebody can help me with this.

Thanks!

Kyle Hamilton

try using absolute positioning for the icon. I have not actually tested this, but it's worth a try:

.icon-heart:before {
content: "p";
position: absolute;
top: 5px;
left: 7px;
}

Open in new window

Gary

From button {...} remove
display: block;
position: absolute;
right: 10px;
top: 10px;

and add
margin:0 auto

shishir_sri

ASKER

try using absolute positioning...

I can't do this, since this is not the only place where I'm seeing this problem. I've used the icons is many other places, some of which are followed by text labels. The icons (everywhere) are out of place in WebView, and I can't use absolute positioning everywhere.

From button {...} remove

@Gary: That changes the position of the button. The button's position is perfect on all platforms. Its the icon within the button (the 'span' element) whose position is the problem.

Gary

Confused - where should it be centered then
Can you post a screenshot of how it looks and how it should look

Gary

Remove the css for type1 and type2 and add this

.button span {
display: block;
height: 30px;
line-height: 35px;
text-align: center;
width: 30px;
}

Though you don't actually need the span, just put your heart class on the button

shishir_sri

ASKER

@Gary:

type1 and type2 are basically my 2 attempts at solving the issue. Both seem to have exactly the same result though.

How it should look:

This is what I see in Android's native browser (WebView):

Hope this helps in explaining the problem further. Thanks!

Gary

All you need is

<div class="wrapper">
<div class="button icon-heart"></div>
</div>
<div class="wrapper">
<div class="button icon-heart"></div>
</div>

Open in new window

And this CSS should work

.button {
     display: block;
     height: 30px;
     line-height: 35px;
     text-align: center;
     width: 30px;
 }

Open in new window

shishir_sri

ASKER

It doesn't work. The modified page is here: http://work.kryptomens.com/Temp/index2.html

To reiterate: It looks as expected on FF, Chrome, and IE. The problem is in Android's WebView.

Gary

Don't know then - can you temporarily remove the position:absolute and see if it centers.

ASKER CERTIFIED SOLUTION

Kyle Hamilton

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

shishir_sri

ASKER

@Gary: Removing "position:absolute" didn't help. Thanks a lot for taking the time though.

@Kyle: Your solution with the icon-wrapper helped. Thanks!