Side by side tables cause responsive plug-in issues?

Side by side tables cause responsive plug-in issues?

chessGuru64chessGuru64 Posts: 79Questions: 18Answers: 1
edited February 2019 in Free community support

I successfully put an advanced smart search to the left of a datatable (like Amazon.com):
https://datatables-ecommerence.000webhostapp.com/

But the tables overlap on small screens and the datatable responsive plug in seems to fail (though it seems to work on a smart-phone). Maybe my float messes up the responsive code? Might be an interesting "glitch" or a simple fix (probably the second one).

I will try to resize things on a smaller screen (like font). Maybe that will get it to fit?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    Could you change:

    <table class="display table table-responsive" id="smart_table">
    

    to be:

    <table class="display table table-responsive" id="smart_table" width="100%">
    

    please. I believe that should resolve the issue.

    Allan

  • chessGuru64chessGuru64 Posts: 79Questions: 18Answers: 1
    edited February 2019

    Ok. I will try that. Right now my code looks like:

        <div style="width: 100%;">
              <div style="width: 20%; float: left;">
        <table class="display table table-responsive" id="smart_table" width="100%">
    
        </table>
        </div>
    
                <div style="width: 80%; float: left;">
        <table id="example" class="display table-responsive">
    
        </table>
        </div></div>
    

    I will try to put a 100% on the bottom too. Maybe I will try Boostrap col again? Did not seem to work.

    UPDATE: Putting a width="100%" on both tables really helped. I may have to adjust the widths fonts etc. to get the tables to not overlap.

This discussion has been closed.