CODEWITHSUNDEEP
htmlcssgoogle-chrome
LukLed
LukLed

Reputation: 31892

Table cell not resized correctly on Google Chrome

We have a table:

<table style="width: 100%; border: 2px solid black;">
    <tr>
        <td style="width: 40%; height: 20px;">
            ABC
        </td>
        <td style="width: 20%; height: 20px;">
            <textarea style="width: 100%;"></textarea>
        </td>
        <td style="width: 40%; height: 20px;">
            DEF
        </td>
    </tr>
</table>

You can see it here(http://jsfiddle.net/PyPhk/).

When page is resized in Firefox, cells keep 40:20:40 ratio. When page is resized in Chrome, ratio changes and cell with textarea is not being resized. When "white-space: nowrap;" is removed, resizing works fine.

Why Chrome doesn't keep ratio when resizing with "white-space: nowrap"?

Upvotes: 5

Views: 2994

Answers (4)

Tanner
Tanner

Reputation: 22753

I'm not sure why it doesn't work in Chrome, but you could simply override the style on the textarea cell like so:

JSFiddle: http://jsfiddle.net/PyPhk/2/

HTML:

<table style="width: 100%; border: 2px solid black;">
    <tr>
        <td style="width: 40%; height: 20px;">
            ABC
        </td>
        <td style="width: 20%; height: 20px;" class="textCell">
            <textarea style="width: 100%;"></textarea>
        </td>
        <td style="width: 40%; height: 20px;">
            DEF
        </td>
    </tr>
</table>

CSS:

table tr td {
    white-space: nowrap;
}

.textCell {
    white-space: normal;
}

UPDATE:

After inspecting the original fiddle, you can see that Chrome provides some default page styling in it's own stylesheet: user agent stylesheet

The included styles for a textarea include:

textarea {
    margin: 0em;
    font: -webkit-small-control;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
}

The style that is preventing your desired behaviour is display: inline-block. The difference is that other browsers (Firefox) don't define this style as a default.

The valid fix is therefore to override this as @prisoner suggests, although you suggest this has drawbacks.

textarea{
     display: block;
}

You can either stick with my work around that overrides the styling at the table cell level or you could define a class specifically for that textarea with display: block; applied on it so the 'drawbacks' you are thinking of don't apply to all textareas.

Upvotes: 2

gkunz
gkunz

Reputation: 1423

It looks like it's a behavior specific to webkit. It' seems like webkit does not fully use the relative width specified with percentage on the textarea and it's using the pixel value calculated from the cols attribute for propagation to it's parent when auto aligning the table. Default cols is 20.

You can work around using an absolute width of the textarea that overrides the calculated value from cols or you can specify a dummy cols value of 1. However, the best solution is to use table-layout: fixed on your table that seems to force the table cells to use the specified value in the table cells rather than trying to calculate based on child elements.

Check out the solution here: http://jsfiddle.net/TbQYT/3/

Upvotes: 3

Dresden
Dresden

Reputation: 53

It looks to me like Chrome has a minimum size for textareas by default. Even using the built-in corner resize, it won't go below a certain height and width.

Upvotes: 2

Prisoner
Prisoner

Reputation: 27638

I'm unsure of why it happens (I'm researching now, I'll update this answer if I find why it acts like this), but you can fix it by making the textarea a block.

textarea{
    display: block;
}

demo

Upvotes: 2

Related Questions