Field List Width in Popup Mode

[Gökhan Aslan]

Hi,

I hope this message finds you well. I've been using the Syncfusion PivotView in React and encountered an issue regarding the captions in my data. The captions are quite long, and when using the default In-built Field List in Popup mode, I can't see the full text. Please see the screenshot:

I've been exploring your documentation in search of a solution, but I couldn't find any examples that specifically address setting the width of the Field List in Popup mode.

I did come across the option to supply SAMPLE_CSS to set the width and height of the Field List, but it seems this only works for the fixed mode. Unfortunately, I need to work with the Popup mode.

Could you please clarify whether it's possible to adjust the width of the Field List in Popup mode? If it is possible, could you provide me with a small example or guidance on how to achieve this?

Thank you in advance for your help.

Best regards,

Gokhan

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Gokhan,

Please refer the below customized CSS to change the width of the field list dialog and the treeview UI.

Code Example:

// CSS to change the width of the popup dialog. 

.e-pivotfieldlist-container {

  max-width: 800px !important;

}

 

// CSS to change the width of the field list treeview UI. 

.e-pivotfieldlist-container .e-field-list-container .e-field-table {

  width: 50% !important;

}

Output screenshot:

Meanwhile, we have prepared a sample for your reference.

Sample: https://stackblitz.com/edit/react-nehxjc-zofque?file=index.js,index.css

Regards,

Angelin Faith Sheeba.