topic Re: Change FeatureTable font size in ArcGIS JavaScript Maps SDK Questions

Change FeatureTable font size

AdrianaPaese — Wed, 18 May 2022 13:04:13 GMT

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

Re: Change FeatureTable font size

RobertScheitlin__GISP — Wed, 18 May 2022 13:57:04 GMT

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.

Re: Change FeatureTable font size

AdrianaPaese — Wed, 18 May 2022 15:12:33 GMT

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

Re: Change FeatureTable font size

RobertScheitlin__GISP — Wed, 18 May 2022 15:18:20 GMT

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

Re: Change FeatureTable font size

AdrianaPaese — Wed, 18 May 2022 17:55:33 GMT

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-editing

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

Re: Change FeatureTable font size

AdrianaPaese — Wed, 18 May 2022 18:24:59 GMT

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

Re: Change FeatureTable font size

AdrianaPaese — Wed, 18 May 2022 18:39:24 GMT

Thank you

Re: Change FeatureTable font size

RobertScheitlin__GISP — Wed, 18 May 2022 18:44:16 GMT

try this:

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

Re: Change FeatureTable font size

AdrianaPaese — Wed, 18 May 2022 18:58:11 GMT

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

Thank you!