Hide not working in Bootstrap table

I have a generated Bootstrap table. I need to hide some of the columns dependent on the user role but the dmx-hide doesn’t seem to work on those. I’ve narrowed it down specifically to the Bootstrap generated columns as this works and hides “Actions”

	<th class="sorting text-left d-none d-lg-table-cell" dmx-on:click="query1.set('sort','cost');query1.set('dir',query1.data.dir == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="query1.data.sort=='cost' && query1.data.dir == 'asc'" dmx-class:sorting_desc="query1.data.sort=='cost' && query1.data.dir == 'desc'">Cost</th>
<th dmx-hide="(sc_user_get.data.query1.role_id != 1)">Actions</th>

But this doesn’t

<th class="sorting text-left d-none d-lg-table-cell" dmx-on:click="query1.set('sort','cost');query1.set('dir',query1.data.dir == 'desc' ? 'asc' : 'desc')"
dmx-class:sorting_asc="query1.data.sort=='cost' && query1.data.dir == 'asc'" dmx-class:sorting_desc="query1.data.sort=='cost' && query1.data.dir == 'desc'" dmx-hide="(sc_user_get.data.query1.role_id != 1)">Cost</th><th>Actions</th>

Try placing the

dmx-hide="(sc_user_get.data.query1.role_id != 1)"

immediatley after the <th like this

<th dmx-hide="(sc_user_get.data.query1.role_id != 1)" class="s..........

Did you set this through the GUI or manually ?

``

That doesn’t work either. I did it first manually as I was copy/pasting the code from somewhere else, but when that didn’t work I did it in the GUI.

That is because of the classes d-none and d-lg-table-cell, these set the display property with !important. The dmx-hide sets display: none to hide the element, but this gets overwritten by the bootstrap classes.

1 Like

A simple solution is to use the class toggle and bootstrap classes.

<th class="sorting text-left d-none d-lg-table-cell" dmx-class:d-none="sc_user_get.data.query1.role_id != 1">
1 Like

That worked! Thanks!!