Oxygen XML Forum

Posted: **Tue Nov 03, 2020 12:52 am**

Is there a way to expand the clickable area of a webhelp tile? For usability, it would be nice if the whole tile (green) was clickable and not just the title text (red).

tile.png

I found this answer here, but the values don't match the entire tile area.

How to increase the clickable area of a <a> tag button?
https://stackoverflow.com/questions/110 ... tag-button

Code: Select all

a {     
   display: inline-block;     
   position: relative;    
   z-index: 1;     
   padding: 2em;     
   margin: -2em; 
}

Is there a way to make this work so that the entire tile area is clickable? Can this also take into account the responsive sizing of the tile?

Posted: **Wed Nov 04, 2020 12:05 pm**

Hello,

You can achieve this behavior by contributing a custom JavaScript that registers a 'click' event handler on each tile that opens the associated link.
The procedure is described in our User Manual:https://www.oxygenxml.com/doc/versions/ ... -html.html
The JS snippet may look like the one below:

Code: Select all

    const list = document.querySelectorAll('.wh_tile');
    Array.prototype.forEach.call(list, function (tile) {
        tile.addEventListener('click', event => {
            tile.querySelector('a').click();
        });
    });

I have created a sample Publishing Template containing the above customization. It is available here: https://github.com/oxygenxml/oxygen-pub ... k-on-tiles

Rgeards,
Alin

Posted: **Mon Dec 07, 2020 8:32 pm**

Thanks for the sample publishing template. It works great!

Oxygen XML Forum

Expand clickable area of Webhelp tile

Expand clickable area of Webhelp tile

Re: Expand clickable area of Webhelp tile

Re: Expand clickable area of Webhelp tile