label 1
Clever Geek Handbook

Two marked text boxes next to the maximum size

I have two marked text boxes ( fiddle ):

<body>
    <h1>Header</h1>
    <label for="ta1">label 1</label>
    <textarea id="ta1">textarea 1</textarea>
    <label for="ta2">label 2</label>
    <textarea id="ta2">textarea 2</textarea>
</body>

These text boxes should be side-by-side and should receive as much screen space as they could:

layout sketch

How can I achieve this using CSS or JavaScript?

Edit:

Textures should

  • placed side by side (until the width of the text boxes is less than the minimum, but this is a special case)
  • automatically changes.
  • grow with window width
    window width resize
  • grow with window height
    window height resize
+3


source to share


3 answers


I found a CSS only solution using calc

what works best for me ( fiddle ):

Html

<body>
    <h1>Header</h1>
    <div class="row">
        <div class="col">
            <label for="ta1">label 1</label>
            <textarea id="ta1">textarea 1</textarea>
        </div>
        <div class="col">
            <label for="ta2">label 2</label>
            <textarea id="ta2">textarea 2</textarea>
        </div>
    </div>
</body>


CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
h1 {
    text-align: center;
    height: 40px;
    margin: 0;
    padding: 0;
}
.row {
    width: 100%;
    /* consider h1 height */
    height: calc(100% - 40px);
}
.col {
    margin: 0 3px;
    /* consider column count (here 2) and margin (2 * 3px) */
    width: calc(100% / 2 - 6px);
    height: 100%;
    float: left;
}
label {
    display: block;
    width: 100%;
    height: 20px;
    padding-left: 2px;
}
textarea {
    display: block;
    /* only subtract margin, padding and border of textarea */
    width: calc(100% - 4px);
    /* additionally consider label */
    height: calc(100% - 20px - 8px);
    margin: 2px 0;
    padding: 1px;
    border: 1px solid;
    resize: none;
}
0


source


I found another CSS-only solution using flexible drawer layout ( fiddle ):

Html

<body>
    <h1>Header</h1>
    <div class="row">
        <div class="col">
            <label for="ta1">label 1</label>
            <textarea id="ta1">textarea 1</textarea>
        </div>
        <div class="col">
            <label for="ta2">label 2</label>
            <textarea id="ta2">textarea 2</textarea>
        </div>
    </div>
</body>


CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    display: flex;
    flex-flow: column;
}
h1 {
    text-align: center;
}
.row {
    flex: 1;
    display: flex;
    flex-flow: row;
}
.col {
    flex: 1;
    display: flex;
    flex-flow: column;
    margin: 0px 3px;
}
label {
    display: block;
    padding-left: 2px;
}
textarea {
    flex: 1;
    display: block;
    margin: 2px 0;
    padding: 1px;
    border: 1px solid;
    resize: none;
}
+2


source


JS Fiddle

added .col

for label

and textarea

for correct installation next to each other and from row

toalign-center 

.col{
    float:left;
    padding-right:10px;
}

label, textarea{
    width:100%;
}

.row {
    display:inline-block;
}

Edit

added jquery to find exact body height

Js Fiddle

function adjust() {

    var a = $(window).height()
    var b = $('header').height()
    var c = a - b

    $('.row').height(c)
}

adjust()

$(window).resize(function () {
    adjust()
})
0


source






More articles:


All Articles