I created a context menu and added a span as shown here. The problem is, though the span is set to full width it is not taking the full space.
Span is an inline element and has no width
You must use DIV
Or alternatively use css to make the span use display: block
But that’s semantically less good
I’m using this span as Badge because I want to highlight some menuItems in different colors. is there any other alternative to achieve this ?
Either of the above approaches should work
the Span API in Flow is easier to work with for simple stuff like badges, so I’d probably go with that. The semantic difference really only matters to someone reading your code and wondering how come the <span> behaves like a block element – neither element has any semantic significance for accessibility for example.
I’m using span to show the Delete in a different color. But all I need is, just a background color for the menu item to differentiate from others
Why not just adding a class name? It’s supported in 24.3 https://github.com/vaadin/platform/issues/4748
oh yeah definitely, didn’t notice it was for a menu item. No need to wrap it in a span.