Why the position of bootstrap panels is random on Meteorjs?

Question

I created a project with Meteorjs and Bootstrap 3.

In this project, I can add dynamically bootstrap panels (or modals) to the Home page.

What bothers me is the fact that the position of theses panels (or modals) is random, I would like them to be organized. Eg: when the screen of computer is medium, I want 3 panels (or modals) in each column.

Would you have an idea on how to do that?

The code is:

<template name="home">
{{> navigation}}
<div class="container-fluid lov">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
 {{#each positions}}
  {{> position}}
  {{/each}}
 </div>
</div>  
</div>
</template>

And this is the JavaScript of this template:

Template.home.events ({
'dblclick .lov': function (e, tmpl) {
    e.preventDefault();
    e.stopPropagation();

 if(e.target.className === 'container-fluid lov'){
     var id = Positions.insert({ name:'Clique here to change the title', domaine:'ici tu ecris ton text en gros',footername:'le nom de pays et la ville si tu veux'});
     Session.set('editing_table',id);

    }
}   

});

This is the collection:

Positions = new Meteor.Collection('positions');

This one is the code of position template that allow us to create our panel:

<template name="position">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">


<div class="panel panel-default" id="{{_id}}"  style="position:absolute;left:{{left}};top:{{top}}; width:350px">
  <div class="panel-heading">
  {{#if hadanata3ou}}
        <a  class="close" data-dismiss="modal">x</a>{{/if}}
        {{#if editing_tablename}} 
          <input class="input input-medium tablename" value="{{name}}" type="text" />
        {{else}}
        <h6 class="tablename">{{name}}</h6>
        {{/if}}
  <!--   <h3 class="panel-title">Panel title</h3> -->
  </div>
  <div class="panel-body">
    <div id="{{_id}}">
         {{#if editing_field}}

        <textarea class="input input-lg efield" name="efield" type="text">
        {{domaine}}
        </textarea>
         {{else}}
          <span>
          {{domaine}}
         </span>
         {{/if}}
       </div>
  </div>
  <div class="panel-footer">
    {{#if editing_footer}}
          <input class="input input-medium footer" value="{{footername}}" type="text" />
        {{else}}
        <p class="muted">{{footername}}</p>
        {{/if}}
      </div>
  </div>
</div>
</div>
</template>

Answer 1

I'll be honest, I don't know a whole lot about meteorjs templating, but I can show you how the Bootstrap grid system works for rendering different amounts of panels based on the size of the view.

Bootstrap uses 4 different sizes:

• Large lg (Desktop)
• Medium md (Landscape Tablet)
• Small sm (Portrait Tablet)
• Extra Small xs (Mobile)

And using the classes .visible-SIZE and .hidden-SIZE , you can control what elements are shown/rendered at what sizes. For example:

<div class="container-fluid">
  <div class="row visible-lg visible-md hidden-sm hidden-xs" >
    <div class="col-lg-4 col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4><span class="hidden-lg visible-md">Panel One - Medium</span> <span class="hiddn-md visible-lg">Panel One - Large</span></h4>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4><span class="hidden-lg visible-md">Panel Two - Medium</span> <span class="hiddn-md visible-lg">Panel Two - Large</span></h4>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4><span class="hidden-lg visible-md">Panel Three - Medium</span> <span class="hiddn-md visible-lg">Panel Three - Large</span></h4>
        </div>
      </div>
    </div>
  </div>
  <div class="row hidden-lg hidden-md visible-sm visible-xs">
    <div class="col-sm-6 col-xs-6">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4><span class="hidden-sm visible-xs">Panel One - Extra Small</span> <span class="hiddn-xs visible-sm">Panel One - Small</span></h4>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-xs-6">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4><span class="hidden-sm visible-xs">Panel Two - Extra Small</span> <span class="hiddn-xs visible-sm">Panel Two - Small</span></h4>
        </div>
      </div>
    </div>
  </div>
</div>

This code renders a row of .panel panel-default <div> elements. When the view is md or lg , it renders 3 <div> 's, each with the class col-md-4 and col-lg-4 . The total amount of columns you can have is 12, and a class with col-*-4 takes up 4 of those 12 slots. Therefore, 3 * 4 is 12, or 1 complete row. Same with 2 * 6 for the col-sm-6 and col-xs-6 .

In your meterojs templates, you need to decide how to use these classes to render the correct amount of columns. It's not too difficult, but spend some time playing with it to get the layout you want. If you want to see the test layout in effect, check this link:

Bootply

And try resizing your browser window.

Hope that can provide you some insight into Bootstrap 's grid layout, and how to render different columns depending on the size of your browser.