CODEWITHSUNDEEP
htmlcssforms
0leg
0leg

Reputation: 14144

HTML/CSS display-table for form layout

Wokring on the flexible HTML/CSS layout, where you just add form, row, cell label, cell input classes - and it handles everything (width, vertical align, etc.).

I've choses to use display: table and its children table-row, table-cell - since it handles most of the issue smoothly without need the need of hacks. The goal is to have something like this (where I can just put 2 containers inside a cell and they will automatically have 50% width, or 33% for 3 containers, or 25% for 4, etc.):

enter image description here

The problem I've encountered is that tables inside a table-cell jump off the border:

enter image description here

Any suggestion how to fix this?

EDIT: JSFiddle example: https://jsfiddle.net/3gcnaetx/1/

Upvotes: 1

Views: 7171

Answers (1)

ArBro
ArBro

Reputation: 731

I would suggest using bootstrap for this since bootstrap provides a grid to solve this kind of issues. If you would like to make an own css for this you can look at the idea in my snippet. I don't know if it solves your issue, but I hope it will help you forward.

CSS & HTML Snippet: 

*{
    box-sizing: border-box; 
}
.formrow:after, .col-2:after{
    display: table;
    content: " ";
    clear: both;
}
.col-2 {
    border: 1px dashed black;
    height: 100%;
    padding: 5px;
    width: 50%;
    min-width: 200px;
    float: left;
}
label {
    float: left;
    padding-right: 10px;
}
<div class="form">
    <form>
        <div class="formrow">
            <div class="col-2"><label for="input1">Label</label></div>
            <div class="col-2"><input id="input1"></input></div>
        </div>
        <div class="formrow">
            <div class="col-2"><label for="input2">Even longer label</label></div>
            <div class="col-2"><input id="input2"></input></div>
        </div>
        <div class="formrow">
            <div class="col-2">
                <label for="input3">Label</label>
                <input id="input3"></input>
            </div>
            <div class="col-2">
                <label for="input4">Label</label>
                <input id="input4"></input>
            </div>
        </div>
    </form>
</div>

Upvotes: 1

Related Questions