Overwriting Inline CSS using !important does not work

Question

I am trying to overwrite the inline style highlighted in the picture. I have tried using CSS !important as follows:

1)

group.buttonizer-group-0-0-1 [style]{
display:flex !important;
}

group.buttonizer-group-0-0-1 div[style]{ display:flex !important; }
group.buttonizer-group-0-0-1 { display:flex !important; }

Unfortunatly, none of the above options have worked. Is there any other CSS or JS code snippet I could try to change display:block to display:flex for this element?

EDIT

I tried following CSS that works in the sense that the button is then positioned correctly:

div[id^="gb-widget"], .buttonizer-group-0-0-1{
  display:flex !important;
}

However, that CSS overwrites my JS:

jQuery(document).ready(function($){
    // This is a little hack: Wait until the menu button exists and then hide it
    var checkExist = setInterval(function() {
        if ($(".buttonizer-group-0-0-1").length) {
            $(".buttonizer-group-0-0-1").hide();
            clearInterval(checkExist);
        }
    }, 10);
  
    // Check the scroll status of the window and fade in the menu button accordingly
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 850) {
              $(".buttonizer-group-0-0-1").fadeIn();
            } else {
              $(".buttonizer-group-0-0-1").fadeOut();
            }
        });
    });

});

You want to override style attribute from .buttonizer-group-0-0-1 (not it's child), so you need to stick it next to the class like so : group.buttonizer-group-0-0-1[style] — JFC, Jan 14 '21 at 16:55
give it an ID and you can override it easily that way. This is generally why it's not recommended to use inline CSS, it makes changing anything a chore — Amr H, Jan 14 '21 at 17:19
@AmrH it's also not recommended to use IDs for styling, stick to classes. Especially when it's a list of groups (like the posted code suggest) — cloned, Jan 15 '21 at 08:44
@George: I am not sure how your solution is different to what I tried, besides you not using !important. Could you please clarify? — Sven, Jan 15 '21 at 13:50
@AmrH: Thanks for your comment. Could you share with me how to give it an ID? This is a WP website, so I do not know where to find the html script. Is there a way to assign IDs using CSS or JS? — Sven, Jan 15 '21 at 13:52
@cloned: I think a lot of my code is "not recommended", but this is my first website, and sometimes I don't know how to overwrite plugin and theme code in WordPress without using ugly work-arounds :) — Sven, Jan 15 '21 at 13:54
@JFK: So the final code would be: group.buttonizer-group-0-0-1[style] { display: flex !important; } Also would that overwrite the JS I have (See edited question above) — Sven, Jan 15 '21 at 14:00
@Sven. I honestly think you swim against the tide here.. Since you seem to have this problem because of jQuery faceIn function, maybe this can help you : https://stackoverflow.com/questions/28904698/how-fade-in-a-flex-box. — JFC, Jan 15 '21 at 18:09

vaggelis · Answer 1 · 2021-09-27T10:06:28.187

I was trying something similar today. The problem with this is that elements that produced from Buttonizer are appear last in the page, that is why jQuery can not change it, because jQuery script executes before these elements appear. Try to add a setTimeout() like bellow:

jQuery(document).ready(function($) {

//put what you want to do in a function
function hide_buttonizer(){
   //in my case worked with selector 
   $('.buttonizer').attr('style','display: none !important');
}

//buttonizer spits the elements very last so we have to w8 &
//triger the function after specific time
window.setTimeout( hide_buttonizer, 2000 );
});

I think if you hide it properly after it loads your scroll() function should work fine if you change the selectors to .buttonizer.

Overwriting Inline CSS using !important does not work

1 Answers1