Menu ▾ ▴

dynamically changing cell background colour

Open Discussion
Bilal
2006-11-16
2012-10-09

  • Bilal

    Bilal - 2006-11-16

    Hi,
    I'm looking for a way to dynamically change the class attribute in the
    display:column tag in order to variably set the CSS-class for individual cells
    in a column.

    For example:
    <display:column class="${currentObject.classString}">
    would be cool.

    Currently, the class-attribute is fixed throughout a column and it's only
    possible to manipulate the CSS-class of the cell contents itself via a
    decorator; but not within the <TD>-tag itself. Hence it is not possible to set the
    border colors or other CSS-properties at the TD-level .

    Any suggestions?

    Thanks,
    Bilal

     

    • Colin Kilburn

      Colin Kilburn - 2006-11-16

      I would probably try wrapping my cell contents in a div, inside the td. Then style the div.

      Haven't tried it but let us know if it works.

      Colin

       

      • Liam Clancy

        Liam Clancy - 2006-12-22

        Trawling through the lists shows that this question has been raised a number of times and not satifactorily answered from a web design point of view:

        e.g. in 2004: http://sourceforge.net/mailarchive/message.php?msg_id=9660486

        This approach mentioned before may appear to result in the same visual display, but it is not the same thing as actually setting the class on the 'td' tag itself, and is restrictive to the adoption of display:tag on existing pages/tables as it requires any exisiting CSS to be changed.

        Additionally putting HTML code in the decorator's Java class pretty much breaks is benefits as a decorator.

        One option is to use JSTL to evaluate the desired logic to create a local var and output this, even if its an empty string e.g.:

        <c:choose>
        <c:when test="${co.activeElement}">
        <c:set var="coStyle" value="active"/>
        </c:when>
        <c:otherwise>
        <c:set var="coStyle" value="inactive"/>
        </c:otherwise>
        </c:choose>
        <display:column class="${coStyle}">

        As the class attribute is a passthrough, this will work for most usecases but is putting logic that belongs in the decorator in the page and so subject to implementation errors.

        Since there are 'addRowClass' and 'addRowId' methods for TableDecorator (the javadocs on this site appear out of date), and that you can assign decorators to columns it would seem reasonable to expect there to be 'addCellClass' and 'addCellId' methods available to be used.

        Here is a real world example as to why this is neccessary (apart from not neccessarily being able to change the CSS):

        coList td.defaultCo {

        background-image:url(/web/ui-html/images/icon-confirm-small.png);
        background-position:center;
        background-repeat:no-repeat;
        min-height:20px;
        min-width:24px;
        }

        coList td.defaultCo span

        display:none;
        }

        <td class="defaultCo">
        <span>This is the default</span>
        </td>

        This shows a nice icon for most users, which is reliably centered in the cell no matter what the size/shape of the table. The text within is hidden for most users unless they are using an assistive or mobile browserin which case they hear/see the text. This also has benefits for automated application testing.

        Hope this helps.

        regards

        Liam Clancy (metafeather)

         

Log in to post a comment.