Значения раскрывающегося списка скрыты внутри заголовка прокручиваемой таблицы - Primeng

Я использовал p-таблицу Primeng с фильтром и функцией замороженного столбца (один столбец заморожен, остальные можно перемещать). В заголовке я даю раскрывающийся список выбора в качестве элемента управления фильтром. Когда я открываю раскрывающийся список, значения скрываются, как показано на рисунке.

Раскрывающийся список со скрытыми значениями

Поскольку заголовок таблицы прокручивается, он имеет свойство overflow: hidden. Поэтому, когда я удаляю это, значения раскрывающегося списка становятся видимыми, но заголовок таблицы не скрывается, как показано ниже.

После удаления скрытого переполнения


javascript angular css primeng primeng-turbotable
person tariqzak    schedule 24.01.2019    source источник
comment
Вы пробовали проверить элементы CSS и установить overflow-x: auto?   -  person Victor Henrique    schedule 24.01.2019
comment
Да, я пробовал применить overflow-x: auto также к заголовку таблицы, где применяется overflow:hidden.   -  person tariqzak    schedule 24.01.2019

Ответы (1)


arrow_upward
7
arrow_downward

Я воспроизвел вашу проблему. И есть что-то под названием appendTo для раскрывающегося списка. Что легко решит эту проблему.

Просто добавьте эту опцию в раскрывающийся список, как показано ниже:

<p-dropdown appendTo="body" placeholder="Type or Select"></p-dropdown>

Это все.

2-й вариант:

перезаписать ниже CSS:

.ui-table-scrollable-header.ui-widget-header {
        overflow:visible;
    }

Это просто еще один способ сделать это.

person DirtyMind    schedule 25.01.2019
comment
Я попытался использовать опцию appendTo, но раскрывающийся список застревает на странице, а поскольку таблица прокручивается, заголовок столбца перемещается в другое место. При использовании вашего второго варианта проблема возникает, как показано на 2-м рисунке моего вопроса. Спасибо кстати - person tariqzak; 25.01.2019
comment
@tariqzak, можешь поделиться своим кодом. Потому что я сделал то же самое, и он отлично работает. Также я использую angular vs 6 и primeng v6. Я хочу посмотреть, как вы пробовали эти варианты, о которых я говорил. - person DirtyMind; 25.01.2019
comment
убедитесь, что вы не используете appendTo внутри квадратных скобок, например [appendTo]. - person DirtyMind; 25.01.2019
comment
Хороший человек! Первый вариант работает нормально! - person Bhavik Kalariya; 10.05.2021