title: Angular 2 *ngFor causing bootstrap 4 column content to be too skinny
body: <p>I have a results div that displays search results. The results are in bootstrap columns. However, the columns appear to have a heap of padding or margin, causing my results to be super skinny. If I take out the <code>*ngFor</code> and instead hardcode each result, it displays correctly. </p>
  
  <p>Here is the div that iterates over a list of results, creating a result to display for each result:</p>
  
  <pre><code>&lt;div id="results" class="text-uppercase"&gt;
      &lt;div id="up-button-row" class="row"&gt;
          &lt;div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-xl-4 
              offset-xl-4"&gt;
              &lt;button id="up-button" class="m-x-auto" md-fab [disableRipple]="true" (click)="scrollUp()"&gt;&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row" *ngIf="noResults"&gt;
          &lt;div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-xl-4 
              offset-xl-4"&gt;
              &lt;h2 class="m-x-auto"&gt;No vegan stuff found :-(&lt;/h2&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row" *ngIf="!noResults"&gt;
          &lt;div *ngFor="let result of results"&gt;
              &lt;result [result]="result"&gt;&lt;/result&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>this is the bit that holds the search results:</p>
  
  <pre><code>&lt;div class="row" *ngIf="!noResults"&gt;
      &lt;div *ngFor="let result of results"&gt;
          &lt;result [result]="result"&gt;&lt;/result&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Each search result is a component called result.component. Here is the template for that:</p>
  
  <pre><code>&lt;div class="col-sm-6 col-md-4 col-xl-3"&gt;
     &lt;div class="product-item scale-on-hover"&gt;
        &lt;div [ngStyle]="{background: result.image}" id="image"&gt;&lt;/div&gt;
        &lt;div id="info"&gt;
           &lt;h6 id="brand" class="medium-text"&gt;{{result.brand}}&lt;/h6&gt;
           &lt;h6 id="name" class="medium-text"&gt;{{result.name}}&lt;/h6&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>For some reason, the results are super skinny, cutting out most of the content in the result.</p>
  
  <p>Here is an image of what I mean:</p>
  
  <p><a href="https://i.stack.imgur.com/1wCck.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1wCck.png" alt="enter image description here"></a></p>
  
  <p>So that is hovering over the actual result (which I am calling a product item).</p>
  
  <p>Here is hovering over the bootstrap column:</p>
  
  <p><a href="https://i.stack.imgur.com/QEGOe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QEGOe.png" alt="enter image description here"></a></p>
  
  <p>So the column seems to have a heap of padding or margin.</p>
  
  <p>Here is the output styling of the column copy and pasted from the styles tab of the console in Google Chrome:</p>
  
  <pre><code>element.style {
  }
  @media (min-width: 1200px)
  .col-xl-3 {
      -webkit-box-flex: 0;
      -webkit-flex: 0 0 25%;
      -ms-flex: 0 0 25%;
      flex: 0 0 25%;
      max-width: 25%;
  }
  @media (min-width: 768px)
  .col-md-4 {
      -webkit-box-flex: 0;
      -webkit-flex: 0 0 33.333333%;
      -ms-flex: 0 0 33.333333%;
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
  }
  
  @media (min-width: 544px)
  .col-sm-6 {
      -webkit-box-flex: 0;
      -webkit-flex: 0 0 50%;
      -ms-flex: 0 0 50%;
      flex: 0 0 50%;
      max-width: 50%;
  }
  .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
      position: relative;
      min-height: 1px;
      padding-right: 15px;
      padding-left: 15px;
      width: 100%;
  }
  *, *::before, *::after {
      -webkit-box-sizing: inherit;
      box-sizing: inherit;
  }
  user agent stylesheet
  div {
      display: block;
  }
  Inherited from div#results.text-uppercase
  .text-uppercase {
      text-transform: uppercase !important;
  }
  Inherited from body
  body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      font-size: 1rem;
      line-height: 1.5;
      color: #373a3c;
      background-color: #fff;
  }
  Inherited from html
  html {
      font-size: 16px;
      -ms-overflow-style: scrollbar;
      -webkit-tap-highlight-color: transparent;
  }
  html {
      font-family: sans-serif;
      -ms-text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%;
  }
  Pseudo ::before element
  *, *::before, *::after {
      -webkit-box-sizing: inherit;
      box-sizing: inherit;
  }
  Pseudo ::after element
  *, *::before, *::after {
      -webkit-box-sizing: inherit;
      box-sizing: inherit;
  }
  </code></pre>
  
  <p>Why are the results so skinny? What is causing the margin or padding in the bootstrap columns? The default width is 100%. I want the width of each result to be 100% of the column width. I cannot set a static width. I need them to scale with the bootstrap columns. </p>
  
  <p>Here is my css for results:</p>
  
  <pre><code>#results {
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 50px;
    padding-top: 10px; }
  
  h1 {
    margin-left: 25px;
    color: #ff8282; }
  
  h2 {
    color: #ff8282;
    text-align: center; }
  
  button {
    display: inherit;
    background: #00BFA5 url("../images/up-arrow.png") center no-repeat;
    background-size: 40%;
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999; }
  
  #up-button-row {
    padding-bottom: 40px; }
  </code></pre>
  
  <p>Here is my css for result:</p>
  
  <pre><code>#image {
    height: 160px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: white;
    background: center no-repeat;
    background-size: cover;
    vertical-align: bottom; }
  
  #info {
    height: 110px;
    padding: 10px;
    background: #fc4747; }
  
  #brand {
    text-transform: uppercase;
    color: white;
    margin-top: 0;
    margin-bottom: 5px; }
  
  #name {
    text-transform: uppercase;
    color: white;
    margin-bottom: 5px;
    display: inline; }
  
  div.product-item.scale-on-hover:hover {
    transform: scale(1.15); }
  
  div.product-item {
    border: 5px solid brand-red;
    border-radius: 15px;
    height: 240px;
    overflow: hidden;
    cursor: pointer; }
  </code></pre>
  
  <p>edit: when I change the bootstrap column to col-xl-12 it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/NcCPI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NcCPI.png" alt="enter image description here"></a></p>
  
  <p>So weird. col-xl-12 should make the column take up the whole width of the screen as I'm on an xl size screen. </p>
  
  <p>It is something to do with the bootstrap row. Because I have 10 results, they do not all fit on one row. However I thought bootstrap simply pushes content down to a new row if content goes over the allotted columns.</p>
  
  <p>If I take out <code>class="row"</code> I get this:</p>
  
  <p><a href="https://i.stack.imgur.com/BN2dg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BN2dg.png" alt="enter image description here"></a> </p>
  
  <p>If I hardcode the results into the results template like this instead of using *ngfor, it works!! But i need to iterate over the list rather than hardcode :( </p>
  
  <pre><code>&lt;div id="results" class="text-uppercase"&gt;
      &lt;div id="up-button-row" class="row"&gt;
          &lt;div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-xl-4 
              offset-xl-4"&gt;
              &lt;button id="up-button" class="m-x-auto" md-fab [disableRipple]="true" (click)="scrollUp()"&gt;&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row" *ngIf="noResults"&gt;
          &lt;div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-xl-4 
              offset-xl-4"&gt;
              &lt;h2 class="m-x-auto"&gt;No vegan stuff found :-(&lt;/h2&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row" *ngIf="!noResults"&gt;
          &lt;!--&lt;div *ngFor="let result of results"&gt;
              &lt;result [result]="result"&gt;&lt;/result&gt;
          &lt;/div&gt;--&gt;
          &lt;div class="col-sm-6 col-md-4 col-xl-3"&gt;
     &lt;div class="product-item scale-on-hover"&gt;
        &lt;div  id="image"&gt;&lt;/div&gt;
        &lt;div id="info"&gt;
           &lt;h6 id="brand" class="medium-text"&gt;result.brand&lt;/h6&gt;
           &lt;h6 id="name" class="medium-text"&gt;result.name&lt;/h6&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-6 col-md-4 col-xl-3"&gt;
     &lt;div class="product-item scale-on-hover"&gt;
        &lt;div  id="image"&gt;&lt;/div&gt;
        &lt;div id="info"&gt;
           &lt;h6 id="brand" class="medium-text"&gt;result.brand&lt;/h6&gt;
           &lt;h6 id="name" class="medium-text"&gt;result.name&lt;/h6&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-6 col-md-4 col-xl-3"&gt;
     &lt;div class="product-item scale-on-hover"&gt;
        &lt;div  id="image"&gt;&lt;/div&gt;
        &lt;div id="info"&gt;
           &lt;h6 id="brand" class="medium-text"&gt;result.brand&lt;/h6&gt;
           &lt;h6 id="name" class="medium-text"&gt;result.name&lt;/h6&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-6 col-md-4 col-xl-3"&gt;
     &lt;div class="product-item scale-on-hover"&gt;
        &lt;div  id="image"&gt;&lt;/div&gt;
        &lt;div id="info"&gt;
           &lt;h6 id="brand" class="medium-text"&gt;result.brand&lt;/h6&gt;
           &lt;h6 id="name" class="medium-text"&gt;result.name&lt;/h6&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-6 col-md-4 col-xl-3"&gt;
     &lt;div class="product-item scale-on-hover"&gt;
        &lt;div  id="image"&gt;&lt;/div&gt;
        &lt;div id="info"&gt;
           &lt;h6 id="brand" class="medium-text"&gt;result.brand&lt;/h6&gt;
           &lt;h6 id="name" class="medium-text"&gt;result.name&lt;/h6&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-6 col-md-4 col-xl-3"&gt;
     &lt;div class="product-item scale-on-hover"&gt;
        &lt;div  id="image"&gt;&lt;/div&gt;
        &lt;div id="info"&gt;
           &lt;h6 id="brand" class="medium-text"&gt;result.brand&lt;/h6&gt;
           &lt;h6 id="name" class="medium-text"&gt;result.name&lt;/h6&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-6 col-md-4 col-xl-3"&gt;
     &lt;div class="product-item scale-on-hover"&gt;
        &lt;div  id="image"&gt;&lt;/div&gt;
        &lt;div id="info"&gt;
           &lt;h6 id="brand" class="medium-text"&gt;result.brand&lt;/h6&gt;
           &lt;h6 id="name" class="medium-text"&gt;result.name&lt;/h6&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-6 col-md-4 col-xl-3"&gt;
     &lt;div class="product-item scale-on-hover"&gt;
        &lt;div  id="image"&gt;&lt;/div&gt;
        &lt;div id="info"&gt;
           &lt;h6 id="brand" class="medium-text"&gt;result.brand&lt;/h6&gt;
           &lt;h6 id="name" class="medium-text"&gt;result.name&lt;/h6&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-6 col-md-4 col-xl-3"&gt;
     &lt;div class="product-item scale-on-hover"&gt;
        &lt;div  id="image"&gt;&lt;/div&gt;
        &lt;div id="info"&gt;
           &lt;h6 id="brand" class="medium-text"&gt;result.brand&lt;/h6&gt;
           &lt;h6 id="name" class="medium-text"&gt;result.name&lt;/h6&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-6 col-md-4 col-xl-3"&gt;
     &lt;div class="product-item scale-on-hover"&gt;
        &lt;div  id="image"&gt;&lt;/div&gt;
        &lt;div id="info"&gt;
           &lt;h6 id="brand" class="medium-text"&gt;result.brand&lt;/h6&gt;
           &lt;h6 id="name" class="medium-text"&gt;result.name&lt;/h6&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>result (never mind the image not being there - I just didnt add it):</p>
  
  <p><a href="https://i.stack.imgur.com/9Yoih.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9Yoih.png" alt="enter image description here"></a></p>
  
  <p>I am open to workarounds such as not having a seperate component for the result, or trying to use something other than <code>*ngFor</code> to iterate the results collection. However the result will get more complex so ideally it should be a seperate component.</p>
  
  <p>Here is a <a href="https://jsfiddle.net/n5pjgev6/89/" rel="nofollow noreferrer">jsfiddle</a>. It has console errors, however, it is only one component so if you can make an angular 2 jsfiddle with that exact component that doesn't have any console errors then we are in business: <a href="https://jsfiddle.net/n5pjgev6/89/" rel="nofollow noreferrer">https://jsfiddle.net/n5pjgev6/89/</a> I started it from this one:  <a href="https://jsfiddle.net/langdonx/u7c89uuz/" rel="nofollow noreferrer">https://jsfiddle.net/langdonx/u7c89uuz/</a> Now I am not sure which version of angular 2 he used so that may be the issue. I cannot find the angular 2 cdn. He bootstraps the app with different syntax than rc5. However, my component doesnt really look like it has anything that is rc5 specific so I wouldn't have thought it would matter.</p>