Disabling the underline style on a4j:commandLink

Current Software Versions:

Apache MyFaces 2.0 Rich Faces 4.3

Migration Challenge:

We are in the process of upgrading from JSF version 1.2 to JSF version 2.

One issue we have encountered is that there is no native support for sorting in rich:dataTable. As a workaround, we have implemented a custom sorting solution following the example provided in the rich faces showcase. While the sorting functionality is working correctly, we are facing an issue where the column header text appears with an "underline" style due to the use of a4j:commandLink for the sort action trigger. Is there a way to remove this underline specifically for a4j:commandLink? The styling information provided in the rich faces showcase does not address this specific customization.

Your assistance in resolving this matter would be greatly appreciated.

cssjsf-2richfaces

Answer №1

To properly set up the styleClass attribute for the h:commandLink in the column header, you need to follow these steps:

First, define the style:

.tableColumnHeader {
    text-decoration: none;
    color: black;
}

Next, implement it in the code like this:

<rich:dataTable id="txnTable" rows="#{referenceData.recordsPerPage}"
    style="width: 100%" rowClasses="oddrow, evenrow"
    value="#{bean.transactions}" var="res" sortMode="single">
    <rich:column id="activityDate" sortable="true"
        sortBy="#{res.activityDate}" sortOrder="descending">
            <f:facet name="header">
                <h:commandLink value="#{msg.transDate}" styleClass="tableColumnHeader">
                    <rich:componentControl target="txnTable" operation="sort">
                        <f:param name="column" value="activityDate" />
                        <f:param value="" />
                        <f:param name="reset" value="true" />
                    </rich:componentControl>
                    <h:graphicImage value="/images/sort/sort_asc.gif"
                        style="border: 0px; vertical-align: middle;"
                        rendered="#{bean.transactions.order == 'activityDate ASC'}" />
                    <h:graphicImage value="/images/sort/sort_des.gif"
                        style="border: 0px; vertical-align: middle;"
                        rendered="#{bean.transactions.order == 'activityDate DESC'}" />
                    <h:graphicImage value="/images/sort/sort_uns.gif"
                        style="border: 0px; vertical-align: middle;"
                        rendered="#{bean.transactions.order != 'activityDate ASC'
                            and bean.transactions.order != 'activityDate DESC'}" />
                </h:commandLink>
            </f:facet>
            <h:outputText value="#{res.activityDate}" />
    </rich:column>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The width of the TD element does not affect the grid

<div id="unique-example" class="k-unique-content"> <table id="unique-grid" style="float: left; position: relative"> <thead> <tr> <th width ="410px"data-field="UniqueFileName">Unique File Name ...

htmlcssrazor

Guide on adjusting padding for jQuery Flot graph for improved styling

I am utilizing jQuery Flot to generate a basic graph. I do not want the axes to display on either side, but this is causing the points to be slightly cut off. Any suggestions on how to resolve this issue? $.plot('#'+id, [ { data: data.values ...

jquerycssflot

Arrange the child elements of a div to be displayed on top of one another in an HTML document

I am struggling with a div containing code .popupClass { width: 632px; height: 210px; position: absolute; bottom:0; margin-bottom: 60px; } <div class="popupClass"> <div style="margin-left: 90px; width: 184px; hei ...

javascriptjqueryhtmlcss

Using HTML5 and CSS for 3D transformations along with stacking divs to create a unique accordion

Is there a way to stack divs vertically above each other and use CSS3 3D transforms to create a folding effect between them? I've tried rotating the divs on their X axis, but it leaves gaps between each div because they don't collapse into each o ...

htmlcsstransform

"Using Flexbox to Align Child Elements of Varying

After learning about flexbox, a pressing question arose: How can I create a layout of columns similar to the one shown in this image? Check out MyCodeFiddle for more details! (http://jsfiddle.net/1s3bo913/) Click here to view the layout project: Layout Pr ...

htmlcssflexbox

Prevent fixed element from scrolling beyond a specific point

I'm working on a fixed sidebar that needs to scroll along with the main content and stop at a specific point when scrolling down, and vice versa when scrolling up. I've created a script that calculates the window height, current scroll position ...

javascriptjquerycss

Expand the video comparison slider to occupy the entire width and height

I am striving to develop a video comparison slider that fills the height and width of the viewport, inspired by the techniques discussed in this informative article: Article Despite my efforts, I have not been successful in achieving this effect so far a ...

javascriptjquerycsshtml

HTML block failing to implement Bootstrap styling

I am struggling to integrate Bootstrap into Drupal. I have used the 'row' class for the contact ID and added col-sm-12 for title and desc, but it is not working as expected. The width of the container seems off. Also, the accordion.js script work ...

jqueryhtmlcss

The interaction of flex-box in the presence of absolute positioning

Hey everyone, I need some help understanding why the flexbox is behaving oddly in this code snippet. 1. <!DOCTYPE html> <html> <head> <style> body{ position: relative; } .container { ...

htmlcssflexbox

Activating the mousewheel effect exclusively on specific div sections, rather than the entire page

After researching mousewheel events in jQuery, I realize that my lack of knowledge may be hindering my ability to find useful answers. I am looking to create a mousewheel effect that is only triggered within a specific div called #scroller. Currently, I am ...

javascriptjqueryhtmlcssmousewheel

Transition from mouse wheel scroll to page scroll not functioning properly when overflow is enabled

The website has a fixed element that uses overflow:auto. Users can scroll this element by positioning the mouse over it. However, once the element reaches the end of its scroll, the page does not seamlessly take over the scrolling. Instead, there is about ...

javascripthtmlcss

Distinctive design for three different list items

Currently working on a project that involves the use of ul and li elements. I need to change the background for every 3rd li element in alternating patterns. Since the li elements are generated from the backend, I do not know how many there will be. I at ...

jqueryhtmlcss

Optimal Method for altering Material UI Icon's height

Placing two icons from Material UI Icons side by side in a row reveals that although their heights are both set to 24px, the actual height of the paths within each icon differs - one being 18px and the other being 22px. This inconsistency in height is not ...

cssreactjsmaterial-ui

Consistent Row Heights for Dynamic Width Elements

I've relied on Chris Coyier's Equal Height Blocks in Rows jQuery script for various projects, and it has consistently delivered great results. However, this time I am facing a new challenge as I work on a responsive website with a fluid width ma ...

jqueryhtmlcssheight

"Encountering an issue when linking the file with phpMyAdmin

I've been struggling with this issue for hours now. I'm currently working on a registration form for my website and while coding in PHP, I connected it to MySQL and the Database using this line of code (which happens to be the 6th line): $mysq ...

phphtmlcss

The process of organizing and arranging the content that appears on a webpage is in

Seeking a solution to achieve a similar effect like this example. Wanting the sections to transition nicely when clicked on. Should I use a Jquery plugin or implement it with CSS? ...

javascriptjqueryhtmlcss

The picture tag in HTML5 is failing to be responsive when used with Bootstrap

I'm experimenting with the html5 <picture> tag to set different images. I placed the 2 pictures within a bootstrap grid, allowing them to be responsive until the breakpoint 768px, where the image changes. However, when I decrease the browser si ...

htmlcsstwitter-bootstrap

Automatically adjust the image size in CSS to fit the screen when the iPhone is rotated from portrait to landscape

I am trying to create a responsive design where an image will fit the screen without being cropped in both portrait and landscape mode. I have attempted the following code: <!doctype html> <html> <head> <style> img { max-height ...

htmlioscssiphone

Is there a way to initiate an Edge animation when an onclick event occurs?

I am interested in incorporating an interactive Adobe Edge animation that activates upon the click of a conventional HTML form button. Could you please guide me on how to achieve this? ...

cssonclickhtml5-animationadobe-edge

Cause a bootstrap column to have overflowing content rather than expanding

I've searched extensively for the solution to my problem, but haven't found a satisfactory answer yet. My goal is to create a location finder with a map on the right and a list on the left. With over 18,000 locations to search through, the list ...

htmlcssbootstrap-4