I would like to hide the data column in Tab. I referred Bootgrid Documentation.
In Column setting I found.
data-visible="false"
It hides the data column in PC also. I need something like
.hidden-xs, .hidden-sm
Asked
Active
Viewed 1,841 times
3
Siguza
- 21,155
- 6
- 52
- 89
Maria Jeysingh Anbu
- 3,164
- 3
- 34
- 55
-
Have you tried using media query like `@media screen and (max-width : 320px){ display: none; } ` – Vidya Sagar Jul 20 '15 at 18:45
-
I added the css class to the '@media screen and (max-width : 320px){ .data-column{ display: none; } }' It hides only the column header not entire column – Maria Jeysingh Anbu Jul 27 '15 at 12:06
-
Can post the code/fiddle of your problem – Vidya Sagar Jul 27 '15 at 12:53
1 Answers
6
There are two column settings called cssClass and headerCssClass which do exactly what you ask. If you set hidden-xs and hidden-sm classes inside the column header data attributes, that column will be hidden on small devices. Note that data attributes are called data-css-class and data-header-css-class respectively.
<thead>
<tr>
<th data-column-id="id" data-visible="false">ID</th>
<th data-column-id="firstname">First Name</th>
<th data-column-id="lastname" data-order="asc">Last Name</th>
<th data-column-id="registerdate"
data-css-class="hidden-xs hidden-sm"
data-header-css-class="hidden-xs hidden-sm">Date</th>
</tr>
</thead>
Serkan Yilmaz
- 1,338
- 19
- 21