• Resolved 3cstudio

    (@3cstudio)


    Hey Tobias,

    Let me know if the following are “premium” features or not:

    1. I’m looking to make that page’s mobile rendering more readable – I have: “Horizontal Scrolling:” enabled for each table, but it doesn’t extend right much. Would like for that to scroll right instead of bumping just a little bit to the right edge of page content. Thoughts?
    2. I’m getting these tables via a client’s Google Sheets tabbed doc. I Download that, and open it in Apple Numbers, where there are 4 tables in tabs. Do you know of a best way to Export only 1 tab at a time? I’ve tried a few export options, but the tabs remain — which means I have to duplicate the original file 3 times and delete the “other” tabs to get individual tables.

    Let me know if these 2 features are something I can do with a standard Tablepress installation or not. Thanks in advance!

    Steve C.
    3Cstudio

    The page I need help with: [log in to see the link]

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

    (@tobiasbg)

    Hi!

    Thanks for your post and sorry for the trouble!

    1. Are you sure that the “Horizontal Scrolling” and the “Enable features for site visitors” checkboxes are turned on for the tables on this page? Right now, the relevant code is not being loaded, which makes me think that these checkboxes are turned off.

    That said, the TablePress premium versions also contain other solutions for making tables look better on small screens. Please see https://tablepress.org/modules/responsive-tables/ for examples.

    2. Yes, this should be possible: You can then even directly use a URL for the import, without having to download a file first. For step by step instructions on how to get that URL for Google Sheets, please see https://tablepress.org/tutorials/import-google-sheets/

    (Manual import with this method is possible in all TablePress versions. If you would like to automate this, you could use the Automatic Periodic Table Import feature module that is part of the TablePress Max license plan.)

    Best wishes,
    Tobias

    Thread Starter 3cstudio

    (@3cstudio)

    Thanks for the quick response @tobiasbg !

    I may have been attempting to uncheck and recheck the Fir table (then clear all the caches) when you were examining that top table, but the other 3 tables remained set to only the 2 check boxes: “Enable Visitor Features” and “Horizontal Scrolling”. . . do you still not show the relevant code for those 4 tables now as well? I’ve been using Tablepress for long enough to remember (I think?) the variables within the shortcode to perform added functions. 🙂 Here’s an example:

    [table id=4 responsive=flip responsive_breakpoint=phone /] — does that take you back a bit? 😀

    Thanks for the how-to link for Import as well! Though, at first glance, it doesn’t seem to speak to the tabbed spreadsheet issue I’m having — those 4 tables are all on the same Sheet. Does that advice you gave still work on a 4-tabbed Sheet like that, or do I need to separate them out in order for a smoother Export / Import to Tablepress?

    Thanks again.

    S

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    Ah, now I found the reason why the JavaScript code is not being loaded: You are using the #colspan# keyword in your tables, to merge cells within the same row. Unfortunately, this is not compatible with the “Horizontal Scrolling” feature that is part of the basic version of TablePress. (The premium versions contain a second implementation of such scrolling that is not subject to that limitation.)
    Can you therefore please try again after removing all those #colspan# keywords from the tables? They should not be needed anyways, as the content in those cells is quite short anyways, compared to the other content in the first columns.

    The Shortcode with the flip mode that you pasted would require either the old/outdated/retired and no longer supported “TablePress Extension: Responsive Tables”, or an upgrade one of the premium versions.

    For the spreadsheet tabs: Isn’t Step 4 what you are looking for? Maybe this is just an issue with the confusing terminology: What you call “tab” is what Google and Excel call “worksheet”, whereas what you call “sheet” is a “workbook” for them.

    Best wishes,
    Tobias

    Thread Starter 3cstudio

    (@3cstudio)

    1. Thanks! That makes sense… Although now (to the naked eye) I am not seeing that there is a hidden column to the right on my mobile browser – it seems just “wide” enough to cleanly separate between the 2 last columns. 🙂 I’ll have to see what the client thinks – we may have to go with the static width for this, and “bump” the right side boundary back out a bit for its full view (like it was before I allowed the horizontal scrolling). Thanks again.
    2. Aha… apologies for being lazy and not thoroughly reading #4 through fully. 😮 I see now how the individual “work sheet” GID and Import that specific URL (vs. the file upload after a download!). That sounds much better than separating out the 4 worksheets for import as Excel spreadsheets individually! 😀 Thanks for your patience on that, as well as the how-to link. . . very helpful.

    Thanks again, @tobiasbg — have a good weekend!

    Steve C.
    3Cstudio

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress in the plugin directory. Thanks!

    Thread Starter 3cstudio

    (@3cstudio)

    Oh yes – rated long ago. 😀 And Favorite-d around that same time!

    S

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks, I really appreciate it 🙂

    Best wishes,
    Tobias

    Thread Starter 3cstudio

    (@3cstudio)

    Oh, 1 follow-up question: Is column width an option? It seems some of the “squished” columns could be more visible and stretched horizontally for better legibility, but I don’t see a way to work that out in the standard features. I know I can do something via CSS, but wondered if there were settings (or how-to) in place to tackle such things… That also might help with the width of these tables that are just a little bit wider than a mobile browser in portrait mode. For instance, the columns Age and Size would be much easier to decipher if their content was full-width – make sense or no?

    Thanks in advance for your thoughts!

    S

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    For setting column widths, I recommend the approach from https://tablepress.org/faq/column-widths/. To make columns wider than they are, you would also need to add

    min-width: 200px;

    to the CSS, in addition to width: 200px;(and with the desired pixel value for both).
    You could also disallow automatic line wrapping, which might make sense for the age column, with

    white-space: nowrap;

    Regards,
    Tobias

    Thread Starter 3cstudio

    (@3cstudio)

    Very nice. I tested:

    .tablepress-id-4 column-1 {
    	width: 150px !important;
    }

    …but it didn’t show (even with !important added secondarily), because that line in the Inspector shows a custom inline width already:

    <th class="column-1 sorting_disabled" rowspan="1" colspan="1" style="width: 336.633px;">FIR</th>

    How’d I accomplish that custom width? 😀 By dragging within the Edit area? If so, how do I ‘revert’ to the default for columns? I just tried double-clicking, even though visually they all appear to be equi-distant columns in the Edit area.

    S

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    using the !important flag is the correct way here — however, you will likely not be be able to reduce the column width if the table is overflowing and requiring horizontal scrolling anyways. It would already be at its minimum width then. To increase the width, you would need min-width, as mentioned above, with a higher value.

    The column width on the “Edit” screen has no influence. That really only affects the “Edit” screen, but not the frontend.

    Regards,
    Tobias

    Thread Starter 3cstudio

    (@3cstudio)

    Ah, got it. Looking much better now!

    I also attempted to use some variables present on an “old” table at: https://hollandbuscompany.com/school-bus-inventory-used/ — I have the following added in order to make it a vertical table list instead of horizontal listing of items (in mobile only) so that the top table headers were now left side table headers and the viewer scrolled right:

    [table id=4 responsive=flip responsive_breakpoint=phone /]

    Is that still valid or has it been deprecated in any way? I can’t get it to work with the current setup, even in that table with the same ID (Fir)… can you spot why that is? I removed Enable Visitor Features from it in case that was affecting things, but no change. Thoughts?

    S

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    The Shortcode with the flip mode that you posted would require either the old/outdated/retired and no longer supported “TablePress Extension: Responsive Tables”, or an upgrade one of the premium versions.

    Regards,
    Tobias

    Thread Starter 3cstudio

    (@3cstudio)

    Ah, yes — I see that now in Plugins — thanks once again for all the feedback & direction, @tobiasbg!

    S

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    yes, that’s the one 🙂 Keep in mind that this plugin is no longer being updated or supported though. The premium versions come with quite some improvements regarding the responsiveness.

    Best wishes,
    Tobias

Viewing 15 replies - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.