Need to override css with !important

  • Resolved arconsulting

    (@arconsulting)


    9 years, 2 months ago

    Looking for a solution.

    I am using a little jQuery program I wrote which adds buttons to the top of the table to scroll left or right. I use this often, because many people don’t notice the scrollbar at the bottom of the table on mobile devices.

    Problem is that there is a piece of css in Tablepress which will not allow this due to the use of !important. I have confirmed this is the problem. When removed, my code works. I also attempted to use the jQuery scrollLeft and scrollRight. This also does not work either and nor does custom css.

    Here is the Tablepress css that is problematic:
    .dataTables_wrapper .tablepress {
    clear: both;
    margin: 0 !important;
    }

    Here is my code:
    <script>
    jQuery(“.mobile_right”).click(function () {
    var leftPos = parseInt(jQuery(“.entry-post table”).css(“margin-left”));
    var entryWidth = parseInt(jQuery(“.entry-post”).width());
    var tableWidth = parseInt(jQuery(“.tablepress-id-1”).width());
    var etdiff = entryWidth – tableWidth;
    if (leftPos >= 0) {
    jQuery(“.tablepress-id-1”).animate({marginLeft: leftPos + etdiff}, 800);
    }
    });
    jQuery(“.mobile_left”).click(function () {
    var leftPos = parseInt(jQuery(“.tablepress-id-1”).css(“margin-left”));
    if (leftPos < 0) {
    jQuery(“.entry-post .tablepress-id-1”).animate({marginLeft: 0}, 800);

    }
    });
    </script>

    I would be grateful to anyone who has a solution. I might have to do it another way and lose the animation effect.

    Thanks,
    Andrea

    https://www.ads-software.com/plugins/tablepress/

Viewing 1 replies (of 1 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    I see what you mean, and I totally agree that the !important declaration here is not nice. Unfortunately, it’s necessary for a correct table display on some themes, so that I had to opt to use it when I introduced this CSS a couple years ago. :-/

    My suggestion to work around this would be to not use jQuery to do the actual animation, but to use CSS transitions for that, quite similar to the suggestion in https://stackoverflow.com/questions/27651340/css-important-rule-disables-animate

    For example, you could define “Custom CSS” like

    #tablepress-1 {
	transition: 1s all;
}
#tablepress-1.shifted-right {
	margin-left: -100% !important;
}

    and then use JavaScript like

    <script>
jQuery( '.mobile_right' ).click( function() {
	jQuery( '#tablepress-1' ).addClass( 'shifted-right' );
} );
jQuery( '.mobile_left' ).click( function() {
	jQuery( '#tablepress-1' ).removeClass( 'shifted-right' );
} );
</script>

    Not only would this shorten the JavaScript code, it would also shift the animation to CSS, which gives a better performance. Note that I also opted to use the HTML-ID-based CSS selectors here, for better and faster CSS selection (and in order to not interfere with another instance of the table, if it happens to be on the page multiple times).

    Regards,
    Tobias

Viewing 1 replies (of 1 total)
  • The topic ‘Need to override css with !important’ is closed to new replies.