CODEWITHSUNDEEP
htmlcss
Sam Az
Sam Az

Reputation: 1

position absolute in relative hide overflow

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

Upvotes: 0

Views: 142

Answers (1)

Peter Pointer
Peter Pointer

Reputation: 4162

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

Upvotes: 1

Related Questions