Can the text in a column header wrap to multiple lines in a Grid in Vaadin 14?

99封情书 提交于 2021-01-04 05:24:12

问题


In above image, I have a Grid created in Vaadin 14. Notice the red lines where the column titles were not wrapping.

I'm trying to figure out if it's possible (and safe/easy/standard) to get the column labels to wrap (like they would in Excel, for example).

Neither I nor my colleagues could figure out how to do so.


回答1:


You will need to adapt the Vaadin Grid styles as in the following snippet:

/* wrap text in grid column headers */
[part~="header-cell"] {
    white-space: normal;
}

Include the CSS via @CssImport annotation, theming the grid:

@CssImport(value = "./styles/grid-styles.css", themeFor = "vaadin-grid")
public class YourViewOrLayout extends Composite<Div> {
   ...
}

The main confusion styling web components arises with the shadow DOM concept. Each web component has its own style scope. That means all HTML tags within the shadow DOM must be styled via a <style> tag within the shadow DOM. The web component (Vaadin Grid here) comes with styles but you can append your own styles using the @CssImport annotation as above. Try inspecting the HTML structure of a <vaadin-grid> tag with the developer tools of your browser (except IE/Edge) and you will notice the shadow DOM. However, some tags located under the web component will not be part of the shadow DOM. These are referenced by <slot>s and global styles will be applied to them. For Vaadin Grid, the cell contents are slotted.

Note: Previous versions of Vaadin Flow had a slightly different way to include custom web component styles. See documentation.



来源:https://stackoverflow.com/questions/60250227/can-the-text-in-a-column-header-wrap-to-multiple-lines-in-a-grid-in-vaadin-14

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!