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

problems on form layout


  • aclaramonte
    Participant

    Posts: 1
    Member Reply #851

    First, congratulations for the metronic theme, its just Great.  I have a stange problem may be I´m createing bad html code, but i wanna check that with your team.

    i upload a image, so you can see the problem:

    Im creating a form inside a porlet, in his porlet-body , Im creating a row <div class="row"> and inside this row , i use col system to create the fiels inside a <div class="form-group"> using the metronic guidelines. so i´m putting 12 fields inside “<span class=”caption-subject bold font-green-haze uppercase”>Entrada Bobina” porlet, usign this col system:
    </span>

    • <div class=”col-md-3″>…</div>
    • <div class=”col-md-3″>…</div>
    • <div class=”col-md-3″>…</div>
    • <div class=”col-md-3″>…</div> (12 col -> 1st row correct)
    • <div class=”col-md-3″>…</div>
    • <div class=”col-md-3″>…</div>
    • <div class=”col-md-3″>…</div>
    • <div class=”col-md-3″>…</div> (12 col -> 2nd row correct)
    • <div class=”col-md-3″>…</div>
    • <div class=”col-md-3″>…</div>
    • <div class=”col-md-3″>…</div> (9 col next its 6 so thats must be the 3rd row, but if you see in the picture the fields going left and i have some kind of incorrect offset.
    • <div class=”col-md-6″>…</div> (6 on the last, that will be if correct the 4th row.

     

    So my questions is , that its a bug, its wrong or every 2 columns (12 + 12 ) i have to close and open a new <div class="row">

     

    thank you in advance, and apologies for my english!, 😉

    Alex.

     

     

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

    aclaramonte
    Participant

    Posts: 1
    Member Reply #853

    more info, i think the problem is using in the row before the row that fails this divs:

    <div class=”help-block”>1000-1500 mm</div>

    if I remove that divs the fields fit in tje column systems so, that is a bug or if I use that “help-block” i have to put a new <div class=”row”> every 12 columns ???

    Example of one of this input fields with help-block inside:

    
    
    <div class="form-group">
    <label class="control-label">Ancho Medido: </label>
    <input id="anchomedido" name="anchomedido" placeholder="mm" class="form-control" value="" data-limit="1000-1500" type="text">
    <div class="help-block">1000-1500 mm</div>
    </div>
    
    

     

     

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #859

    Hi :),

    I was not able to read your code properly.

    But if you are working on complex form layouts you should refer to this demo where all supported work layouts are listed:

    http://keenthemes.com/preview/metronic/theme/templates/admin/form_layouts.html

    Also you can check how bootstrap’s core form layouts work: http://getbootstrap.com/css/#forms

    If you need any further clarifications please let us know.

    Thanks.

     

You must be logged in to reply to this topic.