Блог

Реагировать 16.13.1; Семантический пользовательский интерфейс реагирует 2.0.2

Происходит в Chrome, Firefox и Edge

Я использую SortableContainer from react-sortable-hoc package для создания пользовательского интерфейса для сортировки массива. У меня возникли проблемы со стилем css в контексте, в котором я хотел бы использовать пакет. В другом контексте он ведет себя так, как мне хотелось бы.

Вот контекст, в котором он работает. Смотрите Примечания под каждым изображением.

На приведенном выше изображении список сортировки находится в левом нижнем углу. Это показывает его состояние ожидания для контекста.

На приведенном выше изображении обратите внимание, что элемент списка, который перетаскивается, имеет желтую рамку, и текст виден. SortableList Элемент создает новый элемент по требованию, который перетаскивается. Стиль задается классом, который передается SortableList элементу. В этом случае вызывается класс file-upload-sortable-list-item-helper , как показано на панели элементов красной стрелкой.

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

На приведенном выше рисунке сортируемый список находится в модальном окне и находится в режиме ожидания. Пока все хорошо.

На приведенном выше рисунке перетаскиваемый элемент оформлен неправильно и практически невидим (красная стрелка 1), хотя на панели элементов показано, что file-upload-sortable-list-item-helper для элемента установлено значение (красная стрелка 2).

Я не могу понять, как заставить инструменты разработчика Chrome показывать мне сведения о стиле элемента для перетаскиваемого элемента, потому что, если я вхожу в режим выбора элемента и нажимаю на элемент списка, он не активируется для перетаскивания. Затем я должен нажать еще раз, чтобы начать перетаскивание, но к тому времени режим выбора элемента отключен.

Вот соответствующие определения стилей

 .file-upload-sortable-list {
    list-style-type: none;
    margin: auto;
    width: 80%;
    padding: 10px 5px;
}
.file-upload-sortable-list-item {
    /*border-style: solid;*/
    border: 1px solid;
    text-align: center;
    padding: 2px;
    border-color: rgb(84,200,255);
    border-radius: 4px;
}
/* This class is for the list item that moves
around when using the SortableList. Because
of how it's instantiated on-demand, it can't be
a child of .pennai.
The most important part is the z-index. Without it
the element isn't visible at all.
See https://github.com/clauderic/react-sortable-hoc/issues/87
*/
.file-upload-sortable-list-item-helper {
    border: 2px solid;
    text-align: center;
    /* something happens to the padding compared to the regular item defined above,
       and the text is aligned at bottom of border instead of middle.
       But these settings aren't effecting things. Huh. 
    */
    padding-top: 0 !important;
    padding-bottom: 5px !important;
    border-color: yellow; /* rgb(84,200,255);*/
    border-radius: 4px;
    z-index: 10; /*important*/
    color: rgba(255,255,255,.9);
    list-style-type: none; /*remove the bullet*/
 }
 

Спасибо за любые предложения.

ОБНОВЛЕНИЕ: я выяснил, как заставить инструменты разработчика показывать мне вычисленные стили для перетаскиваемого элемента списка: сфокусируйте клавиатуру на панели иерархии элементов; щелкните и начните перетаскивать элемент списка и удерживайте нажатой кнопку мыши; нажмите ctrl-shift-c, чтобы войти в режим выбора элемента; используйте стрелкуклавиши для изменения выделенного элемента на панели иерархии, чтобы сфокусировать внимание на вновь созданном элементе списка, который показывает перетаскивание. Затем на панели стилей справа отображаются стили для перетаскиваемого специального элемента списка. Фу!

Если вы посмотрите на скриншот ниже, вы можете увидеть, что стили, которые я применяю для перетаскиваемого элемента (стрелка 1), на самом деле отображаются правильно, но не все из них отображаются должным образом. Например, цвет границы и цвет текста (стрелки 2) НЕ отображаются, но радиус границы (стрелка 3) и list-style-type (диск) отображаются правильно (но это трудно увидеть здесь, когда применяется выделение элемента инструментов разработчика. выделение.

У кого-нибудь есть идеи, почему это может быть? Спасибо

ОБНОВЛЕНИЕ 2: если я включу опцию ‘.cls’ на панели стилей инструментов разработчика, как предложено в комментариях здесь, а затем добавлю .file-upload-sortable-list-item-helper класс, элемент списка будет отображаться правильно! Но все еще не отображается должным образом при фактическом нажатии и перетаскивании элемента.