Flow - spacing in grid cell

Flow
1

Hi everyone,

attached there is an image of the currents state of my grid, where I am not able to get rid of the left space in a cell. As well in the header as in the body, there is always a space left of the content. Any help? I already tried to “margin-left: 0px” and “padding-left: 0px” but nothing worked.

Best regards

Patrick
17688791.jpg

2

This kind of theme-module should do the trick:

<dom-module id="grid-no-padding" theme-for="vaadin-grid">
  <template>
    <style>
      [part~="cell"]
 ::slotted(vaadin-grid-cell-content) {
        padding: 0;
      }
    </style>
  </template>
</dom-module>

(or padding-left: 0; if you want to keep the padding on other edges)

If you want also the cell contents to use the full space, you can add height: 100%; in there.

To use this with Flow, add that snippet into an HTML-file and import it with @HtmlImport.

3

One more thing. If you want to target the theme module only for one grid instead of all of them (in case you have more than one grid), you can create a new theme variant, let’s say “no-padding”, by adding a theme attribute selector to the CSS:

:host([theme="no-padding"]
) [part~="cell"]
 ::slotted(vaadin-grid-cell-content) {

You can then activate that theme variant for a single grid like this:

grid.addThemeName("no-padding");

Other grid instances will be unaffected.

4

Hi Pekka,

perfect, thanks. That’s what I was looking for.

5

An other thing, is there somewhere an overview of this styling options within a theme module, so I could figure out stuff like this on my own? Because I have a similare styling problem with a combobox.

6

You might want to take a look at the Theming training: https://vaadin.com/training/courses/v10-theming as well as the vaadin-themable-mixin Wiki here: https://github.com/vaadin/vaadin-themable-mixin/wiki

7

Chrome dev tools is your best friend in this process. Inspect the elements and tweak their styles in the browser until you are satisfied with the results. Then create a theme module for the elements whose styles you changed.

  • If the element whose styles you want to change is a web component itself, create a theme module for that element and use the :host-selector to add styles to it.
  • If the element whose styles you want to change is a native element inside a web component, create a theme-module for the parent web component, and use any CSS selector to target that child element. The part-attribute means that this internal element is supported to be stylable. Other internal elements are considered implementation details which could change in future releases.
8

To add a theme attribute selector to a grid:

grid.getElement().getThemeList().add(“grid-no-padding”);