UX Layout Demo

by Gordon Kushner

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
	<section class="fiveColumnLayout">	
		<div class="column">
			<label for="quoteNum">
				Some Text
			</label>
			<input type="text" id="text1" value="hello" />
		</div>
</section>

CSS

/* Note that layout css classes are concerned with width and margin */
.fiveColumnLayout {
	margin-left: 1px;
	margin-right: 1px;
	width: 840px;
  border: solid 1pt black;
}

.fiveColumnLayout .column {
	width: 150px;
	margin-right: 10px;
}

.fiveColumnLayout .column input[type=input], input[type=number], textarea {
	width: 140px;
}

/* General element attributes (applies to all) */
.column {
	vertical-align: top;
	margin-top: 4px;
	margin-right: 20px;
	margin-bottom: 8px;
	/*border: 1pt solid red;*/
	display: inline-block; /*display: block*/
}

.column input, select {
	display: inline-block;
	font-size: 11px;
}

.column select {
	height: 25px;
	margin: 0px
}

.column input {
	height: 19px;
	padding-top: 1px;
	padding-bottom: 1px;
}

.column label {
	display: block;
	font-size: 11px;
	height: 13px;
	margin-bottom: 8px;	
}

JavaScript

$('#text1').jqxInput({disabled:true, placeHolder="enter something"});