How to customize FeatureTable column and row size

632
2
Jump to solution
05-20-2021 08:47 AM
Caitlin_Dickinson
New Contributor III

I’d like to set the default width of columns and height of the rows in the FeatureTable widget to accommodate more of the text in an attribute field. All of the sample code examples have the overflow text hidden, and no wrapping enabled: 

Screen Shot 2021-05-20 at 11.43.04 AM.png

 

I am using the FeatureTable widget without a map, so one cannot click on a feature to view a popup that contains the full attribute text. 

My questions are: is it possible to either (a) set the default width and height of all rows, or (b) have them dynamically change height to fit the text in a given column? I’ve poked around a bit in the CSS, and it seems that this is not controlled by the esri-grid, esri-widget, esri-grid__content, or esri-grid__grid classes.

Thanks for your help!

1 Solution

Accepted Solutions
rpavuluri
New Contributor II

Hi @Caitlin_Dickinson ,

I am assuming you are referring to JSAPI 4.x. The following css snippet helped me with b) using 4.21 version. FYI, this might break with a new JSAPI release.

vaadin-grid-cell-content {
   white-space: normal !important;
}

 

View solution in original post

2 Replies
rpavuluri
New Contributor II

Hi @Caitlin_Dickinson ,

I am assuming you are referring to JSAPI 4.x. The following css snippet helped me with b) using 4.21 version. FYI, this might break with a new JSAPI release.

vaadin-grid-cell-content {
   white-space: normal !important;
}

 

Caitlin_Dickinson
New Contributor III

Wonderful, thank you @rpavuluri for this fix! This works great using 4.21. Will continue to monitor in future releases. As an example, here it is implemented in the FeatureTable widget with a map example: 

Screen Shot 2021-12-03 at 1.47.48 PM.png

0 Kudos