Develop Reference

Make Bootstrap 4 dropdown have dynamic height

I am trying to make Bootstrap 4 dropdown have this style: slinky.js.org
This is what I have by now: https://codepen.io/nht910/pen/yLexeEM
Main code:
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="main-container">
<div class="menu-container">
<div class="menu-1">
<span>Link-1</span>
<button class="button-1">arrow-1</button>
</div>
<div class="menu-2">
<span>Link-2</span>
<button class="button-2">arrow-2</button>
</div>
</div>
<div class="submenu-container">
<div class="submenu-1"> <!-- submenu of .menu-1 -->
<div class="arrow-back">
<button class="button-back-1">Arrow back 1</button>
</div>
<div>
<span>Child 1</span>
</div>
</div>
<div class="submenu-2"> <!-- submenu of .menu-2 -->
<div class="arrow-back">
<button class="button-back-2">Arrow back 2</button>
</div>
<div>
<span>Child 2</span>
</div>
</div>
</div>
</div>
</div>
To make dropdown has slide effect:
I set two classes .submenu-1 and .submenu-2 to display: none, and when user click on arrow button, corresponding submenu will be shown and slide to it.
when user click on arrow back, it will slide back to main menu, and after finish sliding effect, it will hide submenu.
That is what I have for now. But I don't know how to resize dropdown's height to fit content inside it (dynamic height) like slinky.js.org.
Thank you so much.

Try using hide & code when you click.
you can simply do it by using jQuery
$("selector").hide() & $("selector").show()
when user clicks your custom buttons

Solution: https://codepen.io/nht910/pen/OJMobEm
I change height of dropdown using JS with .submenu-1 is the content I want dropdown to fit:
$('.dropdown-menu').height($('.submenu-1').outerHeight());
But it got one problem. At the first time I click on arrow button (it is the first time height of dropdown changed), the transition animation doesn't work. But after that, it work perfectly. So I add another line at global to make the first time that height is changed happen on page load. And now it work perfectly for me.

bootstrap 4 scroll only mid column /facebook like scroll

i have 3 column in bootstrap and i want the scroll only the middle dive while keeping the position relative to the parent container . something like facebook scroll
<div class="container">
<div class="row">
<div class="col-md-3">stop scrolling when content end </div>
<div class="col-md-6"> SCROLL </div>
<div class="col-md-3"> stop scrolling when content end </div>
</div>
</div>
i tried using position fixed , but when i use it .it messes the grid system , thats why i want the position to stay relative to the parent if possible .

If I understand the question, you can use sticky-top like this...
https://www.codeply.com/go/IL1wlzpNEP
<div class="container">
<div class="row">
<div class="col-md-3"> <div class="sticky-top">side</div> </div>
<div class="col-md-6"> SCROLL </div>
<div class="col-md-3"> <div class="sticky-top">side</div> </div>
</div>
</div>
The middle column will scroll the length of its' content.

jQuery slidedown menu trigger makes menu slideup too quickly

I have the following html:
<div class="col-sm-12" id='dropdown_menu_group'>
<div id='dropdown_library_menu'>
<div class="row" id='dropdown_menu_row'>
<div class="col-sm-2">
<a class='button-text btn' id='library_button' href="{{pathFor 'library'}}">my library</a>
</div>
<div class='col-sm-2 col-sm-pull-1' id='google_drive_text'>
GOOGLE DRIVE
</div>
<div class="col-sm-2" id='settings_button'></div>
</div>
</div>
<div id='dropdown_library_menu_border'></div>
</div>
my id='dropdown_library_menu' is hidden by default, and the div below it <div id='dropdown_library_menu_border'></div> has opacity of 0, so that when it is scrolled over, it makes the id='dropdown_library_menu' slide down. The issue is, though, that <div id='dropdown_library_menu_border'></div> is still there when the menu slides down, and thus, when I scroll over the opacity 0 div that triggers the slideDown (inside of the menu, at this point), it tricks my jQuery into thinking this condition is met:
'mouseout #dropdown_library_menu': function(ev){
ev.preventDefault();
$('#dropdown_library_menu').slideUp('slow');
}
Because technically, I am mousing out of the dropdown menu and into the dropdown menu trigger.
I want to make the blank div move to the bottom of the menu when the slideDown is triggered, but setting position relative on the parent and position absolute on the children totally messes up my webpage.

You can make it even slower,
'mouseout #dropdown_library_menu': function(ev){
ev.preventDefault();
$('#dropdown_library_menu').slideUp(3000); // Slide up in 3 seconds,
}

why nanoscrollbar does not work?

I added nanoscrollbar to my code, it has effect but the scroll not seen. I think scroll's div has class pane but its not even seen in DOM while inspecting. What is missing?
And I added below link nano.css, jquery, nano.js.
<script>$(document).ready(function(){$(".nano").nanoScroller();});</script>
<body>
<div id="about" class="nano">
<div class="nano-content">
This is the content box and it should be scrolling but it is not!! =/.
This is the content box and it should be scrolling but it is not!! =/. This is the content box and it should be scrolling but it is not!! =/. This is the content box and it should be scrolling but it is not!! =/. This is the content box and it should be scrolling but it is not!! =/.
</div>
</div>
</body>

Moving divs in mobile view with Bootstrap offsets

I have the following set of divs:
<div class="col-md-12">
<div class="col-md-5" id="left">
<div id="A"></div>
<br />
<div id="B"></div>
</div>
<div class="col-md-5" id="right">
<div id="C"></div>
</div>
</div>
So we have a left and right column, with the left column containing two divs and the right column containing one. JSFiddle doesn't seem to have Bootstrap as an option so I had to make do.
What I want to achieve, when in mobile view, is this:
You can see the div that was at the top left, div A, is now at the bottom. I know I need to use offsets for this, but my tinkering has produced no results.