Delay in css formatting kicking in

  • Resolved mcxg46

    (@mcxg46)


    3 years, 1 month ago

    On loading a large table in a page, there is a slight delay before my custom css takes effect (reducing font size, changing header colour, etc.).

    I’ve tried adding the css to both the custom css option in the plugin, and also in my theme, with the same thing happening.

    This means that if I use an a name tag in a row to try and link straight to it, after the font resizes the link is ‘looking’ at the wrong part of the page in some browsers such as Chrome.

    For example:
    https://johnd121.sg-host.com/complete-scores/#RM075

    I tried to update the css of the plugin directly, but it didn’t seem to work. For example, adding

    .dataTables_scroll {
    font-size: 13px;
    }

    to the plugin’s css section shrinks the font, but there appears to be no matching css line in the plugin itself.

    Basically, I think I need the plugin’s custom css to load instead of, rather than after, the original css.

    Can you assist? (Full custom css I’m applying below.)

    Thanks,

    John
    (Great plugin by the way!)

    /*tablepress */
.tablepress-id-1 thead {
	white-space: nowrap;
}

.dataTables_scroll {
	font-size: smaller;
}

.tablepress .sorting:after {
	display: none;
}

.dataTables_filter {
	padding-right: 20px;
	padding-bottom: 20px;
}

th.column-1.sorting,
th.column-2.sorting,
th.column-3.sorting,
th.column-4.sorting,
th.column-5.sorting,
th.column-6.sorting,
th.column-7.sorting,
th.column-8.sorting,
th.column-9.sorting,
th.column-10.sorting,
th.column-11.sorting,
th.column-12.sorting,
th.column-13.sorting,
th.column-14.sorting,
th.column-15.sorting {
	vertical-align: top;
	background: #79602A;
	color: white;
	font-size: smaller;
}

th.column-1.sorting:hover,
th.column-2.sorting:hover,
th.column-3.sorting:hover,
th.column-4.sorting:hover,
th.column-5.sorting:hover,
th.column-6.sorting:hover,
th.column-7.sorting:hover,
th.column-8.sorting:hover,
th.column-9.sorting:hover,
th.column-10.sorting:hover,
th.column-11.sorting:hover,
th.column-12.sorting:hover,
th.column-13.sorting:hover {
	background: #ba6300;
}

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

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

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    The problem here essentially is that you are using CSS classes for styling that are added dynamically, with JavaScript code. Due to the number of cells, this JavaScript processing takes a bit of time.

    So, instead of using the .dataTables_scroll CSS class, you should use the regular .tablepress class:

    .tablepress {
	font-size: smaller;
}

    In addition, that large chunk with the .sorting CSS classes can be shortened to

    .tablepress thead th {
	vertical-align: top;
	background: #79602A;
	color: white;
	font-size: smaller;
}
.tablepress thead th:hover {
	background: #ba6300;
}

    Regards,
    Tobias

    Thread Starter mcxg46

    (@mcxg46)

    Hi Tobias,

    Thanks for getting back to me so quickly – much appreciated.

    Switching that css has sped up the loading of the right css, which is great.

    However, there is still a second or two delay in the ‘search’ and ‘show entries’ fields appearing at the top of the table. So that when they load, the table still shifts down by about 50 pixels, making the a name link show the wrong part of the page.

    If I untick the ‘show x entries’ and ‘search’ options from the table it fixes the issue, but with a table this large I really need the search function available!

    I think the sarch and show entries bits need to load before the table contents, but I don’t know how to make that happen. Can you help?

    Thanks again,

    John

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi John,

    unfortunately, that’s not possible from everything I know.
    The external DataTables JavaScript library that is used for these features needs to first process all table rows and only then does it add these input fields.

    Regards,
    Tobias

    Thread Starter mcxg46

    (@mcxg46)

    Ah, OK. No problem – thanks anyway for your help.

    John

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    sure, no problem! Sorry that I did not have better news here.

    Best wishes,
    Tobias

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Delay in css formatting kicking in’ is closed to new replies.