1

I have a page, the left half is a dashboard with thumbnails and the right half is a map. My issue is that as I get more entries the dashboard increases and the whole page scrolls, instead of just the dashboard. I want it to work like the Airbnb booking page, parallel side by side scrolling. I have tried using overflow in css but somehow still doesn't work.

this is the html of the component that displays the two aspects, map and dashboard. 

<div class="container-fluid">
  <div class="row">
    <app-artwork-dashboard class="col-lg-5 mt-3 scroll" #list (add)="input.startAddingArtwork()" (edit)="input.startEditingArtwork($event)">    </app-artwork-dashboard>
    <app-open-street-map class="col-lg-7 map-shadow"></app-open-street-map>
  </div>
</div>

and here the css:

.scroll {
  overflow-x: scroll;
  overflow-y: scroll;
}

on the dashboard i have a scroll class which should technically make that side of the page scroll-able, at least I thought so!

Carlos Mermingas
  • 3,822
  • 2
  • 21
  • 40
felixo
  • 1,453
  • 6
  • 33
  • 60

1 Answers1

2

Try this in your case:

.container{max-width:50%;  width:50%; float:left; height:100vh; overflow-x: scroll;overflow-y: scroll; overflow:scroll;}

<div class="container"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<div class="container"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Or you can use flex to wrap div to set them side by side and style box as below:

.wrap{display:flex;}
.box{
height: 100vh;
    width: 50vw;
    overflow: scroll;
}

<div class="wrap">
  <div class="box">

  </div>
  <div class="box">

  </div>
</div>

Another solution with inline-block:

.box{
  display:inline-block;
  height: 100vh;
   width: 49%;
    overflow: scroll;
}

<div class="box">
</div>
<div class="box">
</div>
Jánosi-Borsos Róbert
  • 500
  • 6
  • 17