How to achieve that only one nested element should overflow it's parent

Question

I'm using the multiple-select jquery plugin for an select element. The outer div (containing the multiple-select box) has a max-height. If I open the multiple-select box it is cut-off and I have to scroll down to see all options:

$('select').multipleSelect();

#outer {
  max-height: 110px;
  overflow: auto;
  background-color: green;
  color: white;
}
#select {
  width: 200px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.min.js"></script>
<div id="outer">
  <p>
    Below you find a multiple select box that should overflow the outer div.
  </p>
  <label for="select">Multiple select:</label>
  <select id="select">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
  </select>
  <p>
    Scroll to the button when the select box is open.
  </p>
  <button>
    Do nothing
  </button>
</div>

JSFiddle

If I open the multiple-select box all options should be visible. So the options should be overflow the outer div. How can I achieve this?

If I set the position of div.ms-parent to fixed I'm getting the desired behavior until I'm scrolling down, because the select box is fixed and not moving with the other content.

Using the z-index also not working in this case.

Possible duplicate of [Displaying an element outside overflow hidden container](http://stackoverflow.com/q/24301400/1577396) — Mr_Green, Oct 05 '16 at 07:28
@marco235 i edited my answer with a better solution. check it out. maybe it will help you better. thanks for accepting my answer :D — Mihai T, Oct 05 '16 at 10:02

score 3 · Answer 1 · answered Oct 05 '16 at 07:33

3

The container option on this plugin achieves that. Try initiating the plugin like this:

$('select').multipleSelect({
   container: "body",
});

https://jsfiddle.net/8mdxuz1w/1/

Then, you'll need to limit the width of the dropdown.

answered Oct 05 '16 at 07:33

Taha Paksu

15,371
2
44
78

Mihai T · Accepted Answer · 2016-10-05T10:01:11.653

i made a kind of oldschool solution with JQ ( as i am not very familiar with multipleselect() plugin )

see here > jsfiddle

code :

$('select').multipleSelect();
var sTop = $('.ms-parent ').offset().top,
sHeight = $('.ms-parent ').height()
$('.ms-drop.bottom').css('top',sTop+sHeight)

CSS

.ms-drop {
  position:fixed;
  width:200px;
}

for the .ms-drop to get out of it's container you need to set position:fixed to it. and then with JQ i calculated it's top position by finding the offset().top of the .ms-parent and it's height. these 2 combined gives the top position of your .ms-drop

hope it helps.

EDIT: jsFiddle

if you want the ms-drop to stay in the same position and not scroll down when you scroll inside the green div ( #outer) you should add a scroll function where you calculate the scroll distance and deduct it from the top position of the ms-drop so it will always stay in that position

so you will have the following JQ :

$('select').multipleSelect();
var sTop = $('.ms-parent ').offset().top,
    sHeight = $('.ms-parent ').height()

$('.ms-drop.bottom').css('top',sTop+sHeight)
$("#outer").on("scroll",function(){
    var oScroll = $(this).scrollTop()
    $('.ms-drop.bottom').css('top',sTop+sHeight-oScroll)

})

I do a little change regarding the start position if the page/div was scrolled. Here is my final solution https://jsfiddle.net/8mdxuz1w/21/ — mbulau, Oct 05 '16 at 10:04
@marco235 well i thought you wanted the `ms-drop` to stay in the same position when you scroll ...... directly under the `.ms-parent ` that's why i made that edit on scroll — Mihai T, Oct 05 '16 at 10:14

How to achieve that only one nested element should overflow it's parent

2 Answers2