Column filter going on second row

[morfeibox]

If Grid column content is shorter than column name, filter icon go on the next row

[DarkSide666]

Related #514

[ibelar]

You can tweak the icon placement by changing the css class: atk-table-dropdown

By default it is meant to float right, which will cause icon to go on next row if not enough room.

// table dropdown menu
.atk-table-dropdown {
  display: inline;
  float: right;
}

[morfeibox]

Hi ibelar, I take a look and didn't find how and where I can add my custom css or even how can I change this css class?

[romaninsh]

i think it should display properly by default. We don't have many CSS developers, i'll assign to @mayack, but he's busy working on other things.

[ibelar]

In order to override the style, you would normally create your own css file and include the new css file in your app using App::requireCSS method.

$app->requireCSS('path/to/your/css/file');

Just redefine the rule for "atk-table.dropdown" in this new css file.

Hope this help.

[acicovic]

Hi, a solution has been given to this problem and I don't know if it still occurs. #514 is already closed. I suggest we close this issue.

[DarkSide666]

Not sure about closing this. Filter (or sorting) icons should never go on next line in my opinion.
That should be default and only one option how it should work.

[ibelar]

This is a css issue. The css class name .atk-table-dropdown can be modify to fit everyone needs.
We should close this one.

[mvorisek]

Not fixed, example from demos/tablefilter.php:

Real estate is very expensive in comples UIs and for UX it is overall better to have (prererably always) the filter icons on the right side of the column headers.

[ibelar]

Having it under the column name is the intended behavior now.
If you need to have it on the same line, you can change/update the .atk-table-dropdown css class.
Using float right and changing top-margin value should give you what you need.

You might also need to update .atk-table-column-header to float:left if you use column sorting.

Sample above was done using:

.atk-table-column-header {
    float: left;
    padding-bottom: 4px;
}

.atk-table-dropdown {
    float: right;
    margin-top: -4px;
}

[DarkSide666]

@ibelar Why can't we set this CSS as default to look nice out-of-the-box?

[ibelar]

@DarkSide666 - The best compromise is to have the dropdown trigger icon on the next line, under the column label name by default. This way, it will always remain the same, independently of the column width. We cannot take into account that there will be enough space in each column to properly fit the sorting icon and the filtering icon on the same line.

If we set CSS to have all icons on the same line by default, then, when the column width is changed and becomes not wide enough, (see picture below) we will end up with the filter icon placed on the next line anyway.

I believe that it is the developer responsibility to try placing it on the same line and live with the consequence. Only they will know what type of table they have to deal with. Plus, new CSS class introduced in PR #900 should give more freedom to adjust this to their needs.

see the same style set above with resize column.

[georgehristov]

How about placing the filter icon in front of the column label and opening the popup on click of the icon and the label text?

[mvorisek]

@ibelar can this be solved with modern flex css property?

[ibelar]

@mvorisek - I am not a CSS guru, so maybe.

Guys, for me, this issue is closed. It might not be the prettiest solution but it is a workable one. There are workarounds to adapt to your needs, like changing CSS or using Table hook in order to generate your own column header.