Making result (pagefind-ui__result) clickable instead of title

[alexanderameye]

Right now, the element with class pagefind-ui__result-link is the one that is actually clickable. How is it possible to make the whole result clickable? (The li element with the class pagefind-ui__result)

[flyfoto]

Especially the optional image left to a result is expected by most userers to be a clickable link to the hit. see #235 posted long ago

[alexanderameye]

Is there any workaround possible?

[nhoizey]

I think it should be possible with these styles:

.pagefind-ui__result {
  position: relative;
}

.pagefind-ui__result-link::after {
  position: absolute;
  inset: 0;
  content: "";
}

You can try it here (where I don't use the default CSS):

https://nicolas-hoizey.photo/search/?q=try

[alexanderameye]

.pagefind-ui__result {
  position: relative;
}

.pagefind-ui__result-link::after {
  position: absolute;
  inset: 0;
  content: "";
}

That worked well thanks! A more modular/minimal UI solution that you have more control over yourself would be a nice photo addition, but this will most definitely do for now. Thanks a lot :)

[nhoizey]

@alexanderameye you're welcome, happy it worked!