How to disable column from vertical scrolling in html and bootstrap?

Question

I'm trying to disable vertical scroll on one bootstrap column and make the other column scrollable. I've make this code :

HTML :

<div class="h-100">
    <div class="container">
      <div class="row">
        <div class="col-3 fixed h-100 bg-secondary"></div>
        <div
          class="col-9"
        >Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum maxime aliquid sint natus ipsa molestiae quam blanditiis nisi ab laboriosam repellendus, corporis, modi omnis, veniam praesentium doloribus officia! In iusto quam delectus vero veniam. Quasi ex similique sint pariatur culpa labore, debitis quidem eveniet, sed praesentium consectetur nemo expedita</div>
      </div>
    </div>
  </div>

CSS :

.fixed {
  position: fixed !important;
  top: 0px;
  left: 0px;
  bottom: 0px;
}

But the text on the second column goes inside the first column , how to fix that ?

To what element are you adding that CSS? – IvanS95 Mar 27 '19 at 15:26 — IvanS95, Mar 27 '19 at 15:26
I've fixed the code, check it again – Ayman Tarig Mar 27 '19 at 15:27 — Ayman Tarig, Mar 27 '19 at 15:27
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow – Roberto Zvjerković Mar 27 '19 at 15:28 — Roberto Zvjerković, Mar 27 '19 at 15:28

score 0 · Answer 1 · answered Mar 27 '19 at 15:29

0

To disable the vertical scrolling of an element, apply the following CSS to the element:

overflow-y: hidden;

answered Mar 27 '19 at 15:29

Xander

991
1
13
32

The scrolling is already disabled, but the text on the right hand side goes inside the left column – Ayman Tarig Mar 27 '19 at 15:30
That's because of your `position: fixed`, it takes the element out of the document flow; so other elements are not affected by it and the other columns takes it as if its not even there – IvanS95 Mar 27 '19 at 15:32
Are the columns overlapping or do you mean the text is overflowing the column? Try overflow: none; – Xander Mar 27 '19 at 15:32
Ivan is correct, it sounds like your columns are actually overlapping each other. However, it doesn't actually seem like you need the position of the left column to be fixed. – Xander Mar 27 '19 at 15:33
`position: fixed` is not necessary; I don't think it does what OP think it does – IvanS95 Mar 27 '19 at 15:35
@AymanTarig I don't think you need to use the .fixed class at all – Xander Mar 27 '19 at 15:38
@Xander tell me what should I do ? I want to achive this behavior in this site : https://blog.squarespace.com/blog/introducing-promotional-pop-ups – Ayman Tarig Mar 27 '19 at 15:41
@AymanTarig Try making left column height 100% with overflow hidden. Then make sure right column has enough content inside it to be scrollable. The left column might not need to be fixed. – Xander Mar 27 '19 at 15:48

IvanS95 · Answer 2 · 2019-03-27T15:55:43.393

Take a look at this:

body {
  margin: 0;
}

body * {
  box-sizing: border-box;
}

.main-container {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.side-panel {
  position: fixed;
  height: 100vh;
  background-color: grey;
  width: 33%;
}

.content {
  width: 100%;
  background-color: black;
  color: white;
  margin-left: 33%;
  padding: 15px;
}

@media (max-width: 540px) {
  .main-container {
    display: block;
    flex-wrap: wrap;
  }
  .side-panel {
    position: static;
    width: 100%;
    min-height: 250px;
    height: auto;
  }
  .content {
    width: 100%;
    margin-left: 0;
  }
}

<div class="main-container">
  <div class="side-panel"></div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
    deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

looks like you don't understand what i mean , see this site : https://blog.squarespace.com/blog/introducing-promotional-pop-ups — Ayman Tarig, Mar 27 '19 at 15:42
Then you should provide that in your question in the first place; that's not something you should be doing with Bootstrap columns; it will give you more troubles that creating it from scratch using flexbox — IvanS95, Mar 27 '19 at 15:44
I try using flexbox but i get some responsiveness issues on small screen devices — Ayman Tarig, Mar 27 '19 at 15:46

How to disable column from vertical scrolling in html and bootstrap?

2 Answers2