Support » Plugin: Inline Google Spreadsheet Viewer » Adjusting column width for Inline Google Spreadsheet Viewer

  • Resolved rebeccacsb

    (@rebeccacsb)


    Can anyone help me adjust the column widths on this Google sheet I embedded using the Inline Google Spreadsheets Viewer plugin?

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • rebeccacsb

    (@rebeccacsb)

    Please use this link instead – thank you!

    https://wp.me/P5IH9i-3K9

    Plugin Author Meitar

    (@meitar)

    rebeccacsb

    (@rebeccacsb)

    Thank you, @meitar! None of those topics provide a resolution to my issue, only recommendations to look for solutions elsewhere, which I’ve already done. I appreciate, based on your responses in these topics, that as the plugin developer you cannot provide support for every question people have about it, so I’m hoping someone else can still help me out with this.

    Plugin Author Meitar

    (@meitar)

    I appreciate, based on your responses in these topics, that as the plugin developer you cannot provide support for every question people have about it, so I’m hoping someone else can still help me out with this.

    Okay. For what it’s worth, as your question is a pretty general “how do I do things with CSS” question, you’re much more likely to get help on a more general forum than on this one. You may want to ask for assistance in the more populous WordPress support forums if you haven’t already done so.

    rebeccacsb

    (@rebeccacsb)

    Ok, thank you! I’ll try that as well.

    Meitar and Rebecca –

    I have just started to use Inline Google Spreadsheet Viewer and have figured out ways to adjust the column widths using CSS that I think can be used in general for many users.

    I am very grateful to you Meitar for creating a robust, extensible framework for this purpose, so I wanted to give back by sharing these code snippets.

    First off – here is a page that I just set up with an Index for a video training; the index is maintained in a Google Spreadsheet and gives descriptions of the various topics in the video as well as time stamps to facilitate quick searches of the content:
    https://archicadtraining.com/topic/acp-february-14-2019/

    (Note that the video on this page is only available for logged in members, but the Index table is visible to all visitors.)

    The shortcode that I used for this index is:

    [gdoc key="https://docs.google.com/spreadsheets/d/18hHCKjx0OUUuubEW6NYx6kkbnbKg9LJFVrUPc02X-_M/edit?usp=sharing" datatables_page_length="50" datatables_order="%5B%5D"]

    Notes:
    I wanted all rows to show up on a single page, so I set the length to 50.
    I wanted the table to show with the original row order in the Google Sheet, so I set the datatables_order value to [] (it’s escaped so it is entered as %5B%5D).

    The CSS is set up to make the table width 100% (using the full width of the container DIV; the header columns and value columns are each set to various percentages of the 100% based on my preferences for this usage. These percentages can be modified for general application; if there are more or fewer columns then the CSS can be edited of course.

    Here is the CSS code I used successfully for my purposes:

    th.col-1, td.col-1 {
        width: 20% !important;
    }
    th.col-2, td.col-2 {
        width: 35% !important;
    }
    th.col-3, td.col-3 {
        width: 10% !important;
    }
    th.col-4, td.col-4 {
        width: 15% !important;
    }
    th.col-5, td.col-5 {
        width: 10% !important;
    }
    table.igsv-table.dataTable.no-footer, .dataTables_scrollHeadInner {
        width: 100% !important;
    }

    One additional note: the Datatables code will not break lines for any weblinks embedded in the Google Sheet, and will force the column width to accommodate the full weblink. This was very confusing since one of my columns was wider than I wanted, and nothing I did was able to fix it until I realized the source of the issue. I worked around it in these cases by creating a bit.ly short link in place of the original one; then the value in that cell could wrap as I wanted and keep the width to the target percentage.

    Overall, I’m VERY happy with this solution, and want to again thank you Meitar for your contribution to the community. Feel free to share this code snippet and other notes in your documentation – I think it may be very useful for other users of your plugin.

    Eric Bobrow

    • This reply was modified 3 months, 3 weeks ago by  EricBobrow. Reason: Simplification of CSS code snippet
Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.