Does not appear under a flex element

[ghost]

I have my main element using a display:flex, and i'm not sure why, but it does not show at all with that. If I remove the display:flex, it works!

[StigNygaard]

@jackpurrin Thanks for reporting. I don't know exactly how your "flex setup" is (?), but after a little experimentations I can confirm that in some flex scenarios the element seems to "disappear".

What really happens (in the cases I saw) is that the width of the element "collapses" to zero. So one way to solve the issue, is to explicitly defining the width or min-width of the element. I hope that can help?

After the quick experiments I have made, I am considering setting the elements default width to 100% (which you always can override in your own css). But I will probably experiment a bit more before I decide if that is the way I will go in a future update of the component.

[ghost]

oh thanks, i'll check if writing a max width would help!

also for further context, my css is written like

main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
...
p {
    width: 35%;
}

i wasn't going to include that p in the context, but it sounds relevant due to being something regarding width now.

[ghost]

did you mean this? if so, i did put a !important to it and no different results.

lastfm-tracks {
  box-sizing: border-box;
  border: 1px solid #000;
  width: 500px !important;
  height: 260px;
}

[ghost]

maybe the display is wrong? firefox shows it being 500x260

[ghost]

MODULES CAN'T BE ADDED WHILE IN A HTML FILE IN FIREFOX TvT
i just had to push to git and guess what? it kinda works.
the styling is weird but i think i know what's going on.

[StigNygaard]

Ahh, that explains why it more looks invisible than collapsed in your firefox screenshot above.
Though, cannot load modules from file. I didn't know that, but probably haven't tried because I'm using a local webserver when I am developing (I also use Firefox). But good to know if that is the case.

[ghost]

i think the reason why the css looks weird is because the js was trying to import tracks.css, but i have my js and css in different folders, so it should be importing /css/lfm.css . but that's an easy fix!
and yeah, it's kinda weird that you can't import modules in a file, but at least i got it fixed!

[StigNygaard]

👍Yes tracks.css needs to be located together with lastfm.js.

[ghost]

thanks for your time and your awesome widget!

[StigNygaard]

Yes, it must be your text-align:center that is doing what I am thinking about. Did you define that style directly for the lastfm-tracks element? Can I see your site somewhere? I'm curious 🙂

[StigNygaard]

You also got some font-shadow into it I see 🙂

[ghost]

yeah my site is at jackpurrin.me!! and my source code is at jackpurrin/me
and i remember the text-align being for the whole site, i think. (i haven't looked at my fonts.css file in a sec)

[StigNygaard]

Thanks. Found it. I thought I would prevent that kind of things to be inherited into the element/playlist (at least unless you intensionally set it on the element).
Thanks, I will investigate. But sounds like you don't mind it as it is 🙂

[StigNygaard]

Hi @jackpurrin
FYI, I have made an updated version of the widget (1.9.0) which prevent styles like text-align and text-shadow being inherited into the widget. But if you like the centering and text-shadow being inherited into the widget, just keep the version you already have.