Отображение скрытого контейнера внешнего переполнения

У меня есть <table>, который прокручивается, обертывая его в <div> фиксированной высоты.

Этот <table> имеет раскрывающийся компонент (синий контейнер в столбце 2nd строки 1st на изображении и jsfiddle, указанный ниже), который скрывается за контейнером <div>. Я хочу, чтобы он отображал все варианты.

current output

JSFIDDLE (пример)

Как мне добавить компонент выпадающего из контейнера <div>, чтобы отобразить все параметры, как на изображении ниже?

desired output

Если я удалю контейнер pRelative, раскрывающийся список будет полностью виден - но когда я прокручиваю, выпадающий список не прокручивается вместе с ним.

Спасибо заранее.

PS: поиск только для решения CSS/javascript.

ОТВЕТЫ

Ответ 1

Вы можете изменить расположение выпадающего списка на fixed и обработать прокрутку с помощью js, как показано ниже.

var main = document.getElementsByClassName('main')[0];
var dd = document.getElementsByClassName('pAbsolute')[0];
var offset = dd.getBoundingClientRect().top;
main.onscroll = function() {
  var st = main.scrollTop;
  ddt = (offset - st);
  dd.style.top = ddt + 'px';
}
.main {
  height: 100px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.pRelative {
  position: relative;
}
.pAbsolute {
  position: fixed;
}
.dropdown {
  width: 100px;
  background-color: cornflowerblue;
  z-index: 1000;
}
.option {
  border-top: 1px solid green;
  border-bottom: 1px solid green;
}
table td {
  border: 1px solid black;
  padding: 10px;
}
<div class="main">
  <table>
    <tr>
      <td>row1 column1</td>
      <td>
        <div class="pRelative">
          <div class="pAbsolute dropdown">
            <div class="option">Zero</div>
            <div class="option">One</div>
            <div class="option">Two</div>
            <div class="option">Three</div>
            <div class="option">Four</div>
            <div class="option">Five</div>
            <div class="option">Six</div>
          </div>
        </div>
      </td>
      <td>row1 column3</td>
    </tr>
    <tr>
      <td>row2 column1</td>
      <td>row2 column2</td>
      <td>row2 column3</td>
    </tr>
    <tr>
      <td>row3 column1</td>
      <td>row3 column2</td>
      <td>row3 column3</td>
    </tr>
    <tr>
      <td>row4 column1</td>
      <td>row4 column2</td>
      <td>row4 column3</td>
    </tr>
    <tr>
      <td>row5 column1</td>
      <td>row5 column2</td>
      <td>row5 column3</td>
    </tr>
    <tr>
      <td>row6 column1</td>
      <td>row6 column2</td>
      <td>row6 column3</td>
    </tr>
    <tr>
      <td>row7 column1</td>
      <td>row7 column2</td>
      <td>row7 column3</td>
    </tr>
    <tr>
      <td>row8 column1</td>
      <td>row8 column2</td>
      <td>row8 column3</td>
    </tr>
  </table>
</div>

Ответ 2

Вы можете получить желаемую функциональность, используя хороший старомодный <select> выпадающий список:

Рабочий пример

<div class="main">
    <table>
        <tr>
            <td>row1 column1</td>
            <td>
                <select class="dropdown">
                    <option class="option">Zero</option>
                    <option class="option">One</option>
                    <option class="option">Two</option>
                    <option class="option">Three</option>
                    <option class="option">Four</option>
                    <option class="option">Five</option>
                    <option class="option">Six</option>
                </select>
            </td>
            <td>row1 column3</td>
        </tr>

Ответ 3

Пока выпадающий список является дочерним элементом .main, это невозможно с помощью CSS. Это потому, что у вашего .main есть overflow-y: scroll; У вас не может быть торт и есть его тоже.

Ответ 4

Проблема заключается в том, что вы хотите, чтобы раскрывающийся список "убежал" от своего родителя, оставаясь по отношению к нему родителем. Это AFAIK невозможно.

Если вы полностью позиционируете раскрывающийся список, вы "привязываете" его к ближайшему элементу с position: relative в своей прямой родительской цепочке или если этот элемент не находится в элементе html. Существует "трюк", где, если вы не предоставляете никаких top/bottom/left/right -значений, элемент по-прежнему будет позиционировать себя там, где он был бы запущен, если бы он был встроенным.

Вот почему, когда мы удаляем относительно позиционированную обертку, абсолютно раскрывающееся раскрывающееся меню "ускользает" от значения overflow-y: hidden; на .main (потому что оно присоединяется к элементу html). Это также означает, что его позиция не будет затронута, пока html-элемент не будет прокручиваться.

Когда у вас есть относительно позиционная обертка внутри .main, раскрывающийся список отключается, как и все, что внутри него.

Ответ 5

Это то, что вы ищете? ССЫЛКА

HTML:

<td class="hover">hh
  <ul>
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>      
  </ul>
</td>

CSS

td.hover {
    text-align: left;
    list-style: none;        
}
td.hover ul {
    padding: 0;
    position: absolute;
    top: 28px;
    width: 150px;       
    opacity: 0;
    visibility: hidden;       
}
td.hover ul li {
    background: #555;
    display: block;
    color: #fff;
    text-shadow: 0 -1px 0 #000;
}
td.hover ul li:hover {
    background: #666;
}
td.hover:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
}

Ответ 6

try this ,


   <div class="main">
    <table>
        <tr>
            <td>row1 column1</td>
            <td>
                <div class="pRelative">
                    <div class="pAbsolute dropdown">
                        <div class="option">Zero</div>
                        <div class="option">One</div>
                        <div class="option">Two</div>
                        <div class="option">Three</div>
                        <div class="option">Four</div>
                        <div class="option">Five</div>
                        <div class="option">Six</div>
                    </div>
                </div>
            </td>
            <td>row1 column3</td>
        </tr>
        <tr>
            <td>row2 column1</td>
            <td>row2 column2</td>
            <td>row2 column3</td>
        </tr>
        <tr>
            <td>row3 column1</td>
            <td>row3 column2</td>
            <td>row3 column3</td>
        </tr>
        <tr>
            <td>row4 column1</td>
            <td>row4 column2</td>
            <td>row4 column3</td>
        </tr>
        <tr>
            <td>row5 column1</td>
            <td>row5 column2</td>
            <td>row5 column3</td>
        </tr>
        <tr>
            <td>row6 column1</td>
            <td>row6 column2</td>
            <td>row6 column3</td>
        </tr>
        <tr>
            <td>row7 column1</td>
            <td>row7 column2</td>
            <td>row7 column3</td>
        </tr>
        <tr>
            <td>row8 column1</td>
            <td>row8 column2</td>
            <td>row8 column3</td>
        </tr>
    </table>
</div>


**Css**


body{
  position:relative;
}
.main {
    height: 100px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.pAbsolute {
    position: absolute;
}
.dropdown {
    width: 100px;
    background-color: cornflowerblue;
    z-index: 1000;
}
.option {
    border-top: 1px solid green;
    border-bottom: 1px solid green;
}

table td{
    border: 1px solid black;
    padding: 10px;
}

Ответ 7

Это трюк, который работает. но обязательно проверите самостоятельно.

Извлеките свой класс из позиции: относительная позиция фиксирована.

.pRelative {
    position: fixed;
}

Здесь находится DEMO

Ответ 8

Вы хотите, как это,

FIDDLE

я удалил position:relative для .pRelative