data-priority: Responsive Button missing if first column is collapsed

miman

I'm using datatables together with it's responsive extension. Everything works as expected except setting the Priority of columns.

<tr> <th>Name</th> <th data-priority="1">Position</th> <th>Office</th> </tr>

If now the viewport is so small, that one column (Office) is collapsed. There is a plus-sign appearing as expected.
But if there is still to less space so two columns are collapsed (Name and Office - because Position stays the longest), then the plus-sign disappears together with column 'Name'.

If think this is because of the CSS first-child-selector in the responsive extension:

table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child:before {
top: 9px;
left: 4px;
height: 14px;
width: 14px;
display: block;
position: absolute;
color: white;
border: 2px solid white;
border-radius: 14px;
box-shadow: 0 0 3px #444;
box-sizing: content-box;
text-align: center;
text-indent: 0 !important;
font-family: 'Courier New', Courier, monospace;
line-height: 14px;
content: '+';
background-color: #31b131;
}

See example here: http://live.datatables.net/wokovivo/1/edit

Does anybody have an idea for a workaround or how to fix this so the plus-sign is not missing on small screens?

Thanks,
miman

allan

Hi Miman,

The issue here is that there isn't a way in CSS to distinguish between visible and hidden elements. The column priority is making the first column (name) hidden (display:none), but it is still in the DOM so it is still the first child.

At the moment, if you want to have the first column in the table a lower priority than others, you need to use a dedicated column for the show / hide.

Allan

miman

Hi Allan

Thank you for your quick response. Unfortunately the dedicated column does not work for my use-case. The users enter their data themselves so then there is a chance that on mobile only the dedicated column is showed because the message in the last column is too long.

I think I'm gonna try to expand all child-rows as soon as first column is hidden.
Not a CSS- but a Javascript-Solution - also okay for me.

Thanks for your help.
Miman