Скрыть столбец курсора на расширяемом Datagrid с помощью VMWare Clarity Design с Angular2 +

Я использую компонент VMWare Clarity Datagrid.

Описание:

У меня есть две сетки данных, и мне удалось расширить правую (синюю) при расширении одной из строк левой сетки данных (красный).

Мои ЦЕЛИ:

  1. Скройте столбец курсора в правой сетке данных и по-прежнему сможете расширять его строки. Когда я добавляю правило display: none; в класс .datagrid .datagrid-expandable-caret в браузере, оно работает нормально, а в файле .scss - нет.
  2. Скрыть прокрутку левой сетки данных (красный) и по-прежнему иметь возможность прокручивать.
  3. Синхронизируйте прокрутку обеих таблиц данных (возможно, используя сторонний код).

Здесь я сделал плункер с примером в angular2 +.

.right-div {
   float: left;
   height:315px;
   width: 500px;
   border: 4px solid cornflowerblue;

   .datagrid .datagrid-expandable-caret {
       padding: 2px 4px 3px;
       text-align: center;
       display: none;
   }
}

Спасибо за каждое предложение.


angular datagrid vmware-clarity clarity
person Leo    schedule 22.08.2017    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Причина, по которой он не работает при добавлении его в стили вашего собственного компонента, заключается в том, что элемент .datagrid-expandable-caret находится в теневой DOM таблицы данных. См. https://angular.io/guide/component-styles#view-encapsulation для получения дополнительных объяснений.

Это означает, что у вас есть 2 эквивалентных решения:

  1. Поместите эти стили в глобальную таблицу стилей CSS, чтобы их можно было применять к «эмулированной» теневой модели DOM.
  2. Используйте encapsulation: ViewEncapsulation.None на своем компоненте, чтобы добиться того же результата.

Вот обновленная версия вашего плункера, которая показывает, что второе решение работает: https://plnkr.co/edit/ss3y1P?p=preview

person Eudes    schedule 22.08.2017