CSS not applying to elements

Collaboration
#1

It’s been a minute, loving the new changes Anymod has brought. I do have a question with a mod I’m trying to build.

I have CSS in the mod that styles elements that get generated with JS… however when they get rendered the CSS does not apply to them! Any idea why this might happen?

#2

Are you using document.body.append or something similar?

#3

It’s using jquery so element.append

#4

The CSS gets scoped to elements within the mod, so you could either add new elements within the mod (using something like mod.el.appendChild).

If it’s being added outside of the mod, you can add the mod’s key as an attribute, e.g. el.setAttribute(mod.el, '')

That should cause the mod’s CSS to apply to it also

#5

okay thanks, and no it’s not being added outside the mod… I’ll see if I can get it working with mod.el.appendChild

#6

If you want to share the url I can have a look

#7

https://anymod.com/mod/mooda

#8

Great, do you know where line in question is in the JS?

#9

Not exactly, I just did a ctrl+F for append and found some calls. It’s a third party library called Lity

#10

On line 52, where the Lity element is defined, I think you could try something like:

template:

<div class="lity" role="dialog" aria-label="Dialog Window (Press escape to close)" tabindex="-1">
  <div class="lity-wrap" data-lity-close role="document"' + mod.key + '>
    <div class="lity-loader" aria-hidden="true">
      Loading...
    </div>
    <div class="lity-container">
      <div class="lity-content"></div>
      <button class="lity-close" type="button" aria-label="Close (Press escape to close)" data-lity-close>
        &amp;times; 
      </button>
    </div>
  </div>
</div>

I added + mod.key + to the parent element. That makes the popup be over the gallery.

#11

oh sweet thanks, it’s getting closer!

#12

Basically any time Lity adds an element, you’ll want to add the mod’s key to it

#13

I guess it’s just the transitions and backdrop not showing now

#14

Alternatively you could just add the mod’s key to the body, and that will make the mod’s CSS apply to your entire page

#15

would I need to add the mod’s key to those too?

how could I add the key to the body?

#16

Yes I believe so; with jQuery I believe it would be

$('body').addClass(mod.key)

#17

hmm okay thanks… however I’m still not able to get the backdrop to show

#18

I have it working, but there was no CSS rule to make the backdrop visible, so I added

.lity-wrap {
  background: rgba(0,0,0,.5);
  ...
}

https://anymod.com/mod/bkkok?v=30

#19

hmm okay, cool… that’s interesting because the current style to make it visible is

.lity { 
  background: #0b0b0b;
  background: rgba(0, 0, 0, .9);
}
#20

Sorry use this one: https://anymod.com/mod/rddkb?v=30

I believe it is the .lity-wrap element that needs the background. Since everything inside of .lity is positioned absolute, it doesn’t have any height