Breakpoints and responsiveness

Breakpoints and responsiveness

pompipompi Posts: 4Questions: 1Answers: 0

Hi there,
I want to always show the first column. In case the width exceeds the mobile breakpoint I want show all other columns. The last column should have higher priority.
I thought, that I can accomplish this with columns.classname = all, min-tablet etc.
It correctly shows only the "all" column in mobile, but shows all others in tablet view. The responsiveness breaks. Columns no longer are hidden, when they do not fit.
Is there any way to keep the responsiveness?
The min-tablet class forces columns to be visible, even if they don't fit.

Here is a codepen:
https://codepen.io/wiwo/pen/vVoPpX

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @pompi ,

    The problem is because you are using columns, and not columnDefs - see here.

    Cheers,

    Colin

  • pompipompi Posts: 4Questions: 1Answers: 0

    Thx for the fast reply. Responsiveness works that way, but the "min-tablet" doesn't. How can I get both working?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @pompi ,

    I don't understand, sorry. "min-tablet" is just a class used by Responsive - that table is being responsive as expected. Can you give more details, and reproduction steps, as to why you think it isn't, please.

    Cheers,

    Colin

  • pompipompi Posts: 4Questions: 1Answers: 0

    Expected behaviour:
    phone: show only column with "all" class
    tablet and above: show columns with "all" and "min-tablet" class, but only show as many columns as fit.

    actual bevavior:
    with columnRefs: shows all columns, but only as many as fit
    with Columns: in tablet shows all "min-tablet" columns even if they don't fit

    I want to show a single column in <768px and as many as can fit for >768px

  • allanallan Posts: 61,439Questions: 1Answers: 10,052 Site admin

    Hi,

    Yes I see what you mean. The behaviour I'm seeing is that <768px wide it will collapse to just one column. Wider than that and all columns will be shown.

    The reason for that is that min-tablet is telling the columns to be shown at the wider widths, and Responsive does not currently subtract the columns that cannot be fit into the viewport (i.e. it takes the class name as the only defining property as to whether the columns should be shown or not).

    That's a limitation I wasn't quite aware of and that should certainly be fixed. I've added it to our list!

    Allan

  • pompipompi Posts: 4Questions: 1Answers: 0

    ok thank you. Looking forward to that.
    At least I know that it's not possible. If I really need I can do some js workaround

  • aldemarcalazansaldemarcalazans Posts: 12Questions: 1Answers: 0

    Try using version 2.0.0 of dataTables.responsive.min.js. All versions above this one are bugged.
    I warned DataTables group about it, many months ago, but they did nothing about it!

    https://dropbox.com/s/j1k4fe3ajymru49/dataTables.responsive.min-2.0.0.zip?dl=

This discussion has been closed.