Jump to content

Using CSS to make Tables responsive not working

Richard A

By Richard A
in WidgetFactory Addon

Recommended Posts

Richard A Advanced Member

Richard A

Posted
Posted
When you hit return beside a table for a new line, the TinyMCE Joomla editor creates an empty paragraph element <p>/p> below the closing </table> tag regardless of how the table is created (using Bootstrap 3 or any other route).

 

The process is fine, except the element appears before any closing </div>, breaking the way the table acts on a webpage (it is a TinyMCE/Joomla error, hopefully they will fix it at some point in the future).

 

I was using the following DIVs to make tables responsive in the listings and widget:

<div class="table-responsive">

</div>

 

Everything was fine until the TinyMCE error was noticed and CSS needed to be used instead to make the tables responsive.

 

I am now using the following CSS instead of the above Div:

 

table.dataTables_wrapper {

 overflow-x: auto;

 min-height: .01%;

}

div.dataTables_wrapper {

 overflow-x: auto !important;

}

 

It works perfectly to make Tables reponsivie in the listing but although I have copied the CSS to the widget_custom_styles.css file, the tables are no longer responsive in the

Widget output (see the Classified Menu for an example of Widget output for tables from one of the listings).

 

Is there something else I need to add to the Widget CSS to make it work?

Link to comment
Go to topic listing
×
×
  • Create New...