Question

I’ve been trying to develop a way to make rows of an ASP.NET GridView (or table in general) clickable, whilst still maintaining all the usual actions you’d associate with links – correct right-click context menu, middle-clickability to open in a new tab, etc.

My solution uses jQuery to find <a> tags within each row and expand that <a> tag to the size of the row, thus making it appear that the row is clickable. It all works fine in Firefox and Chrome, but IE gives priority to the the text in the table rather than the <a> tag, so you get a text selector cursor and can’t click the link when you hover over the text. This simple example shows what i mean:

<style type="text/css">
.link {position: absolute; z-index: 100; top: 200px; border: 1px solid pink; width: 150px; height: 150px;}
.content {position: absolute; z-index: 0; top: 200px; border: 1px solid red; width: 150px; height: 150px;}
</style>

<a href="#" class="link">link here</a>
<div class="content">
    You can't click the link when you hover over this text in IE    
</div>

This could be by design for accessibility, but if that was the case I’d expect other browsers to follow suit. Can anyone offer any suggestions as to how to avoid the issue?

Answer 1

Have you tried setting the padding of the a to fill the table row?

The tricky part with that is you’d have to do the math so that it didn’t exceed the row. So something like:

$("a").css("padding-top", function() {
         $(this).closest("tr").height - $(this).height;
       });

and so forth, based on the position of the a to the table row.

My thinking is that maybe IE sees overlapping elements (as in positioned on top of one another) as a possible conflict and thus makes a decision to try to accommodate both (“well, the link is yay big, but the text outside of it really isn’t a link, so let’s treat it like normal text”) etc, but that elements that overlap purely for style (which I think padding is considered) would not raise any alarms because, hey, it’s just a visual thing!

Just thinking out loud, let me know if it works out.