Column resize doesn't work

[daniftodi]

Hi Kartik,

Your plugins are amazing. Thanks.

I can't configure resizableColumns for DynaGrid. Resize cursors doesn't appear. Here is my configuration:

echo \kartik\dynagrid\DynaGrid::widget([
    'gridOptions'=>[
            'dataProvider' => $dataProvider,
            'filterModel' => $searchModel,
            'floatHeader'=>true,
            'pjax' => false,
            'containerOptions'=>['style'=>'overflow: auto'], // only set when $responsive = false
            'headerRowOptions'=>['class'=>'kartik-sheet-style'],
            'filterRowOptions'=>['class'=>'kartik-sheet-style'],
            'condensed'=> true,
            'responsive'=>true,
            'hover'=>true,
            'showPageSummary'=>true,
            'panel'=>[
                'type'=>GridView::TYPE_DEFAULT,
                'heading'=> $this->title,
            ],
            'resizableColumns' => true,
            'persistResize' => true,
            'hideResizeMobile' => true,
            'toolbar' =>  [
                ['content'=>'{dynagridFilter}{dynagridSort}{toggleData}{dynagrid}'],
                '{export}',
            ],
            // set a label for default menu
            'export' => [
                'label' => 'Page',
                'fontAwesome' => true,
            ],
            'exportConfig' => [
                GridView::CSV => ['label' => 'Save as CSV'],
                GridView::HTML => [],
                GridView::PDF => [],
            ],
        ],
        'options'=>['id'=>'filtre-1'],
        'storage'=>DynaGrid::TYPE_COOKIE,
        'theme'=>'panel-danger',
    'columns' => $gridColumns,

]);

Please help me.

[derekisbusy]

Try disabling floatHeader. Right now floatHeader and resizeableColumns do not work together.

[derekisbusy]

Also if you set :

        'floatHeaderOptions' => [
            'position' => 'absolute'
        ],

This makes it work partially for me but there is still an issue with the columns reverting back to the original size when scrolling.

[daniftodi]

Thank you @derekisbusy, tried your suggestions but they didn't worked in my case.

LE: Also updated yii2-grid after merging #624 issue but the same problem, resizableColumns doesn't work.

[derekisbusy]

These are all the related settings I use that works for me:

        'floatHeader' => true,
        'floatHeaderOptions' => [
            'position' => 'absolute'
        ],
        'resizableColumns' => true,
        'resizableColumnsOptions' => ['resizeFromBody' => true],
        'persistResize' => true,

What browser do you use?

[daniftodi]

I have tried on Google Chrome 55.0.2 and Firefox 51.0.1. Tried exactly with your settings and doesn't work for me. Maybe there is a debug mode that I can use ?

[derekisbusy]

You can use F12 to access the debugger in Chrome.

To check and see if the resources (javascript files) are being included look under the network tab.

Also check the console tab in the debugger for errors.

If there are no errors in the console tab check to see that the event is being attached. You can use this link to see events on the page:

http://sprymedia.co.uk/VisualEvent/

Go to that page and drag the link into your bookmarks toolbar of your browser and then click the bookmark when vewing your page to check and see that the reflow event is attached to the table.

One last thing to look for is hidden dom elements that may be overlaying the table preventing the cursor from interacting with the table.

[daniftodi]

There aren't any errors on Chrome/Firefox console. reflow event is attached to the table.

Tried to leave only two columns, remove others, resizableColumns don't work.

[derekisbusy]

How wide is your table and screen? Try changinghideResizeMobile to false if your screen or table is not wide enough.

[daniftodi]

I have 15.4' display, 1980x1280 resolution. Tried to change hideResizeMobile to false - doesn't work. Removed everything from web/assets, cleared cash - didn't helped. Called by hand $('.kv-grid-table').resizableColumns() - didn't helped.

Also I'm using filters in grid header, may I have to remove them ?

[derekisbusy]

You can try removing filters. But I would suspect it may be a css issue. Do you have any custom css applied to the table? You can try adjusting the css position and display of the div with rc-handle-container class. Also use the dom selector in the debugger and hover over the rc-handle divs and check to see if the divs are overlaying the table:

Also I forgot to ask what OS are you using?

[daniftodi]

I'm using Linux ( Ubuntu 16.06 ). Thanks for support, my problem was resolved. When you told me about rc-handle-container I found that my container was under table because I had in css styles:

.grid-view .rc-handle-container {
    overflow: hidden !Important;
}

I don't remember why I need to add this overflow: hidden.

Thank you.

[mohanrajendradcm]

When your width is more than 100% it tends to overflow, You can do the following to overcome the issue.

        Dynagrid::widget([
                'columns' => $columns,
                 'options' => ['id' => 'dynagridID', 'style' => 'overflow:hidden;']
        ]);

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.