I a creating a form where I want to have labels above the inputs. That can be done by using form-group class. Everything works fine, but if I replace standard inputs with EasyUI controls it breaks the expected layout. Here is my code:
<form>
<div class="form-group col-sm-6">
<label for="name" class="control-label">Line Height</label>
<input class="form-control" style="width:200px" id="name"/>
</div>
<div class="form-group col-sm-6">
<label for="name1" class="control-label">Padding Top</label>
<input class="form-control" style="width:200px" id="name1"/>
</div>
</form>
<form>
<div class="form-group col-sm-6">
<label for="name2" class="control-label">Display Name</label>
<input class="form-control easyui-textbox" style="width:200px" id="name2" />
</div>
<div class="form-group col-sm-6">
<label for="name3" class="control-label">Start Screen</label>
<input class="form-control easyui-textbox" style="width:200px" id="name3"/>
</div>
</form>
When resizing it is also not following proper wrapping. Any idea?
Thanks
Wrap the input
s inside another div
to maintain label
s up and prevent collapsing.
<form>
<div class="form-group col-sm-6">
<label for="name2" class="control-label">Display Name</label>
<div>
<input class="form-control easyui-textbox" style="width:200px" id="name" />
</div>
</div>
<div class="form-group col-sm-6">
<label for="name3" class="control-label">Start Screen</label>
<div>
<input class="form-control easyui-textbox" style="width:200px" id="name1" />
</div>
</div>
</form>