Displaced grid header columns

[Steffen Harbich]

Hi,

I have grids like the below code. I tried a lot of things with column width and autoFit but there is always a displacement of column header texts in relation to their column contents. See my attached screenshot. You can see that "Beschreibung" header text is too right. How do I make it fit?

Regards,

Steffen

<GridComponent dataSource={data} 

                allowSorting={true} sortSettings={{ columns: [{ field: 'name', direction: 'Ascending' }] }}

                allowPaging={true} pageSettings={{ pageSize: 8 }}

                allowFiltering={true} filterSettings={{ type: 'Menu' }}

                allowSelection={false} allowTextWrap={true}>

                <ColumnsDirective>

                    <ColumnDirective field='preset' width='50px' headerText=''

                        template={(xyz: XYZ) => xyz.preset

                            ? <span className='e-icons e-lock-icon'></span> 

                            : null} />

                    <ColumnDirective field='name' width='200px' headerText='Name' />

                    <ColumnDirective field='description' width='400px' headerText='Description' />

                    <ColumnDirective template={templateWith2Buttons} width='350px' headerText='Actions' />

                </ColumnsDirective>

                <Inject services={[Page, Sort, Filter, Resize]} />

            </GridComponent>

Attachment: sc1_326204ac.zip

[Vignesh Sivagnanam]

Hi Steffen, 

Thanks for contacting Syncfusion support. 

Based on your query we have prepared a sample but we did not reproduce the reported issue at our end. Please refer the below sample for your reference. 

Sample : https://stackblitz.com/edit/react-jtyd5e?file=index.js 

Please share us the following information to validate further on this, 

1. Share the Complete Grid rendering Code.

 

2. If possible, please share a simple issue reproducing sample or replicate the problem with our above attached samples

3. Share the Syncfusion packages version.

Regards, 

Vignesh Sivagnanam 

[Steffen Harbich]

Alright, found the problem: A style applied from my general CSS like

table {

        width: auto;

        display: inline-block;

    }

was causing the bad positioning. After removing it, everything works fine. Thanks for example, though.

[Rajapandiyan Settu]

Hi Steffen, 

 

We are glad that you have resolved the reported problem. 

 

Please get back to us if you need further assistance with this. 

Regards, 

Rajapandiyan S