Support » Plugin: TablePress » Force responsive view at certain width

  • Resolved omg5

    (@omg5)


    Is there a way to force the responsive view (I am using the Responsive Extension) at a certain browser width (not just the device size but if a person is resizing their desktop browser window).

    I am using the “collapse” responsive view and love it but need it to show at a wider browser width because I have some columns that have a lot of text and at a narrower browser width those columns make the row very tall and leaves a lot of empty space on the other rows. Screenshot here at Snaggy: https://snag.gy/uIcWHV.jpg.

    I would like the responsive view to take effect at approx. 1200 px wide on browser windows/devices

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    You could maybe try forcing a minimum width on that column. For that, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress-id-123 .column-10 {
      min-width: 200px !important;
    }

    Please adjust table ID, column number, and width as necessary, for that column.

    Regards,
    Tobias

    Hi, thanks for the help, but I really don’t want to have to go in each time and have to adjust each id, and column # as I have many tables on my website that get added and deleted each week and they all have different column # that would have to be adjusted.

    Is there just a way to force all tables to change to “collapse” (responsive) view when the browser is resized to 1200px?

    • This reply was modified 1 year, 3 months ago by omg5.
    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    no, sorry, I’m not aware of such a setting. This behavior is simply a consequence of how the external JS library works.

    Regards,
    Tobias

    ok but I guess I don’t understand. On your coding don’t you have to set a point at which you have to have the responsive view to take over? Couldn’t you allow custom CSS to change that point where responsive view takes over? Thanks.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    no, that’s not how the collapse mode works. It basically tries to fit as many columns as possible. Then, when it finds that a column will not fit the available width, that column is collapsed and hidden. Therefore, this is totally independent from any breakpoints.

    Regards,
    Tobias

    ok I think I found a reasonable workaround. I added 30% padding on the left & right side of that row that hold the table. This forces the responsive view on any browser size. I also had to remove that padding on my mobile devices with this CSS:

    @media screen and (max-width: 767px) {
    .custom_no_padding_mob .full_section_inner {
    padding: 0 5% !important;
    }
    }

    You may want to recommend this as an option for others in the future – hope it can help.

    One final issue I am having is that if I add a background on that row where the table is – when one of the rows is opened (using collapse responsive view) the background is transparent (on both mobile and desktop view) so the colored background shows through and I can’t see the text well. How do I make the background of an opened row white?

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    good to hear that you found a way!

    Regarding that background color issue: Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

    Regards,
    Tobias

    Yes here is the page http://tinyurl.com/y5vfsm93

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for the link!

    Can you please try extending the first block of “Custom CSS” from

    .tablepress tbody td {
    	font-size: 15px;
    }

    to

    .tablepress tbody td {
    	font-size: 15px;
    	background-color: #eeeeee;
    }

    Regards,
    Tobias

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Force responsive view at certain width’ is closed to new replies.