WordPress.org

Ready to get started?Download WordPress

Forums

WP-Table Reloaded
[resolved] tablepress column width (18 posts)

  1. jrobie23
    Member
    Posted 1 year ago #

    have tried column width in the "reloaded" and now in tablepress with zero results.

    would love some insight. (perhaps it is my ignorance of proper css?)

    this is the page: http://deeringlumber.com/contractor-referrals/
    this is the code: .wp-table-reloaded-id-5 .column-1 { width: 75px!important;}

    although I must admit, i've been through all the support and faqs and have tried nearly every iteration you have suggested, all to no avail.

    i don't really care about the actual width at this point. I have tried 10px and 200px inside of firebug and it works fine with the "element.style" selector. just nothing seems to work with the above code.

    http://wordpress.org/extend/plugins/wp-table-reloaded/

  2. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for your post, and sorry for the trouble.

    The correct code to change the column width in TablePress would be

    .tablepress-id-5 .column-1 {
      width: 75px !important;
    }

    However, that's not really going to help in your case. The reason is, that you have data in your table that requires rather big column widths. And as a column can not be made smaller than its largest/widest word, tables with many column are hard to style.

    To "combat" this, TablePress enables users to use a "Horizontal Scrolling" feature in such tables. This is already activated in your table, but not yet useful.
    I'd like to sugget that you try it out by adding this "Custom CSS":

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

    After that, you can horizontally scroll the table on the screen, and thus keep all columns.

    Another solution could be to decrease the font size in this table, with

    .tablepress-id-5 {
      font-size: 12px;
    }

    Regards,
    Tobias

  3. jrobie23
    Member
    Posted 1 year ago #

    as always (from your previous posts), VERY helpful!!

    Thanks so much for a great plugin and super-fast support!

  4. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    no problem, you are very welcome! :-)

    By the way: Your table content was bold initially, because the Shortcode is part of an HTML <strong> tag.
    I suggest that you remove that, as the code will be cleaner (and you won't need the extra font-weight: normal; in the CSS). The best way to do this is to temporarily switch from the "Visual" to the "HTML" tab in the editor on the editing screen of that page.
    The Shortcode should basically stand on its own line, with an empty line in front of that.

    Best wishes,
    Tobias

  5. jrobie23
    Member
    Posted 1 year ago #

    that bold thing was an oversight on my part. I copied and pasted it from the plugin options section and THAT was bolded. today is not my day for code!

  6. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    don't worry :-) It was nothing severe, but still it's nice to have clean HTML markup there :-)

    Best wishes,
    Tobias

  7. jrobie23
    Member
    Posted 1 year ago #

    While I have you, can you see any reason why the rows are not alternating colors and the mouse-over highlight of the rows is now working? I have both checked in the options?

  8. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    ah, indeed. This comes from some CSS code in your theme that interferes with these.
    Just add

    div.post .tablepress td {
      background-color: transparent;
      border-top: none;
    }

    to the "Custom CSS" and both features should be working again. The colors appear a little light though, with the dark border of the cells (which also comes from your theme). Therefore, I also added a line to make the default border visible. Just remove that line again, if you prefer the dark border.

    (Note that the div.post is just necessary in this case, to fix that conflict with the theme. All other TablePress "Custom CSS" should not need it.)

    Regards,
    Tobias

  9. jrobie23
    Member
    Posted 1 year ago #

    Something I meant to ask you last week as well... (perhaps I should start another thread?)
    my client wants to have those "yes" rows show up first when someone "sorts" on the respective column. Since the default sort is alphabetical, the "Y" in yes is lower than a blank.
    Is there any way to have the first sort be "reverse" so the "Yes's" show up first??

  10. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    yes, that is possible with a "Custom Command" for the DataTables JS library (which performs this sorting). Please try adding

    { "asSorting": [ "desc", "asc" ], "aTargets": [ 5, 6, 7, 8, 9 ] }

    to the "Custom Commands" textfield in the "DataTables JavaScript Features" section on the "Edit" screen of your table.
    The 5, 6, 7, 8, 9 indicate that this shall apply to columns 6, 7, 8, 9, 10 (counting starts zero-based here).

    Regards,
    Tobias

  11. jrobie23
    Member
    Posted 1 year ago #

    Thanks for that!! I spent some time on the doc. site as well looking at other options. Whenever I add code into that section, it stops allowing the sorting function for the whole table. i've tried even limiting it to a single column
    { "asSorting": [ "desc", "asc" ], "aTargets": [ 5 ] }
    but it still stops all sorting.

    I'm going to keep reading, but I must be missing something simple.

  12. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    can you keep the code in there, so that I can check?

    Regards,
    Tobias

  13. jrobie23
    Member
    Posted 1 year ago #

    all set... sorry about that.
    i left my last revision in.

  14. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks. I just checked the docs again, and actually I made a mistake. Sorry about that...
    Please try again with

    "aoColumnDefs": [ { "asSorting": [ "desc", "asc" ], "aTargets": [ 5, 6, 7, 8, 9 ] } ]

    Regards,
    Tobias

  15. jrobie23
    Member
    Posted 1 year ago #

    Simply Perfect!!!

    I'm currently taking classes on javascript and jquery. Hope to get a better handle on these things in the next few months.

    Thank you again for all your help!!

  16. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    very cool! :-) Thanks for the confirmation!

    And have fun in your classes! This is definitely a cool topic!

    Best wishes,
    Tobias

  17. philor2013
    Member
    Posted 11 months ago #

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

    I added that to my custom field and its not making any difference. Any idea what I could be doing wrong?

    Thanks,
    Phil

  18. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    Hi,

    thanks for your post, and sorry for the trouble.

    Could you please post a link to the page with the table, so that I can take a direct look at this? Thanks!

    Regards,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic