2

I made a simple search app with React and Bootstrap's Grid. The problem is that when products render it makes the entire interface move to left with ~10px. It happens when 4 or more products are rendered.

This happens

I think it's either from padding or margin and is somehow related to bootstrap's grid.

Code structure:

<div className="container">
 <div className="row">
  <div className="col-md-3">Sidebar</div>
  <div className="col-md-9">
   <div className="row">
    <div className="col-md-9">Searchbar here</div>
    <div className="col-md-3">Cart</div>
    <div className="col-md-12">
     <div className="row">
      <div className="col-md-3">1 button here</div>
      <div className="col-md-2">2 button here</div>
      <div className="col-md-12">
       <div className="row">
        //here are rendered all products
        <div className="col-md-4">Product 1</div>
        ....
       </div>
      </div>
     </div>
    </div>
   </div>
 </div>
</div>

*i also noticed this bug on feathericons.com when using search

Tholle
  • 108,070
  • 19
  • 198
  • 189
daed dadad
  • 55
  • 1
  • 5

1 Answers1

3

That's because the scroll bar appears when you render more than a certain amount of items. You can always show it to get around this.

body {
  overflow-y: scroll;
}
Tholle
  • 108,070
  • 19
  • 198
  • 189
  • @daeddadad Alright, that's frustrating. Then you might want to use `overflow-y: scroll;` on the scrollbar on the other element that gives you the scrollbar instead. – Tholle Jul 10 '18 at 09:57
  • 1
    i used it on body and it worked, thank you very much! – daed dadad Jul 10 '18 at 09:59