Is there a way to bypass or neglect the row style class within a column?

When I applied rowStyleClass to my DataTable, it was based on the following conditions:

<style>
  .deleted {
    color: darkgray;
    text-decoration: line-through;
  }
  .normal {
  }
</style>

However, I encountered an issue where the last two columns were not following the rule. I tried various solutions but none seemed to work.

<p:dataTable
  rowStyleClass="#{placementsController.started(placement) ? 'started' : ''} #{empty placement.deleted ? '' : 'deleted'}">

    <!-- other columns here -->

    <p:column style="width: 60px; text-align: center;">
      <p:commandLink id="deleteLink" actionListener="#{placementsController.delete(placement)}" update="placementsTable">
        <h:outputText value="#{empty placement.deleted ? 'delete' : 'undelete'}" style="text-decoration: none !important;"/>
      </p:commandLink>
    </p:column>

    <p:column style="width: 50px;text-align: center; text-decoration: none !important;">
      <p:commandLink id="cloneCommand" action="#{placementsController.clone(placement)}" update="placementsTable">
        <h:outputText value="clone"/>
      </p:commandLink>
    </p:column>

</p:dataTable>

Answer №1

It appears to be functioning properly for me:

.removed > td:nth-last-child(1), .removed > td:nth-last-child(2) {
    /* insert the regular style here */
    color: red !important;
}

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

Extract solely the content from a span element that meets specific width requirements

Currently, I am facing an issue with a dynamically filled span that gets content added to it. Once the content reaches the width of 500px, I need to be able to read only the content within the first 300px. This content can consist of either one line or mul ...

using dynamic CSS classes in a Vue app

I am currently in the process of developing a component with vuejs and tailwindcss. I have run into an issue where the colors for the background and text are not being applied properly. <template> <div :class="[isDark ? `bg-${color}-900 t ...

What causes certain properties of html and body elements to behave in this way?

I'm on a quest for understanding some mysteries. First riddle: Why does the body have a mysterious margin-top? html { height: 100%; background-color: red; } body { height: 100%; margin: 0; background-color: yellow; } <h1>Hello P ...

Creating a responsive table layout with CSS

I currently have the following code: .fiftyFiftySection { background-color: #000; } .odometer { font-size: 3em; text-align: center; } table td { column-width: 1000px; text-align: center; } @media (max-width: 500px) { table td { column ...

My div won't stay fixed in the layout no matter what I try

Being fairly new to css, divs, and everything in between, I decided to create a simple layout for my band without unnecessary links like bio or merch store. Instead, I wanted separate spaces for our video, music player, and a Facebook window. I successful ...

When a sidebar is added, Bootstrap 5 cards that are supposed to be displayed in a row end up being shown in a column instead

When I have a row of Bootstrap 5 cards that display correctly, but then add a sidebar that causes them to stack in a column instead of remaining in a row. How can I maintain the row layout even with the addition of a sidebar using specific CSS classes or p ...

Display a full-width card beneath each small card in every row using CSS

In a scenario where I have designed a layout consisting of 3 column/row cards across multiple rows. Each card displays basic information, and when a user clicks on any specific card, a full-width card below that row will display more detailed information. ...

Tips for positioning 2 React Native elements: have one centered and the other aligned to the beginning

Consider the following React Native styles: var styles = StyleSheet.create({ parentView:{ width: 400, height:150 }, containerView:{ flex:1, flexDirection: 'row', alignItems: 'center', justifyContent: &apos ...

Ways to customize background color for a particular date?

I have been using the fullcalendar npm package to display a calendar on my website. I am trying to figure out how to set a background color for a specific selected date. I tried looking into this issue on GitHub at this link. However, it seems that dayRe ...

Is it wise to use position absolute when floating a React JS tag around a component?

I am eager to dive into a challenging project. My goal is to replicate the design shown in the image below using React JS. Initially, I considered using position: absolute and manipulating the positioning of my divs accordingly. However, upon closer inspec ...

How to toggle the visibility of a div with multiple checkboxes using the iCheck plugin for jQuery

I customized my checkboxes using the icheck plugin to work with both single and multiple checkboxes, including a "Check all" option. Here is an example of how it looks in HTML: HTML : <div>Using Check all function</div> <div id="action" c ...

Troubles with Sizing in Twitter Bootstrap Modal

One issue I have encountered with my application is the varying widths of modals. Setting the width inline works well, but when the window is compressed it can cause part of the modal to be off screen, rendering it useless at smaller resolutions such as th ...

The positioning of the text appears to be in the center, but it is actually

Currently, my text "lorum ipsum" is centered in CSS, but I want to align it to the left and add padding on the right later. Can someone explain what I've created here? #ubba { font-family: "Open Sans", sans-serif; font-size: 20px; ...

What is the correct way to utilize the `<svg>` element when loading external resources?

I have gone through numerous tutorials on how to add external SVGs to a webpage... such as this one: The code I am using looks like this: <svg> <use xlink:href="https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg">& ...

An error occurred: [object Object] does not support the 'popup' method

I've been attempting to close the jQuery popup by using $('#partsPopup').popup("close"); However, I encountered an error stating that there is no method called "popup". Below is the sequence of scripts that I have followed. Any assistance wo ...

Organizing flex-items in a specific manner

My goal is to organize flex-items in a specific layout: To achieve this, I am referencing the following example: .Container { display: flex; overflow: hidden; height: 100vh; margin-top: -100px; padding-top: 100px; position: relative; widt ...

Modifying the Key in a Dictionary

I have a function that retrieves data from a DataTable and converts it into JSON format. Here is the code snippet: public object DataTableToJSON(DataTable table) { var list = new List<Dictionary<string, object>>(); foreach ...

Increase the Z-Index of the Header above the Material UI Modal Background

Currently, I'm in the process of developing a mobile version of a web application using Material UI. However, I am encountering some challenges when it comes to matching the designs accurately. My approach involves utilizing the MUI App-Bar in conjunc ...

Adjusting Border Lengths with Media Queries

I'm currently using the following code, but I'm facing an issue with media queries on iPAD where the right border is too close to the second Div. I'd like the border to align properly for all devices and browsers when using media queries. An ...

Clicking on the title link will open the content in an iframe, but the image

Having trouble with a previous post but I've created a codepen to illustrate the issue. Hoping someone can help me out! Check out the codepen here: "https://codepen.io/Lossmann/pen/GRrXyQY" ...