We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Improve column space usage / reduce icon space usage

Hi,

using a grid with excel filter results in a lot of empty space between column text and icons ( filter, sort ).

Is it possible to use all available space if the sort icon is not shown ? or at least to reduce the spacing between icons ( as well as between icons and text ) ?

currently the reserved space for the sort icon cause the text to overflow ( the text could be fully displayed )


without excel filter:

with excel filter:

 

with excel filter and sorting ( for first column ):

 


what we expect would be something like:



5 Replies 1 reply marked as answer

PS Prathap Senthil Syncfusion Team May 5, 2023 09:41 AM UTC

Hi Christoph,

We understand that you are facing an issue where the reserved space for the sort icon is causing the text to overflow, and you want to fully display the text. To achieve your requirement , we recommend using CSS styles. We have created a code snippet and sample for your reference.

<style>

 

  

    .e-grid .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv{

        margin-right: 0px;

    }

 

</style>



Without Modify CSS Style

Graphical user interface, application

Description automatically generated

With Modify CSS Style:

Graphical user interface, table

Description automatically generated with medium confidence




Regards,
Prathap s


Attachment: DataGridSample_6693709e.zip


CH Christoph May 5, 2023 12:22 PM UTC

Hi,


thanks for fast response - this is exactly what i was looking for.


the last thing is to combine it with sorting - so that this rule is only applied if sorting is not active ?

with your fix, it overlap with the text



SN Santhiya Narayanan Syncfusion Team May 8, 2023 05:55 AM UTC

Thanks for the update!

Based on the details you have provided, it seems that you are facing an issue with sorting and applying a specific CSS style. We have customized the CSS style to resolve the issue and ensure that it doesn't overlap with the text. Please refer to the code snippet and sample we have provided below for your reference.

style>

 

  

    .e-grid .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv{

        margin-right: 2px;

    }

 

    .e-grid .e-gridheader .e-fltr-icon .e-sortfilterdiv{

        margin-right :12px;

    }

 

</style>

Graphical user interface, application

Description automatically generated

We hope that this solution meets your requirements. If you have any further concerns or queries, please do not hesitate to contact us.


Attachment: DataGridSample._42608c38.zip

Marked as answer

CH Christoph May 9, 2023 10:14 AM UTC

thanks, It's not the perfect solution, but it's the best you can achieve with pure CSS.



PS Prathap Senthil Syncfusion Team May 10, 2023 08:55 AM UTC

Thank you for letting us know that the provided solution was helpful.  We will now close this thread.

Please get back to us if you have any other issues.


Loader.
Live Chat Icon For mobile
Up arrow icon