AdminCP Responsive tables

[ChrisTERiS]

Hello all,

 

Tables in admin area aren't responsive? I'm using:

<div class="tablebg">
<table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
<thead>
<th>....</th>
<th>....</th>
<th>....</th>
<th>....</th>
</thead>
<tbody>
<tr>
<td>.....</td>
<td>.....</td>
<td>.....</td>
<td>.....</td>
</tr>
</tbody>
</table>
</div>

but it does not works. Also tried:

<table class="datatable table-responsive" width="100%" border="0" cellspacing="1" cellpadding="3">

but even the trick of table-responsive didn't worked.

 

Any idea?

 

Thank you

[bear]

table class="datatable" width="100%"

 

100% means it will fill the available horizontal space, and will shrink until the content prevents it.

What is it not doing that you feel it should be?

[ChrisTERiS]

table class="datatable" width="100%"

 

100% means it will fill the available horizontal space, and will shrink until the content prevents it.

What is it not doing that you feel it should be?

 

I tried by removing width="100%". I read somewhere in the search that setting width="100%" is not good. But even after removing width the problem is still there but this time also in desktop view. I've 6 columns in the table. In desktop the table gets aroung 50% of the screen. In mobile it shows 3 columns and that's all. I was expecting that it will has a horizontal scrollbar but I was mistaken. No way for the user to see more than 3 columns.

 

Initially I had the table inside a:

<div class="panel panel-default panel-accent-blue">
   <div class="panel-heading">
       <h3 class="panel-title"><i class="fa fa-sitemap" aria-hidden="true" style="padding-right:10px;"></i>'.$LANG['categories'].'</h3>
   </div>
   <div class="tablebg">
..........

The block adjust its width fine in mobile view but table no. Then I put table outside the block but again nothing.

 

Please note that I've the same problem with other WHMCS tables in admincp. I can't scroll to the right to see all columns.

 

Thank you

[bear]

That sounds like the containing div is set to hide overflowing content (needs to be visible or scroll). I'd suggest opening the page in Firefox, and using something like the Firebug plugin (FF has a native "inspect" feature, but Firebug is my preference) and use that to fiddle with the CSS live while viewing it. It has a button to allow you to select a specific element on the page, then find the CSS that controls it's appearance. Once you figure out which declaration and setting does what you need, edit the actual CSS in your installation to match, then test.

 

I read somewhere in the search that setting width="100%" is not good

Honestly, any layout settings/controls should be handled in CSS, not inline with the element. Mixing those causes issues, and defeats one of the main benefits of using CSS

Edited May 8, 2017 by bear