This topic contains 3 replies, has 2 voices, and was last updated by Sean Sean 3 years, 1 month ago.

Select and input text in same row


  • tomazcar
    Participant

    Posts: 6
    Member Reply #664

    Hi, in a two column form, I want to put an input text and a select in the left side of the form.

    If I insert the following code, i see first the input tex and then the select. I want to see first the select and then the input text
    <p style=”text-align: left;”> <div class=”row”></p>
    <p style=”text-align: left;”>  <div class=”col-md-6″>
    <label class=”control-label”>Addresses</label>
    <div class=”form-group”>
    <div class=”col-md-4 “>
    <input type=”text” placeholder=”address” class=”form-control”/>
    </div>
    <div>
    <select class=”form-control input-small” data-placeholder=”Select…”>
    <option value=”AL”>Alabama</option>
    <option value=”WY”>Wyoming</option>
    </select>
    </div>
    </div>
    </div>
    </div></p>
    <p style=”text-align: left;”>How can I sole it?</p>
    <p style=”text-align: left;”>Thanks</p>
    <p style=”text-align: left;”>P.s. It would be nice some docs or a page which show how the class like col-md-4 or form-group are rendered</p>

    Sean
    Sean
    Keymaster

    Posts: 4435
    Support Staff Reply #677

    Hi :),

    Did you check 2 col layout in http://www.keenthemes.com/preview/metronic/theme/templates/admin/form_layouts.html ?

    If you need any further assistance could you please provide a screenshot or basic markup image for your required layout ?

    Thanks

     


    tomazcar
    Participant

    Posts: 6
    Member Reply #678

    Hi, thanks for the replay.

    Yyes, I’ve already followed the example but I’m not able to acheive what I want

    I want the “address” select just before and not after the input text

    here is my snippet of the form

    <div class=”portlet-body form”>
    <!– BEGIN FORM–>
    <form action=”#” id=”form_sample_1″ class=”horizontal-form”>
    <div class=”form-body”>
    <div class=”alert alert-danger display-hide”>
    <button class=”close” data-close=”alert”></button>
    You have some form errors. Please check below.
    </div>
    <div class=”alert alert-success display-hide”>
    <button class=”close” data-close=”alert”></button>
    Your form validation is successful!
    </div>

    <div class=”row”>
    <div class=”col-md-6″>
    <div class=”form-group”>
    <label class=”control-label”>Title <span class=”required”>
    * </span>
    </label>
    <input type=”text” name=”title” data-required=”1″ class=”form-control”/>
    </div>
    </div>
    <!–/span–>
    <div class=”col-md-6″>
    <div class=”form-group”>
    <label class=”control-label”>Sub title</label>
    <input name=”subtitle” type=”text” class=”form-control”/>
    </div>
    </div>
    <!–/span–>
    </div>
    <!–/row–>

    <div class=”row”>
    <div class=”col-md-6″>
    <div class=”form-group”>
    <label class=”control-label”>Description<span class=”required”>
    * </span>
    </label>
    <textarea class=”form-control” name=”description” rows=”3″ data-required=”1″ class=”form-control”></textarea>
    </div>
    </div>
    <!–/span–>
    <div class=”col-md-6″>
    <div class=”form-group”>
    <label class=”control-label”>Category <span class=”required”>
    * </span>
    </label>
    <select class=”form-control” name=”category”>
    <option value=””>Select…</option>
    <option value=”Category 1″>Category 1</option>
    <option value=”Category 2″>Category 2</option>
    <option value=”Category 3″>Category 5</option>
    <option value=”Category 4″>Category 4</option>
    </select>
    </div>
    </div>
    <!–/span–>
    </div>
    <!–/row–>

    <div class=”row”>
    <div class=”col-md-6″>
    <div class=”form-inline”>
    <div class=”form-group”>
    <label class=”control-label col-md-2″>Date</label>
    <div class=”col-md-8″>
    <div class=”input-group date date-picker” data-date-format=”dd-mm-yyyy”>
    <input type=”text” class=”form-control” name=”eventDate”>
    <span class=”input-group-btn”>
    <button class=”btn default” type=”button”><i class=”fa fa-calendar”></i></button>
    </span>
    </div>
    <!– /input-group –>
    <span class=”help-block”>
    select date
    </span>
    </div>
    </div>
    <div class=”form-group”>
    <label class=”control-label col-md-2″>Hour</label>
    <div class=”col-md-8″>
    <div class=”input-group”>
    <input type=”text” class=”form-control timepicker timepicker-24″ name=”eventTime”>
    <span class=”input-group-btn”>
    <button class=”btn default” type=”button”><i class=”fa fa-clock-o”></i></button>
    </span>
    </div>
    <!– /input-group –>
    <span class=”help-block”>
    select hour
    </span>
    </div>
    </div>
    </div>
    </div>
    <!–/span–>
    <div class=”col-md-6″>
    <div class=”form-group “>
    <label class=”control-label col-md-2″>Image</label>
    <div class=”col-md-9″>
    <div class=”fileinput fileinput-new” data-provides=”fileinput”>
    <div class=”fileinput-preview thumbnail” data-trigger=”fileinput” style=”width: 200px; height: 150px;”>
    </div>
    <div>
    <span class=”btn default btn-file”>
    <span class=”fileinput-new”>
    Select immagine </span>
    <span class=”fileinput-exists”>
    Change </span>
    <input type=”file” name=”…”>
    </span>

    Remove

    </div>
    </div>
    </div>
    </div>
    </div>
    <!–/span–>
    </div>
    <!–/row–>

    <div class=”row”>
    <div class=”col-md-6″>
    <label class=”control-label”>Address</label>
    <div class=”form-group”>
    <div class=”col-md-4 “>
    <input type=”text” placeholder=”address” class=”form-control”/>
    </div>
    <div>
    <select class=”form-control input-small” data-placeholder=”Select…”>
    <option value=”AL”>Alabama</option>
    <option value=”WY”>Wyoming</option>
    </select>
    </div>
    </div>
    </div>
    </div>

    </div>
    <!–/form body–>

    <div class=”form-actions right”>
    <div class=”row”>
    <div class=”col-md-offset-3 col-md-9″>
    <button type=”submit” class=”btn blue”>Submit</button>
    <button type=”button” class=”btn default”>Cancel</button>
    </div>
    </div>
    </div>
    </form>
    <!– END FORM–>

     

     

     

     

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

    Posts: 4435
    Support Staff Reply #689

    Hi :),

    Please try below code with inline input and dropdown:

    <div class=”col-md-6″>
    <label class=”control-label”>Addresses</label>
    <div class=”form-group”>
    <input type=”text” placeholder=”address” class=”form-control input-inline input-medium”/>
    <select class=”form-control input-inline input-small” data-placeholder=”Select…”> <option value=”AL”>Alabama</option>
    <option value=”WY”>Wyoming</option>
    </select>
    </div>
    </div>

You must be logged in to reply to this topic.