CODEWITHSUNDEEP
htmlcsscross-browsertextarea
Trevor
Trevor

Reputation: 1663

textarea fill unused vertical space after other elements - in overlay

Acknowledgement: Variations of this question have been asked several times, but either they do not exactly apply or I cannot get them to work. Many of the other solutions did not use padding, margin, or absolute-positioned containers.

Goal: My goal is to create a popup or overlay window in the middle of the screen, which consumes 100% of the viewport vertically and horizontally with a 100px buffer between the overlay and the edge of the viewable window. The overlay must contain a heading, a textarea, and some links. The textarea needs to consume all the leftover vertical space and all of the available horizontal space inside the overlay window. I'm trying to maximize the amount of viewable textarea after the heading and navigation links.

Solutions, Almost: Based on previous answers, I have made 2 solutions that almost satisfy my requirements in 3 major browsers:

The only difference between the 2 solutions is that the textarea is absolutely positioned in one and not (i.e., static) the other.

Can either of these solutions be improved to work in all 3 browsers? Is there a more elegant solution that still provides the mask, viewport overlay, heading, textarea, and links for all 3 browsers?

I'd like to avoid a JS-based solution and rely entirely upon HTML/CSS if possible. If all else fails, I'll set the height in JS after the document is loaded, but I'd like to avoid this maintenance burden if possible.

Thanks!

For refrence, here's the HTML and CSS:

HTML

<div id="main_content">Hello, world!  I am content underneath overlay.</div>
<div id="mask"></div>
<div id="overlay_window">
    <table>
        <tbody>
            <tr id="heading">
                <td colspan="2"><h1>Heading</h1></td>
            </tr>
            <tr>
                <td colspan="2"><textarea>default value</textarea></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td><a id="hide">Hide</a></td>
                <td><a id="next">Next</a></td>
            </tr>
        </tfoot>
    </table>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}
#mask {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    opacity: 0.6;
    MozOpacity: 0.6;
    filter: alpha(opacity=60);
    background-color: #000;
    width: 100%;
    height: 100%;
    color: #FFF;
    text-align: center;
    z-index: 990;
    font-weight: bold;
    cursor: progress;
}
#overlay_window {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    bottom: 0;
    overflow: hidden;
    z-index: 999;
    margin: 100px;
    padding: 25px;
    background: white;
    border: 2px solid black;
}
table {
    width: 100%;
    height: 100%;
    table-layout: fixed;
    text-align: center;
}
thead, tr#heading, tfoot {
    height: 40px;
}
td {
    border: 1px solid red;
    position: relative;
}
textarea {
    /* position: absolute; */
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Javascript / jQuery Solution

I'd like to avoid this, but here's a simple Javascript/jQuery snippet that fixes the height for Firefox:

$(document).ready(function() {
  var ta = $('textarea');
  var td = ta.closest('td');
  // if textarea's height less than 80% of parent, set to parent's height.
  if (ta.height() < td.height() * 0.8) {
        ta.height(td.height());
    }
});

References

Upvotes: 3

Views: 1112

Answers (1)

Joshua Whitley
Joshua Whitley

Reputation: 1186

This solution using flexbox works in IE11, FF, and Chrome: http://codepen.io/anon/pen/gbjpOJ

For some reason, inside of a table it doesn't work but inside of a div it does. I'm using the same CSS for the textarea that you did:

textarea {
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    height: 100%;
}

but using display: flex for the wrappers. See the codepen for full solution. If you inspect the <td> surrounding the <textarea> in IE11 in your version, it doesn't calculate the height of the element. I'd assume they're doing something in their rendering engine to basically say "take up all remaining vertical space" instead of calculating an actual pixel value. However, when you use flexbox, it calculates a pixel width and a height for the container so height: 100% works correctly on child elements.

Upvotes: 2

Related Questions