4.0.1 version - style background issues

[joakin]

4.0.1 version - style background issues

[joakin]

It seems like the elm-canvas is not getting display:block and so it is not properly scaled so the css you apply to it looks strange.

From Custom Element Best Practices:

Custom elements are display: inline by default, so setting their width or height will have no effect. This often comes as a surprise to developers and may cause issues related to laying out the page. Unless you prefer an inline display, you should always set a default display value.

This works https://ellie-app.com/869YWKNhxtda1

And in the elm-canvas examples we use this snippet:

elm-canvas/public/index.css

Lines 25 to 29 in dd61baa

	elm-canvas {
	display: block;
	background-color: white;
	box-shadow: 0 0 200px rgba(0, 0, 0, 0.07);
	}

If you can I'd be happy to take a PR that adds another note to toHtml and toHtmlWith briefly explaining the default display for the element.

Hope this helps 👆!

[CatrielD]

Thanks for pointing me in the right direction!

I've used 'display: inline-flex' for proper display. Using block, has a minor "glitch": an inferior black border.

I've created a gitlab repo with the examples on the discourse page; feel free to use it anyway you wish, or not.

Ok, I'll make a PR.

[joakin]

Thanks CatrielD, I'll look at it soon 👍