Using a link inside p/h:panelGrid columns

Question

I'm using <p:commandLink> inside <p:panelGrid> as follows.

<p:panelGrid columns="1" style="width: 50%;">
    <p:commandLink>
        <h:outputText styleClass="ui-icon ui-icon-search"/>
    </p:commandLink>

    <p:commandLink>
        <h:outputText styleClass="ui-icon ui-icon-search"/>
    </p:commandLink>

    <p:commandLink>
        <h:outputText styleClass="ui-icon ui-icon-search"/>
    </p:commandLink>
</p:panelGrid>

In this case, the area surrounded by columns inside <p:panelGrid> as shown in the following picture is clickable in its entirely

but it is not the case of Internet Explorer (8) in which case, the only clickable item is the link icon as indicated by the styleClass attribute of <h:outputText>.

Is there a way to make entire columns of <p:panelGrid> clickable on Internet Explorer?

Answer 1

In order to let an element span the entire table cell, the element in question needs to have CSS display property set to block. In this particular case, this is already set via .ui-icon class on the <span> element as represented by <h:outputText>. However, the .ui-icon in turn defines a background image. IE incorrectly attaches the background image to the parent element instead of the current element. You need to set the parent element to display:block as well, which is in your case the HTML element as represented by <p:commandLink>.

E.g. this should do:

<p:panelGrid columns="1" styleClass="search">
    <p:commandLink>
        <h:outputText styleClass="ui-icon ui-icon-search"/>
    </p:commandLink>

    <p:commandLink>
        <h:outputText styleClass="ui-icon ui-icon-search"/>
    </p:commandLink>

    <p:commandLink>
        <h:outputText styleClass="ui-icon ui-icon-search"/>
    </p:commandLink>
</p:panelGrid>

With

table.search {
    width: 50%;
}
table.search a {
    display: block;
}

This shouldn't affect the behavior in real browsers.