Width of dynamically generated cards in Hub

Question

Hi All,

I am building a hub site for a client and they want a list of tools/apps that is dynamically generated based on what the user has access to. I'm using the gallery for this - the problem is that if there are more than 4 cards, the 5th card fills the full width of the page, whereas the client needs it to be the same size as the other cards so that it looks good and doesn't suggest that larger cards are more important than smaller cards. I have tried to override the css for this but cannot find the correct selectors so that the css in the header overrides the rules applied in the shadow dom.

Anyone know how to make all the cards in a gallery the same size or another method that I could dynamically list out resources?

Thanks!

rwrenner_esri · Answer

Both methods would need to be adjusted each time a new item is added/removed.

The spacer method would involve some configuration updates when the number of items changes. The Gallery could still reference content either Dynamically (including my item tag) or Manually. Each time an update is made to the number of items, an update to the spacing would also be needed to keep it current.

With the customized card method, a new card would need to be created via HTML/CSS for each new item.

-Rylee

Char10773g · Answer

Thanks very much @SarahRadel @rwrenner_esri - is it possible to implement these solutions and still dynamically generate the cards based on the tagged items that the user has access to? My impression is that the spacers would stay static and would not change with the number of cards rendered? With the custom cards you would have to create one for each item - they would not dynamically update as you add resources to the correct tag?

rwrenner_esri · Answer

Another option is, instead of using the COTS gallery, to make all the cards from custom HTML/CSS code to your exact specifications - depending on your use case, maybe this means 2 or 3 cards per row rather than 4, or different sizing on desktop and mobile. Some examples are below.

https://esri.github.io/calcite-web/examples/core/

https://hub.arcgis.com/pages/site-customization

https://www.youtube.com/watch?v=suS8rcaLQVc

I haven't heard of anyone directly updating the CSS of the COTS Gallery (unsure whether that's even possible) but entirely custom cards are often used to extend the COTS capabilities of Hub.