position absolute in relative hide overflow

Question

I'm trying to display a scrollable dropdown in a scrollable div

To manage dropdown, I'm using position:relative on the container and position:absolute on the content, but if the dropdown content is higher than the container, or start at the end of the scrollable content, it will be displayed below, and maybe hiden by the overflow example

example

I'm looking for a way to display this dropdown outside/over the parent div, like a native select do.

I have something like this

+------------------------+
|   other                |
|   show                 |
|   +---------------+    |
|   | Content which |    |
|   | expands over  |    |
+------------------------+

... but I want something like this (thanks for the illustration :) ) :

+------------------------+
|   other                |
|   show                 |
|   +---------------+    |
|   | Content which |    |
|   | expands over  |    |
+---| the parent.   |----+
    +---------------+

Here is an example of what I'm trying to do https://codepen.io/spoissonnierAz/pen/LYWOarx

HTML

    <div class="parent">
      <div class="data">other</div>
      <div  class="data">
        <div id="show1" onclick="$('#dropdown-content1').show();$('#show1').hide();$('#hide1').show()">show</div>
        <div id="hide1" onclick="$('#dropdown-content1').hide();$('#show1').show();$('#hide1').hide()">hide</div>
        <ul id="dropdown-content1" class="dropdown-content">
          <li>data</li>
          ...
          <li>data end</li>
        </ul>
      </div>
      <div class="data">other</div>
      ...
      <div class="data">other</div>
      <div  class="data">
        <div id="show2" onclick="$('#dropdown-content2').show();$('#show2').hide();$('#hide2').show()">show</div>
        <div id="hide2" onclick="$('#dropdown-content2').hide();$('#show2').show();$('#hide2').hide()">hide</div>
        <ul id="dropdown-content2" class="dropdown-content">
          <li>data</li>
          ...
          <li>data</li>
          <li>data end</li>
        </ul>
      </div>
      <div class="data">other</div>
      <div class="data">
        <select>
          <option>data</option>
          ....
          <option>data</option>
          <option>data end</option>
        </select>
      </div>
      <div class="data">other</div>
    </div>

CSS

.parent {
  overflow: auto;
}

.data {
  position:relative;
}

.dropdown-content  {
  display: none;
  position: absolute;
  height:100px;
  overflow: auto;
  z-index:50;
}

.dropdown-content > li {
  display: block;
}

#hide1,#hide2 {
  display: none
}

Thanks

Greetings, paste some code in a snippet and maybe someone will find the issue to help. — lanpierre
– lanpierre, Commented May 31, 2021 at 13:42
Ok! I see you pasted the code from the code pen you shared earlier.. jeje. But why isn't it working for YOU? the context defines the outcome. — lanpierre
– lanpierre, Commented May 31, 2021 at 13:59
The content of the dropdown is displayed inside the parent div and hide because of the div height. I'm looking for a way, something like z-index, to display the dropdown above, like the native select input. but I don't know if it's posible ^^ — Sam Az
– Sam Az, Commented May 31, 2021 at 14:09
I'm not following either, in the codepen I see you have another dropdown inside the first, but I'm able to see the whole content, can you clarify your issue futher? — Wiston Coronell
– Wiston Coronell, Commented May 31, 2021 at 15:16
I want the content of the dropdown ouside de parent div, like the illustration posted by @PeterKerbs — Sam Az
– Sam Az, Commented May 31, 2021 at 15:47

Peter Pointer · Accepted Answer · 2021-05-31 14:54:01Z

1

I am assuming you have this...

    +------------------------+
    |   other                |
    |   show                 |
    |   +---------------+    |
    |   | Content which |    |
    |   | expands over  |    |
    +------------------------+

... but you want this:

    +------------------------+
    |   other                |
    |   show                 |
    |   +---------------+    |
    |   | Content which |    |
    |   | expands over  |    |
    +---| the parent.   |----+
        +---------------+

You can position the container with additional information using .position() and .offset() or use .css() directly, which ever works for you.
See stackoverflow search results for "jquery position element relative to another" or similar.
One example here: How to position one element relative to another with jQuery

answered May 31, 2021 at 14:54

Peter Pointer

4,2542 gold badges21 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sam Az Over a year ago

Thanks for the illustration, it's exactly what I want. I will take a look for other post with keywords you mentioned

Collectives™ on Stack Overflow

position absolute in relative hide overflow

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related