Vaadin14 RippleCard

Flow
1

Hi,

I added the card component from the directory and followed instructions from https://vaadin.com/directory/component/card . It worked functionally but I do need help with these 2 issues…

  1. Spacing - When I add these cards, they stretch and touch/overlap with each other. This is even when the content inside the card do not need all that real estate. Also, it does not look very aesthetic. Is there any styling/ class parameters to set to make them appear like palette buttons such as square (vertical layout of icon + title +/- desc) or a 2x1 (icon on left & title +/- desc on right). Either way, I would like to see some space between them and to be able to control the same.

2 Visibility - I needed to show/ hide the cards based on some events. I tried using setVisible() on RippleClickableCard. There are no compile errors or on the server logs. The same works on menu items (RouterLink) but on the cards I find this error on the JS Console. When this error occurs, none of the cards are displayed.

Uncaught TypeError: Cannot read property 'details' of undefined
    at index.js:3438
    at Array.map (<anonymous>)
    at createDynamicStyleOverrides (index.js:3438)
    at runDynamicStyle (index.js:3576)
    at HTMLDocument.documentVisibilityListener (index.js:3555)

Note: My application project is kept strict with Java (server-side) only. I do not touch html/css aspects, as I find these are auto-handled by Vaadin framework and do not want to meddle with anything that is generated by the framework.

Thanks in advance for all the help.

Edit: I just realised I had added some styles through java api .getStyles().set() on the cards based on recommendations from a thread explaining FormLayout. Once I remove them, the visibility works again, so the second part is resolved now. Will await some good advice for the 1st part (spacing).

2

I just realised I had added some styles through java api .getStyles().set() on the cards based on recommendations from a thread explaining FormLayout. Once I remove them, the visibility works again, so the second part is resolved now. Will await some good advice for the 1st part (spacing).