I have an accordion type that has title text. When it is open, it has one addition, and when it is closed, it has another. All panels start with their open styles, and then through JS they are closed. In Chrome and Safari, the title text does not apply a closed add-on.
If I look at it in the inspector, the correct (open) indentation will be displayed as applicable, and when I click on the actual element in the inspector, I can see where the addition should be performed.
The only way to get him to apply it or to "draw" it (if that is the correct term) is to switch (or add) any style to this header text or inside this panel.
I also found that when I add an add-on through the inline style with the inspector, this also does not apply and switches, which does not change it.
It seems like this is very similar to IE's "hasLayout" problem, but I cannot find anything referring to a similar error. Does anyone have any ideas for further testing or how to fix it?
I cannot reproduce this problem in a simpler jsfiddle, and the project I'm working on is massive, so here are the pieces of code that give me the problem:
CSS
@media only screen and (min-width: 600px) and (max-width: 767px) { .checkout-plans .collapsible .title { padding-right: 130px; } .checkout-plans .collapsible.closed .title { padding-right: 323px; } }
HTML
<div class="module checkout-plans"> <div class="collapsible active"> <header> <div class="title"> <h3>This text has the correct padding applied</h3> </div> </header> </div> <div class="collapsible closed"> <header> <div class="title"> <h3>This text does not have the correct padding after having the "closed" class applied via JS</h3> </div> </header> </div> </div>
source share