WordPress.org

Ready to get started?Download WordPress

Forums

CSV to SortTable
[resolved] [closed] My columns aren't aligning, ever since plugin update.. (5 posts)

  1. TozMiles
    Member
    Posted 1 year ago #

    As title, ever since I updated the plugin my columns for some reason don't align properly, and therefore the information in each is all over the place..

    Please help..

    The page I'm trying to work on is
    http://1314.fakenhamtownfc.co.uk/?page_id=12

    and the code I've used is
    [csv src=http://1314.fakenhamtownfc.co.uk/wp-content/uploads/tab.csv]

    It worked fine, and hopefully it will again.. I've probably messed it up somehow..

    Massive thanks!!

    http://wordpress.org/extend/plugins/csv-to-sorttable/

  2. Shaun Scovil
    Member
    Plugin Author

    Posted 1 year ago #

    Hey, sorry you're having some trouble with my plugin. I took a look at your website and noticed the following in your theme's style.css:

    .col2, .col3, .col4 {
        float:left;
        position:relative;
    }
    .col3 {
        width:280px;
        margin-right:60px;
    }
    .col2 {
        width:460px;
        margin-right:40px;
    }
    .col4 {
        width:210px;
        margin-right:40px;
    }

    The plugin assigns column classes (e.g. col1, col2, col3) to each column in the table, and those columns are inadvertently being affected by your theme's CSS.

    To fix this, you could change the above CSS to this:

    .col2:not(th), .col3:not(th), .col4:not(th) {
        float:left;
        position:relative;
    }
    .col3:not(th) {
        width:280px;
        margin-right:60px;
    }
    .col2:not(th) {
        width:460px;
        margin-right:40px;
    }
    .col4:not(th) {
        width:210px;
        margin-right:40px;
    }

    That is untested, but should do the trick -- assuming those .col# styles in your theme are not being used for tables elsewhere on your website.

    Please let me know if that sorts things out for you, or if you require any further assistance.

  3. TozMiles
    Member
    Posted 1 year ago #

    Fantastic, thanks so much..
    I don't think the styles are used elsewhere - I guess I'll find out at some stage, but I don't recall they are..
    The plugin is going to be a massive help to the football club website I run, and will save several people hours throughout the season..

    One last question if I could please - how do I go about changing the column widths?
    As it stands, 3 & 4 are too big for the Played & Won fields.. Is it just a case of adding extra columns with 20 (approx seemed to work)..

    I'd rather ask than wreck it completely..

    Again, huge thanks for your plug-in and your help..

  4. Shaun Scovil
    Member
    Plugin Author

    Posted 1 year ago #

    It looks like you have 10 columns in your table, and 9 of them hold numbers that aren't more than a couple of digits...so here's how I would style the column widths:

    .page-id-12 table.sortable [class^=col] {
        width: 2em !important;
    }
    .page-id-12 table.sortable .col2 {
        width: auto !important;
    }

    The .page-id-12 bit ensures that those styles will only be applied to sortable tables on this particular page (with an ID of 12), so you can have other sortable tables elsewhere on your site that won't be affected.

    The [class^=col] bit looks for anything within the sortable table that has a class like 'col' (e.g. col1, col2, col3). You could use [class^=col]:not(.col2), but we're just going to override that on the next line anyway.

    The width: 2em part should give all of the columns enough room for 2 or 3 digits, and width: auto; says just use up whatever space is left over for this column. If 2em is too narrow, you could go 2.5em or 3em.

    And I just put the !important on there to make sure nothing else overrides these rules. That may not be necessary, but wouldn't hurt in this case.

  5. TozMiles
    Member
    Posted 1 year ago #

    Brilliant, thanks Shaun.
    Really appreciate your help.
    Yes, the majority of the columns would only feature 3 numbers tops, with obviously the biggest column being the team name. I will probably be using widgets at the side, which brings the table nicely in a little but it's all looking good.

    I'm also doing a similar thing with fixtures / results on a different page, but seem to have sorted that without too much hassle.

    Thanks for your help and for explaining so much. I wouldn't say I fully understand, but it's certainly a lot clearer.

    And again, fantastic plugin - Thank you!!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.