1

I have a modal that contains two columns. I am trying to make the columns scrollable independent of each other. The important thing is that I want the tick scrollbar be hidden.

I have only made the row scrollable and the scrollbar is hidden. But I can't make the two columns be so.

https://codepen.io/anon/pen/bKxodX

There are a few similar questions have been asked before, but they did not help.

How can i make 3 independently scrollable columns

How to create two independently-scrollable columns in a responsive grid?

Hide scroll bar, but while still being able to scroll

Update

This is a widget in an App that we use. So, I am can not change style of body, html, and the parent of container-fluid.

mahan
  • 12,366
  • 5
  • 48
  • 83

1 Answers1

3

I believe below approach solves your issue. Scrollbars are hidden using trick with overflow: hidden and hiding scrollbar with padding.

.col {
  overflow: hidden;
}

.col-inner {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  padding-right: 30px;
  box-sizing: content-box;
}

-> Codepen.

Andrzej Ziółek
  • 2,241
  • 1
  • 13
  • 21
  • Thank you for letting me know, you are totally right. [I've updated my codepen](https://codepen.io/ajzk/pen/MXqErm), could you please let me know if it's OK for you know? You can adjust precise padding's values, of course. – Andrzej Ziółek Jun 26 '18 at 12:11
  • Thanks. But if you have a an another container at the top, some part of the container that contains the columns is not visible. https://codepen.io/anon/pen/yExvQX – mahan Jun 26 '18 at 13:04
  • I can't seem to be able to see your issue... I see whole container with columns, nothing is cut-off. – Andrzej Ziółek Jun 26 '18 at 13:09
  • Try decrease the height of the window – mahan Jun 26 '18 at 13:18
  • I've once again [updated my Codepen](https://codepen.io/ajzk/pen/EReEmr). Simple flex-trick denies problems with use of `position: absolute`. Check it, please. – Andrzej Ziółek Jun 26 '18 at 13:24