Grid changing text style does not work

Flow
1

Hi,

first and foremost, I’m very new to Vaadin although I’m starting to get comfortable with it :slight_smile: So please excuse my question if it is trivial. I searched a lot but could not find anything that solves my issue.

In my java program there is a class that contains a grid. I changed the style of the grid via a .css file and importing it @CssImport(value = "./styles/grid.css", themeFor = "vaadin-grid").

My .css file (stripped of the non-essential parts) looks like this:

:host {
	max-height: 500px;
}

[part~="header-cell"]
 {
	font-weight: bold;
	text-transform: uppercase;
  	text-align: center;  
}

[part~="body-cell"]
 {
	text-align: right;
}

Now my issue is the following: Setting text-align of both body and header-cells works fine. For header-cells text-transform: uppercase; works, too. However, for some reason I am not able to get font-weight: bold; to work neither for header-cells nor for body-cells. In fact, I tried to change the font size (font-size: xxx) or changing the font itself but the options do not have an effect. I do not get any error messages. It seems that the options that change the properties of the font itself are not applied to the component. I never made any changes to the overall theme so I guess I’m using the standard settings which should be the lumo-theme. To me it seems that the theme overwrites my changes in the .css style file. I tried !important at the end of the relevant properties but that did not work either.

If it is relevant, I use Vaadin 14.4.4 and Firefox 84.0.2.

It is actually not a huge issue for me. However, I want to get it to work just to understand how the different components of Vaadin and the other technologies work if I have to use it in the future again. Now I’m at the point where I cannot determine if I’m doing something terribly wrong or if there is some interaction which I do not understand, yet :slight_smile:

Best regards,
Roy

2

It could be just specifity issue. Grid by default defines “font-weight: 500” for header-cell, thus you need to have a more specific css selector or use !important to overide it.

[part~="header-cell"]
 {
	font-weight: bold !important;
	text-transform: uppercase;
  	text-align: center;  
}
3

Tatu Lund:
It could be just specifity issue. Grid by default defines “font-weight: 500” for header-cell, thus you need to have a more specific css selector or use !important to overide it.

[part~="header-cell"]

{

font-weight: bold !important;
text-transform: uppercase;
text-align: center;
}

Hey :slight_smile:

thanks for your reply! As I mentioned in my starting post important! did not work. However, your hint to more specific CSS selectors brought me there: https://vaadin.com/docs/themes/styling-components.html

After using the content inspector of my browser and having a look at the applied CSS styles, I found the selector [part~="header-cell"] ::slotted(vaadin-grid-cell-content) which, as you said, indeed sets the font weight to 500 and the font size to var(–lumo-font-size-s). I guess, since this selector is more specific than [part~="header-cell"] , which I used before, it overwrites my settings, doesn’t it?

After I changed the selector in my CSS style file to [part~="header-cell"] ::slotted(vaadin-grid-cell-content) it worked! :slight_smile:

So simple but I guess I needed your pointer to specific selectors …

Thanks a lot!

Best regards,
Roy

4

Have you tried slotted?

[part~="header-cell"]
 ::slotted(vaadin-grid-cell-content) {
	font-weight: bold;
	text-transform: uppercase;
  	text-align: center;  
}
5

Sorry see now that you have solved it.

6

which I used before, it overwrites my settings, doesn’t it?

Yes. It is how CSS works, more specific selector overrides less specific one. This applies also outside Vaadin.