nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Feature-table-font-size.png

Vind meer berichten getagd met

Accepted answers

rscheitlin

try this:

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

All comments

AdrianaPaese

Thank you

AdrianaPaese

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

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

rscheitlin

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

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

rscheitlin

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.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Inloggen
Registreren

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.