Clever Geek Handbook

Textarea fills unused vertical space after other elements - in overlay

Confirmation: Variations of this question have been asked several times, but either they don't apply exactly or I can't get them to work. Many other solutions did not use padding, stock, or absolute positioning containers.

Goal: My goal is to create a popup or overlay window in the middle of the screen that consumes 100% of the viewport vertically and horizontally with a 100px buffer between the overlay and the edge of the visible window. The overlay should contain a title, a text box and some links. The text box should consume all the remaining vertical space and all the available horizontal space inside the overlay window. I am trying to maximize the amount of visible textbox after title and navigation links.

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

  • CodePen - Works in Chrome and IE11 - not Firefox (ignores 100% height in FF)
  • CodePen - works in Chrome and Firefox - not IE11 (rolls height to 0 in IE)
  • CodePen - works in Chrome, Firefox and IE11 - but requires Javascript and jQuery :(

The only difference between the two solutions is that the textbox is absolutely positioned in one and not (that is, static) in the other.

Can one of these solutions be improved to work across all three browsers? Is there a more elegant solution that still provides mask, overlay, title, textbox, and links for all three browsers?

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

Thank!

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 sets the height for Firefox:

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

Links

+3


source to share


1 answer


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

For some reason, inside a table, it doesn't work, but inside a div. I am using the same CSS for the textbox as you are:



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

but using display: flex for wrappers. See the Codepen for a complete solution. If you check the <td>

surrounding <textarea>

in IE11 in its version, it doesn't calculate the element's height. I'm guessing they are doing something in their render engine to basically say “take all the remaining vertical space” instead of calculating the actual pixel value. However, when you use flexbox it calculates the pixel width and height for the container, so it height: 100%

works correctly on children.

0


source






More articles:


All Articles