This topic contains 1 reply, has 2 voices, and was last updated by Sean Sean 2 years, 5 months ago.

Buttons and input forms not vertical center align with labels in horizontal form


  • lalabili
    Participant

    Posts: 1
    Member Reply #5665

    Hi 🙂

    For Metronic theme
    I have a little problems with horizontal form.
    xs buttons and input forms are not vertical center align with labels.

    <div class=”portlet-body”>

    <!– BEGIN DETAILS FORM–>

    <form action=”#” class=”form-horizontal”>

    <div class=”form-body”>

    <div class=”form-group”>

    <label class=”col-md-3 control-label”>Color</label>

    <div class=”col-md-9″>

    <button type=”button” class=”btn btn-circle blue btn-outline btn-xs”>White</button>

    <button type=”button” class=”btn btn-circle blue btn-outline btn-xs”>Red</button>

    <button type=”button” class=”btn btn-circle blue btn-outline btn-xs”>Blue</button>

    <button type=”button” class=”btn btn-circle blue btn-outline btn-xs”>Green</button>

    <button type=”button” class=”btn btn-circle blue btn-outline btn-xs”>Yellow</button>

    <button type=”button” class=”btn btn-circle blue btn-outline btn-xs”>Purple</button>

    <button type=”button” class=”btn btn-circle blue btn-outline btn-xs”>Dark</button>

    <button type=”button” class=”btn btn-circle blue btn-outline btn-xs”>Navy</button>

    <button type=”button” class=”btn btn-circle blue btn-outline btn-xs”>Pink</button>

    <button type=”button” class=”btn btn-circle blue btn-outline btn-xs”>Orange</button>

    </div>

    </div>

    <div class=”form-group”>

    <label class=”col-md-3 control-label”>Size</label>

    <div class=”col-md-9″>

    <button type=”button” class=”btn btn-circle green btn-outline btn-xs”>XS</button>

    <button type=”button” class=”btn btn-circle green btn-outline btn-xs”>S</button>

    <button type=”button” class=”btn btn-circle green btn-outline btn-xs”>M</button>

    <button type=”button” class=”btn btn-circle green btn-outline btn-xs”>L</button>

    <button type=”button” class=”btn btn-circle green btn-outline btn-xs”>XL</button>

    </div>

    </div>

    <div class=”form-group”>

    <label class=”col-md-3 control-label”>Qty</label>

    <div class=”col-md-9″>

    <input type=”text” class=”form-control input-inline input-sm input-xsmall” placeholder=”1″>

    <span class=”help-inline”><small>Stock : 1,000 pcs</small></span>

    <hr>

    <span class=”help-block”>¥22.50 : 4-59 pcs</span>

    <span class=”help-block”>¥22.00 : 60-199 pcs</span>

    <span class=”help-block”>¥21.50 : ≥ 200 pcs</span>

    </div>

    </div>

    <div class=”form-group”>

    <label class=”col-md-3 control-label”>Weight</label>

    <div class=”col-md-9″>

    <input type=”text” class=”form-control input-sm input-xsmall” placeholder=”0.25″>

    </div>

    </div>

    <div class=”form-group”>

    <label class=”col-md-3 control-label”>Brand</label>

    <div class=”col-md-9″>

    <div class=”btn-group btn-group-circle”>

    <button type=”button” class=”btn green-jungle btn-outline btn-xs”>YES</button>

    <button type=”button” class=”btn green-jungle btn-outline btn-xs”>NO</button>

    </div>

    </div>

    </div>

    <div class=”form-group”>

    <label class=”col-md-3 control-label”>QC</label>

    <div class=”col-md-9″>

    <div class=”checkbox-list”>

    <label>

    <input type=”checkbox”> Check Color & Size </label>

    <label>

    <input type=”checkbox”> Take a Photo </label>

    <label>

    <input type=”checkbox”> Others </label>

    </div>

    </div>

    </div>

    <div class=”form-group”>

    <label class=”col-md-3 control-label”>Ship by</label>

    <div class=”col-md-9″>

    <div class=”btn-circle”>

    <button type=”button” class=”btn red-haze btn-outline btn-sm”>SEA</button>

    <button type=”button” class=”btn red-haze btn-outline btn-sm”>TRUCK</button>

    <button type=”button” class=”btn red-haze btn-outline btn-sm”>AIR</button>

    </div>

    </div>

    </div>

    <div class=”form-group”>

    <label class=”col-md-3 control-label”>Delivery</label>

    <div class=”col-md-9″>

    <select class=”form-control input-sm”>

    <option>Self Pick-up</option>

    <option>Registered post</option>

    <option>EMS</option>

    <option>Parcel</option>

    <option>NTC</option>

    <option>Kerry</option>

    <option>Door-Delivery</option>

    </select>

    </div>

    </div>

     

    </div>

    </form>

    <!– END DETAILS FORM–>

    </div>

    Attachments:
    You must be logged in to view attached files.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #5670

    Hi :),

    To fix this quickly you can add below code in your custom.css file:

    .form-group .input-sm {
    margin-top: 3px;
    }

    If you need any further clarifications please let us know.

    Thanks.

You must be logged in to reply to this topic.