Add custom display property

[alexzerah]

👋 Hi everyone,

First of all, thanks for your really cool lib!

As a web developper I need a way to add custom css display. For exemple display: flex instead of display: block.

It can be really cool 🤘

Thanks again

[Alex-D]

Hey!

So you basically just need an option to change the value set in this line : https://github.com/Alex-D/Cookies-EU-banner/blob/6e8c083864f17b72f8cdfcb79690d97d0ff24554/src/cookies-eu-banner.js#L81

[alexzerah]

Yeah, I was thinking about updating outside the library, but I solved the problem I was. Thanks

[Alex-D]

You can hack it with something like

#cookies-eu-banner[style*="display: block"] {
  display: flex !important;
}

[robsonsobral]

Easier than that is to use the hidden parameter on the initial state of the form. From MDN:

The hidden global attribute is a Boolean attribute indicating that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. Browsers won't render elements with the hidden attribute set.

Which make it perfect for this case.

[robsonsobral]

Would you accept a PR, @Alex-D ?

[Alex-D]

Of course! :)