Change FeatureTable font size

[AdrianaPaese]

Hello

Does anybody know how do I change the font-size of text in FeatureTable cells?

I am sending an image attached

Thank you in advance

[RobertScheitlin__GISP]

To change the font size add this css rule to your deployed apps index.html:

.esri-grid .esri-grid__content {
    font-size: medium;
    --lumo-font-size-s: .875rem;
}

of course adjusting sizes to your liking. The font-size portion applies to the table column content and the --lumo-font-size-s pertains to the column header text.

[AdrianaPaese]

Hi Robert
Thank you very much for your reply
.esri-grid .esri-grid__content {
font-size: medium;
--lumo-font-size-s: .875rem;
}

It worked well for the header but it didn´t change the font size within the
cells
Do you know what else may be happening?
Are these coming from
https://js.arcgis.com/4.23/esri/themes/light/main.css
or should I declare another css?
Thank you
Adriana

[RobertScheitlin__GISP]

In my testing that css rule worked fine. Where are you placing this css rule? In which file?

[AdrianaPaese]

Hi Robert

The css rule you provided also works in the ESRI´s sample
https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=widgets-featuretable-edi...

I replaced the feature layer and fieldConfigs in the above sample with my
own data and it also worked.

However, if I save the sample´s code as a html file and open it in the
browser the font-size definition has no effect on the text within the cells.
The same happens with my own code.

I don´t know why this is happening.
Thank you very much

[RobertScheitlin__GISP · Accepted solution]

try this:

vaadin-grid-cell-content {
    font-size: .575rem !important;
}

[AdrianaPaese]

Yes, it works regardless of the browser minimum font-size settings

Thank you! 

[AdrianaPaese]

It seems the problem has to do with the browser font-size appearance settings , which will override the css settings

[AdrianaPaese]

Thank you