Bootstrap form-group with labels above inputs and EasyUI controls

Question

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>

Fiddle

When resizing it is also not following proper wrapping. Any idea?

Thanks

Answer 1

Wrap the inputs inside another div to maintain labels 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>

--> Check JSFiddle here <--