Gallery card links not working

07-23-2020 08:08 AM
New Contributor III

We are using some gallery cards (similar to these Calcite Bootstrap) on our hub page (City of Sioux Falls GIS) but the links no longer work. Clicking on the "view" button that contains the <a href="#"> link does nothing.  Have tried with and without the target attribtute but it makes no difference.

Example Code:

<div id="ARTWORK" class="gallery-card ember-view">
<div class="calcite-web">
<div class="card-base" style="text-align:center">
<div class="gallery-image">
<a href=""><img src=""></a>
<div class="card-content">
<div class="gallery-card-title">
<p class="gallery-card-desc-snippet">Discover locations and information about City owned artworks</p>
<a class="btn btn-primary explore-button" href="" target="_top">View</a>

Other buttons on our site work fine, just not within gallery containers - has this been deprecated?

Appreciate any thoughts on how to fix this.


0 Kudos
2 Replies
Esri Contributor

Hi Aileen Profir‌ -- it looks as if you are manually constructing your gallery using the class names of our typical gallery, this is causing a collision where a pseudo element is preventing selection of the button on your cards -- see the ::before in the DOM.

Using your own unique class names and CSS would likely resolve what you are experiencing.  

If you don't mind, I'm curious as to why you are manually constructing your own gallery instead of using the out-of-the-box layout card.  We are considering improvements to the Gallery Card, so feedback is welcome!

0 Kudos
New Contributor III

Hi Brian,

We construct them manually because we want unique thumbnails and description texts for this page rather than what is listed in the metadata/item details for each item.  Being able to customize these two features in the gallery cards would certainly make things easier for us.  



0 Kudos