CODEWITHSUNDEEP
iphoneobjective-cuitableview
oskob
oskob

Reputation: 1376

UIWebView: Width of table affects text size

I've encountered a rather strange bug in UIWebView. If I create a table and on of the <td>:s are too long (longer than the width of the screen, I guess), the font size gets enlarged!

Here is an example app I threw together to demonstrate this.

This piece of HTML:

<!DOCTYPE html>         
<html>
    <head>
        <style type="text/css">
            table
            td
            {
                white-space: nowrap;
            }
        </style>
    </head>
    <body>                  
        <table>
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mi ipsum</td>
            </tr>
            <tr>
                <td>Lorem ipsum dolor sit amet.</td>
            </tr>
        </table>
        <table>
            <tr>
                <td>Lorem ipsum dolor sit amet.</td>
            </tr>
            <tr>
                <td>Lorem ipsum dolor sit amet.</td>
            </tr>
        </table>
    </body>
</html>

Produces this result:

iPhone Table strangeness

The top table gets enlarged! The ONLY thing that's different is that the first line is longer in the top table. This makes the font size for the whole table bigger!

I've tried using <nobr> instead of CSS and it gives the same result. Setting the font size with inline styles does not work either.

I also get the same result if I set the width of a <td> to a size larger than the screen, so it seems like there is some auto sizeing that is the problem.

Does anyone know a workaround for this?!

UPDATE

Here is my project if you want to try it out for yourself: http://cl.ly/2B3r1F2C3I0C2D1S2X3s

UPDATE 2

I forgot to mention that I have tried setting font sizes throigh CSS. Both in the <style> and inline and even through JavaScript, after the page has loaded loke so:

.

td
{
    font-size: 18px;
}

<td style="font-size: 18px;">

var elements = document.getElementsByTagName('td');
for(int i = 0; i < elements.length; i++)
{
    elements[i].style.fontSize = '18px';
}

This has no effect.

Upvotes: 1

Views: 372

Answers (2)

Lee Gary
Lee Gary

Reputation: 2397

var elements = document.getElementsByTagName('td');
for(**var** i = 0; i < elements.length; i++) {
    elements[i].style.fontSize = '18px';
}

Upvotes: 1

Jeshua Lacock
Jeshua Lacock

Reputation: 6668

I don't see any font sizes being specified. I would try manually setting the font sizes with CSS or HTML.

Upvotes: 0

Related Questions