Force Full Width & Stop Line Resizing

  • Resolved morts81

    (@morts81)


    9 years, 3 months ago

    I have a table at the following link:

    http://dailyfantasysportsaustralia.com/nba-moneyball-statistics/

    There are two things that I am trying to do to improve the aesthetics, etc.

    1) I would like the table to be forced to take up the full width of the screen.

    I’ve tried the following, but it doesn’t work:

    .entry-content .tablepress {
    width: auto;
    margin: 0 auto 1em;
    }

    2) When I make my browser width smaller, some rows will double in size partially and the flow of the table is broken. I have the table split after column two to allow scrolling and this is where the issues stems from. Is there a way to fix this?

    Cheers

    morts81

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    9 years, 3 months ago

    Hi,

    thanks for your question, and sorry for the trouble.

    You seem to be affected by a small bug in the width calculations of the DataTables JS library. Please try updating to the current TablePress 1.8-beta1, which you can download from tablepress.org/downloads/tablepress-dev.zip and install that. This might already fix this issue.
    (Please also remove that CSS code that you posted, it’s not helpful here and actually interferes.)

    For the row height doubling: I suggest that we prohibit line breaks in this table. For that, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress-id-5 th,
.tablepress-id-5 td {
  white-space: nowrap;
}

    Regards,
    Tobias

    Thread Starter morts81

    (@morts81)

    9 years, 3 months ago

    Thanks Tobias

    The row height doubling is fixed now, excellent feedback.

    When I try upload the new beta version of TablePress though I get the following:

    Installing Plugin from uploaded file: tablepress-dev.zip
    Unpacking the package…

    Installing the plugin…

    Destination folder already exists. /home/content/p3pnexwpnas15_data03/15/3817715/html/wp-content/plugins/tablepress/

    Plugin install failed.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    9 years, 3 months ago

    Hi,

    before installing the new version, you’ll have to first deactivate and delete the existing TablePress plugin (updating is not yet possible by just uploading the ZIP in WordPress).
    No worries about your tables, those are stored in the database and will not be affected, so just delete the current tablepress folder via FTP or via the “Plugins” screen in WordPress.

    Regards,
    Tobias

    Thread Starter morts81

    (@morts81)

    9 years, 3 months ago

    That doesn’t seem to fix the issue. The tables still don’t show full width unfortunately. Any other ideas?

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    9 years, 3 months ago

    Hi,

    ah, bummer.

    Could you then please also replace the file
    /wp-content/plugins/tablepress-datatables-fixedcolumns/js/dataTables.fixedColumns.min.js
    on your server with the file from
    https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js

    Regards,
    Tobias

    Thread Starter morts81

    (@morts81)

    9 years, 3 months ago

    Hi Tobias

    Finally got around to trying this and it unfortunately doesn’t work.

    Any other ideas?

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    9 years, 3 months ago

    Hi,

    ah, bummer 🙁 Unfortunately, I’m out of ideas here then. Sorry.

    Regards,
    Tobias

    Thread Starter morts81

    (@morts81)

    9 years, 3 months ago

    I just decided to try and go through my Plugin Option CSS and it seems like this might be causing the issue:

    .tablepress th,
    .tablepress td {
    white-space: nowrap;
    }

    The reason we added this was because of the wrapping issue we also has in this question. Maybe there is an alternative to that solution which will not affect the table width?

    Thread Starter morts81

    (@morts81)

    9 years, 3 months ago

    Sorry, I think it might be this

    .tablepress th,
    .tablepress td {
    padding: 1px;
    }

    Is it possible to get rid of vertical padding but not horizontal?

    Thread Starter morts81

    (@morts81)

    9 years, 3 months ago

    I think I just fixed it

    .tablepress th,
    .tablepress td {
    padding-bottom: 1px;
    }

    .tablepress th,
    .tablepress td {
    padding-top: 1px;
    }

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    9 years, 3 months ago

    Hi,

    that sounds great! 🙂
    You could maybe simplify this CSS a bit:

    .tablepress th,
.tablepress td {
  padding: 1px 8px;
}

    The first value is the top and bottom padding, the second value is the left/right padding.

    Regards,
    Tobias

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Force Full Width & Stop Line Resizing’ is closed to new replies.