Bootstrap row alignment changing based on number of rows

Question

I have been experiencing this subtle oddity in my handlebars template using bootstrap.

The issue is that the entire contents of the page shifts approx 10px to the left when three or more items are in the database (the code within {{#orglist}} occurs three or more times).

<div class="row" id="bodyDiv" data-controller="orglist">
    <div class="col-md-12">...</div>
    <div class="col-md-12">
        {{#orglist}}
            <div class="row">
                <div class="col-md-8">...</div>
                <div class="col-md-4">...</div>
            </div>
        {{/orglist}}
    </div>
</div>

The same issue occurs if I manually do the markup:

<div class="row" id="bodyDiv" data-controller="orglist">
    <div class="col-md-12">...</div>
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-8">...</div>
            <div class="col-md-4">...</div>
        </div>
        <div class="row">
            <div class="col-md-8">...</div>
            <div class="col-md-4">...</div>
        </div>
        <div class="row">
            <div class="col-md-8">...</div>
            <div class="col-md-4">...</div>
        </div>  
    </div>
</div>

Some notes

The issue is independent of custom css.
The reason this issue bothers me, and how I noticed it, is that it's a multi-page site and it causes the alignments to differ.
This template does have an accompanying layout template, but the issue appears to be independent of that.

Any thoughts?

Solved: see approved answer below

Fix is Ruben's answer here: How to prevent scrollbar from repositioning web page?

Largest ratio of time searching for issue vs. solution ease I have ever had.

Most of my bootstrap rendering issues were due to a missing at the very top of the html document. — Kinjal Dixit, Jan 07 '16 at 06:10
I have it at the top of my layout.hbs. This is a seperate .hbs that uses the layout.hbs — Tyler, Jan 07 '16 at 06:13

score 1 · Accepted Answer · answered Jan 07 '16 at 06:23

1

browser vertical scroll bar show-up when rows >= 3?

answered Jan 07 '16 at 06:23

lee

111
3

That's it. I thought the scroll bar just overlayed the page, but I guess it pushes the content over. Any way to stop this? It isn't a huge deal, but it's kind of ugly and obvious when the user clicks on menu items and the menu pops over. – Tyler Jan 07 '16 at 06:30
you can show scroll bar always by change css html {overflow-y: scroll;} – lee Jan 07 '16 at 06:39

score 0 · Answer 2 · answered Jan 07 '16 at 06:22

As per bootstrap standards, one 'row' should be placed within a .container or .container-fluid, also div can have 12 total grids. for ex

<div class="container">
<div class="row" id="bodyDiv" data-controller="orglist">
 <div class="col-md-12">...</div>
</div>
<div class="row">
  <div class="col-md-8">...</div>
  <div class="col-md-4">...</div>
 </div>...
</div>

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. Please refer:- http://getbootstrap.com/css/

Bootstrap row alignment changing based on number of rows

2 Answers2