Metro UI и datatables select

General issues related to the use of Metro 4
oreons
Posts: 5
Joined: Wed Jan 16, 2019 12:21 pm
Status: Offline

Metro UI и datatables select

Post by oreons » Wed Jan 16, 2019 12:33 pm

При использовании datatables select и выделении строки происходит сдвиг вправо по всем полям. Если отключить metro.css, то все нормально.
Исходники
Image

User avatar
olton
Site Admin
Posts: 230
Joined: Mon Apr 09, 2018 6:19 pm
Location: Kiev, Ukraine
Status: Offline

Post by olton » Wed Jan 16, 2019 1:06 pm

Datatables сторонний компонент и о его поведении Вам нужно вести разговор с его разработчиком. Metro 4 никоим образом не оказывает влияние на поведение сторонних компонент, только добавляет стили и то, они вынесены в отлельный файл.

oreons
Posts: 5
Joined: Wed Jan 16, 2019 12:21 pm
Status: Offline

Post by oreons » Wed Jan 16, 2019 2:14 pm

olton wrote:
Wed Jan 16, 2019 1:06 pm
Datatables сторонний компонент и о его поведении Вам нужно вести разговор с его разработчиком. Metro 4 никоим образом не оказывает влияние на поведение сторонних компонент, только добавляет стили и то, они вынесены в отлельный файл.
Datatables и Metro стилизуют элемент table. Поэтому Metro оказывает влияние на поведение таблицы. Я пробовал собирать Metro билдером без элементов Table и Datatable, но результат одинаковый.

Так выглядит таблица с отключенным metro.css
Image

А вот Metro включен
Image

Явно заметно влияние на таблицу, изменение шрифтов и отступов

User avatar
olton
Site Admin
Posts: 230
Joined: Mon Apr 09, 2018 6:19 pm
Location: Kiev, Ukraine
Status: Offline

Post by olton » Wed Jan 16, 2019 2:26 pm

Если таблица имеет класс table, то метро естественно стилизует таблицу, потому что в Метро 4 есть собственный компонент таблицы (https://metroui.org.ua/table-component.html). При это никаких подобных критических отступов стили не содержат.

Для datatables есть дополнительный файл css (https://github.com/olton/Metro-UI-CSS/t ... hird-party).

Давайте ссылку на сайт или делайте пример на codepen.io или sandbox.org.ua будем разбираться

User avatar
olton
Site Admin
Posts: 230
Joined: Mon Apr 09, 2018 6:19 pm
Location: Kiev, Ukraine
Status: Offline

Post by olton » Wed Jan 16, 2019 2:27 pm

Под влиянием на таблицу я имею ввиду, что Метро 4 никоим образом не вносит изменения в структуру элемента

User avatar
olton
Site Admin
Posts: 230
Joined: Mon Apr 09, 2018 6:19 pm
Location: Kiev, Ukraine
Status: Offline

Post by olton » Wed Jan 16, 2019 2:28 pm

Вот пример работы Метро 4 с Datatables https://metroui.org.ua/examples/third-p ... table.html никаких глюков нет

oreons
Posts: 5
Joined: Wed Jan 16, 2019 12:21 pm
Status: Offline

Post by oreons » Wed Jan 16, 2019 3:01 pm

olton wrote:
Wed Jan 16, 2019 2:26 pm
Давайте ссылку на сайт или делайте пример на codepen.io или sandbox.org.ua будем разбираться
Спасибо.
Пример
При выделении строки возникает ошибка

User avatar
olton
Site Admin
Posts: 230
Joined: Mon Apr 09, 2018 6:19 pm
Location: Kiev, Ukraine
Status: Offline

Post by olton » Wed Jan 16, 2019 3:13 pm

Проблема в плагине select для datatable пишите его разработчику

oreons
Posts: 5
Joined: Wed Jan 16, 2019 12:21 pm
Status: Offline

Post by oreons » Wed Jan 16, 2019 3:37 pm

olton wrote:
Wed Jan 16, 2019 3:13 pm
Проблема в плагине select для datatable пишите его разработчику
Спасибо, написал на форум DataTables
Раньше при работе с Metro 3 проблемы не было.

User avatar
olton
Site Admin
Posts: 230
Joined: Mon Apr 09, 2018 6:19 pm
Location: Kiev, Ukraine
Status: Offline

Post by olton » Wed Jan 16, 2019 3:56 pm

Плагин select добавляет к строке таблицы класс "selected". Этот класс является зарезервированным утилитарным классом в Метро 4 для выделения любого блочного элемента.

Post Reply