Simple Form Builder
Very simple, very rough...
by no1uknow
HTML
<script src="http://colorto.me/js/jquery.ui.min.js"></script>
<div id="formContainer">
<div id="elements" class="elements">
<div class="formItem">
<label>field label</label>
<input class="el" type="text" />
</div>
<div class="formItem">
<label>field label</label>
<input class="el" type="text" />
</div>
<div class="formItem">
<label>field label</label>
<input class="el" type="text" />
</div>
<div class="formItem">
<label>field label</label>
<input class="el" type="text" />
</div>
<div class="formItem">
<label>field label</label>
<input class="el" type="text" />
</div>
</div>
<div id="elements2" class="elements">
<div class="formItem">
<label>field label</label>
<input class="el" type="text" />
</div>
<div class="formItem">
<label>field label</label>
<input class="el" type="text" />
</div>
<div class="formItem">
<label>field label</label>
<input class="el" type="text" />
</div>
<div class="formItem">
<label>field label</label>
<input class="el" type="text" />
</div>
<div class="formItem">
<label>field label</label>
<input class="el" type="text" />
</div>
</div>
<div id="elements3" class="elements">
<div class="formItem">
<label>field label</label>
<input class="el" type="text" />
</div>
<div class="formItem">
<label>field label</label>
<input class="el" type="text" />
</div>
<div class="formItem">
<label>field...
CSS
#formContainer {
overflow-x: scroll;
/* white-space: nowrap; */
}
.elements {
padding: 10px;
display: inline-block;
width: 200px;
white-space: normal;
font-family: verdana;
font-size: 12px;
}
.formItem {
height: 30px;
}