Столбец липких действий в таблице с разбивкой на страницы делает строки ниже белого при открытии модального окна – проблJavascript

Форум по Javascript
Ответить
Anonymous
 Столбец липких действий в таблице с разбивкой на страницы делает строки ниже белого при открытии модального окна – пробл

Сообщение Anonymous »

Я работаю над проектом React и наблюдаю необычное поведение пользовательского интерфейса, о котором не могу понять.
Описание функции
  • Таблица с разбивкой на страницы
  • Последний столбец представляет собой столбец с закрепленными действиями (

    Код: Выделить всё

    position: sticky
    )
  • В каждой строке есть кнопка действия с тремя точками
  • При нажатии на нее открывается всплывающее окно
  • Каждая опция всплывающего окна запускает модальное, которое также запускает POST-запрос к серверная часть
Ожидаемое поведение
Когда открывается модальное окно:
  • Модальное окно появляется над всем ( в Tailwind)
  • Фоновое содержимое размыто или затемнено
  • Строки таблицы должны визуально оставаться неизменными внизу
Фактическое поведение
Когда я нажимаю действие в строке:
  • Модальное окно открывается правильно
  • НО каждая строка ниже выбранной строки получает белый фон
  • Строки над выбранной строкой выглядят нормально
  • Столбец прикрепленных действий уже имеет белый фон (предназначено)
Соответствующий стиль
  • Модальное наложение: z-50
  • Прикрепленный столбец действий: z-10 + белый фон
  • Модальное наложение размывает фон
Структура компонентов (упрощенная)
  • Таблица построена с использованием массива конфигурации столбцов
  • Каждый столбец определяет:

  • Метку заголовка
  • Ячейку рендерер
[*]Для столбца липких действий:

[*]
  • Значение ячейки — ReactNode
  • Этот компонент содержит:

  • Кнопка с тремя точками
  • Компонент Popover
  • Модальная логика внутри всплывающего окна



Мое замешательство
  • Модальное окно имеет более высокий z-индекс, чем прикрепленный столбец, поэтому оно правильно отображается сверху.
  • Но почему все строки ниже выбранной строки получают белый фон?
  • Это:

  • A проблема с контекстом стекирования?
  • Что-то связано с положением: липким созданием нового контекста стекирования?
  • Побочный эффект модального наложения/фона?
  • Проблема с перерисовкой/перекомпоновкой, вызванная тем, как смонтировано всплывающее окно/модальное окно?


Подробнее здесь: https://stackoverflow.com/questions/798 ... ening-moda
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»