How to customize the width and height of the filter dialog in a JavaScript Pivot Table?

Introduction

When working with a JavaScript Pivot Table, there may be occasions where you need to customize the dimensions of the filter dialog to enhance the user interface or to improve data presentation. This can be accomplished by overriding the default styles applied to these elements. This article provide guidance on adjusting the width and height of the filter dialog in a pivot table.

Customizing the width and height of the filter dialog

In order to alter the width and height of the filter dialog, you must target the CSS class associated with the dialog. This is feasible by writing custom CSS styles that override the defaults. Below is an example code snippet that demonstrates how to achieve this.

[index.css]

.e-pivotview .e-member-editor-dialog, /* Target the filter dialog when accessing it through the grouping bar UI */
.e-pivotfieldlist-container .e-member-editor-dialog, /* Target the filter dialog when accessing it through the field list UI */
.e-pivotview .e-member-editor-dialog .e-member-editor-container-outer-div, /* Target the member's container inside the filter dialog */
.e-pivotfieldlist-container .e-member-editor-dialog .e-member-editor-container-outer-div {
    max-height: unset !important; /* Unsets any max-height to allow custom height */
    max-width: unset !important; /* Unsets any max-width to allow custom width */
}

/* Customizing width and height for the filter dialog accessed through the grouping bar UI */
.e-pivotview .e-member-editor-dialog {
    width: 100% !important; /* Set width to 100% of the viewport */
    height: 100% !important; /* Set height to 100% of the viewport */
}
/* Customizing width and height for the filter dialog accessed through the field list UI */
.e-pivotfieldlist-container .e-member-editor-dialog {
    width: 100% !important; /* Set width to 100% of the viewport */
    height: 100% !important; /* Set height to 100% of the viewport */
}

First, we target the CSS selectors .e-member-editor-dialog and .e-member-editor-container-outer-div classes within both the .e-pivotview and the .e-pivotfieldlist-container in order to remove any restrictions on the maximum height and width of the filter dialog. This can be accomplished by setting the max-width and max-height to unset. Following this, we utilize the CSS selectors .e-pivotview .e-member-editor-dialog and .e-pivotfieldlist-container .e-member-editor-dialog to specify the width and height of the filter dialog as 100% when it is accessed through either the grouping bar or the field list UI.

The following screenshot portrays the results of the code snippet mentioned above.

Screenshot

Customized filter dialog size when accessed through the grouping bar UI:

Customized filter dialog size when accessed through the field list UI:

For a practical example of this code in action, you can refer to the following sample of stackblitz.

Conclusion

By following the steps outlined in this article and using the provided code example, you can easily customize the width and height of the filter dialog in a JavaScript Pivot Table.

You can also refer to our JavaScript Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!