Ваадин 14 сетка многолинейных ячеек - PullRequest
Новая
       65

Ваадин 14 сетка многолинейных ячеек

1 голос
/ 12 апреля 2020

У меня довольно длинные строки в одном столбце, и я хочу отобразить их как многострочные ячейки в моей сетке. Я использую Vaadin 14 + Java, и я попытался установить CSS -Style Class для столбца Speci c:

Java -Code: 

@CssImport("./styles/shared-styles.css")
public class RisikoGrid extends Grid<RisikoEntity> {

    public RisikoGrid() {
         setSizeFull();

         // add the column to the grid
         addColumn(Entity::getAttribute).setHeader("MyCol")
            .setFlexGrow(10).setSortable(true).setKey("mycolumn");

         // set CSS style class for the specific column
         this.getColumnByKey("mycolumn").setClassNameGenerator(item -> {return "grid-mycol";});

   }
}

CSS (shared-styles. css) 

.grid-mycol{
    background: red;
    white-space: normal;
    word-wrap: break-word;
}

Хотя я вижу имя класса, когда использую инспектор в своем веб-браузере (chrome), css не применяется .

enter image description here

Что мне нужно изменить, чтобы заставить его работать?

Редактировать: так выглядят мои стили - и Я даже не вижу фон: красный например:

enter image description here

Ответы [ 2 ]

2 голосов
/ 12 апреля 2020

Я выяснил, почему мои настройки css не отображались в инспекторе, и решение было минимальным: от 

@CssImport("./styles/shared-styles.css")

до 

@CssImport(value = "./styles/shared-styles.css", themeFor = "vaadin-grid")

I ' Я предполагаю, что область действия компонента сетки отличается от глобальной CSS.

. Теперь она работает.

1 голос
/ 14 апреля 2020

Вы можете использовать встроенный вариант темы wrap-cell-content, чтобы разрешить перенос текста внутри ячеек. 

grid.addThemeVariants(GridVariant.LUMO_WRAP_CELL_CONTENT);

См. Последний пример на https://vaadin.com/components/vaadin-grid/html-examples/grid-theme-demos - тексты они не такие длинные, но если вы сделаете окно браузера достаточно узким, вы увидите, что некоторые адреса переносятся в две строки.

...