Responsive mode only apears on first shortcode

Hi Meitar,

I’m implementing support for Inline Google Spreadsheet Viewer on my custom theme and I getting some troubles with the responsive view, maybe you can help me to find the way to solve it.

I have a template that renders several shortcodes in a tabbed container, all working like a charm, but on mobile view only the first one gets the plus buttons. The others just overflow the container. Despite I prefer the plus-button mode, it’s ok if it overflow but, if I use datatables_scroll_x="true" it breaks the thead on the other tables (not on the first one).

Tab content is implemented like this:

`
<div class=”tabs-panel is-active” id=”panel1v”>
<?php
if ($actividad_1_contenido !== ”) { ?>
<?php echo do_shortcode(‘[gdoc
key=”‘ . $actividad_1_contenido . ‘”
datatables_paging=”true”
datatables_dom=”lfrtip”
datatables_searching=”false”
use_cache=”no”
datatables_info=”false”
datatables_ordering=”false”
]’); ?>
<?php } ?>
</div>
<div class=”tabs-panel” id=”panel2v”>
<?php
if ($actividad_2_contenido !== ”) { ?>
<?php echo do_shortcode(‘[gdoc
key=”‘ . $actividad_2_contenido . ‘”
datatables_paging=”true”
datatables_dom=”lfrtip”
datatables_searching=”false”
use_cache=”no”
datatables_info=”false”
datatables_ordering=”false”
]’); ?>
<?php } ?>
</div>
<div class=”tabs-panel” id=”panel3v”>
<?php
if ($actividad_3_contenido !== ”) { ?>
<?php echo do_shortcode(‘[gdoc
key=”‘ . $actividad_3_contenido . ‘”
datatables_paging=”true”
datatables_dom=”lfrtip”
datatables_searching=”false”
use_cache=”no”
datatables_info=”false”
datatables_ordering=”false”
]’); ?>
<?php } ?>
</div>
…
`

Could it be related to the theme?
is-active CSS class thing?
I’m missing something?

Thanks for your time,
Hector