# On Click - External Link

**URL:** <https://community.noloco.io/t/on-click-external-link/1684>\
**Category:** Feature Requests\
**Tags:** feature-request\
**Created:** [February 6, 2025, 2:46pm UTC](https://community.noloco.io/t/on-click-external-link/1684 "2025-02-06T14:46:16Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Brandi\_Bullock](https://dub1.discourse-cdn.com/flex005/user_avatar/community.noloco.io/brandi_bullock/32/73_2.png) [@Brandi\_Bullock](https://community.noloco.io/u/Brandi_Bullock)\
**Post date:** [February 6, 2025, 2:46pm UTC](https://community.noloco.io/t/on-click-external-link/1684/1 "2025-02-06T14:46:16Z")

</div>

Would love the option to be able to navigate to a link in the record on click from a collection view.

Current use case:  
I’m building out my affiliate link page and I have the url saved in a field on the record. Rather than a ‘button’ to take the user to the link, I’d rather the entire card be clickable and navigate to the external url.

This isn’t a major concern, just one of those quality of life improvements. 🙂

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/noloco/original/2X/3/3a50d1690494a647d075ca47d7dbd5dbaa260370.png)

---

<div class="post-metadata">

**Author:** ![seanvosler](https://dub1.discourse-cdn.com/flex005/user_avatar/community.noloco.io/seanvosler/32/698_2.png) [@seanvosler](https://community.noloco.io/u/seanvosler)\
**Post date:** [February 6, 2025, 5:30pm UTC](https://community.noloco.io/t/on-click-external-link/1684/2 "2025-02-06T17:30:37Z")

</div>

Here’s one work around lol - You’ll just need to find the parent ‘element class’ for that page via chrome developer, it’s a few div’s up from the card in the inspector.

```auto
/* Change any buttons in a card to an overlay which,
 when clicked, opens the link in a new tab */
.element-XXXXXXXX [data-testid=collection-record] span a{
  position: absolute;
  top:0;
  bottom:0;
  width:100%;
  z-index: 2;
  background: transparent;
  color:transparent;
}

```

**Note:** I’m not sure what this does if you have multiple buttons on a card, but if you have one it works just fine.

### Before

google doc button opens in new tab…

 ![Screenshot 2025-02-06 at 9.28.09 AM](https://europe1.discourse-cdn.com/flex005/uploads/noloco/original/2X/5/574d5cc47122050fefdc985dd2dda5d044a291ba.png)

### After

Google doc button becomes an overlay that is the exact height and width of the card and becomes clickable.

 ![Screenshot 2025-02-06 at 9.29.15 AM](https://europe1.discourse-cdn.com/flex005/uploads/noloco/original/2X/9/9965e37c1f25646190a3fc2cb876575e651424bf.png)

---

<div class="post-metadata">

**Author:** ![Brandi\_Bullock](https://dub1.discourse-cdn.com/flex005/user_avatar/community.noloco.io/brandi_bullock/32/73_2.png) [@Brandi\_Bullock](https://community.noloco.io/u/Brandi_Bullock)\
**Post date:** [February 7, 2025, 1:40am UTC](https://community.noloco.io/t/on-click-external-link/1684/3 "2025-02-07T01:40:27Z")

</div>

> [@seanvosler](#):
>
> ```auto
> /* Change any buttons in a card to an overlay which,
> when clicked, opens the link in a new tab */
> .element-XXXXXXXX [data-testid=collection-record] span a{
> position: absolute;
> top:0;
> bottom:0;
> width:100%;
> z-index: 2;
> background: transparent;
> color:transparent;
> }
> 
> ```

Thanks again Sean!! This css worked great - just hoping a toggle is on the horizon 🙂

---

<div class="post-metadata">

**Author:** ![Brandi\_Bullock](https://dub1.discourse-cdn.com/flex005/user_avatar/community.noloco.io/brandi_bullock/32/73_2.png) [@Brandi\_Bullock](https://community.noloco.io/u/Brandi_Bullock)\
**Post date:** [February 7, 2025, 3:57am UTC](https://community.noloco.io/t/on-click-external-link/1684/4 "2025-02-07T03:57:06Z")

</div>

If anyone is trying to use the css above, just fyi, you may need to make an additional tweak to work on mobile, here’s the final css that makes the entire card clickable:

```auto
.element-XXXXXXXXX [data-testid=collection-record] a {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: transparent;
  color: transparent;
}

```

---

<div class="post-metadata">

**Author:** ![seanvosler](https://dub1.discourse-cdn.com/flex005/user_avatar/community.noloco.io/seanvosler/32/698_2.png) [@seanvosler](https://community.noloco.io/u/seanvosler)\
**Post date:** [February 7, 2025, 5:13pm UTC](https://community.noloco.io/t/on-click-external-link/1684/5 "2025-02-07T17:13:36Z")

</div>

You’re optimizing for mobile?? You’re braver than i am haha

---

<div class="post-metadata">

**Author:** ![Brandi\_Bullock](https://dub1.discourse-cdn.com/flex005/user_avatar/community.noloco.io/brandi_bullock/32/73_2.png) [@Brandi\_Bullock](https://community.noloco.io/u/Brandi_Bullock)\
**Post date:** [February 8, 2025, 11:15pm UTC](https://community.noloco.io/t/on-click-external-link/1684/6 "2025-02-08T23:15:53Z")

</div>

Only for certain builds lol - it’s def a lot!