Styling for a <h:panelGrid using CSS

JSF / CSS / Trinidad

Note - these three are part of a delivery from IBM ILog and cannot be changed

JSF 1.2-1.2_07-b03-FCS

JSTL 1_1-mr2 (special build)

Trinidad 1.2.8

Java 1.6.0_22-b04

Eclipse 3.6.0 (Helios)

Tomcat 6.0.28 (needs to run also on Weblogic)

IE 7.0.5730.13

Firefox: 6.0

Modest experience in JSF, almost none in CSS.

JSP file: ...


    <tr:form>
        <h:panelGrid 
            columns="2" 
            border="2">

            <h:panelGrid 
                style="
                    background-color: Yellow; 
                    bottom: 0px; left: 0px; right: 0px; top: 0px; 
                    width: 150px">
            <tr:outputLabel 
                inlineStyle="font-size: 16px"
                value="#{msg.activityType}" 
                for="activityType"
                shortDesc="#{msg.titleFreqToolTipActivityType}"/>
            </h:panelGrid>
<!--... more panel grids-->         
        </h:panelGrid> 
    </tr:form>

The label shows a Yellow backgound

Change to this -

JSP file: ...


    <tr:form>
        <h:panelGrid 
            columns="2" 
            border="2">

            <h:panelGrid 
                styleClass="panelGridA">    
            <tr:outputLabel 
                inlineStyle="font-size: 16px"
                value="#{msg.activityType}" 
                for="activityType"
                shortDesc="#{msg.titleFreqToolTipActivityType}"/>
            </h:panelGrid>          
<!--... more panel grids-->
        </h:panelGrid> 
    </tr:form>

CSS file:


.panelGrid.panelGridA {
    background-color: Yellow;
    bottom: 0px; left: 0px; right: 0px; top: 0px; 
    width: 150px;"
}

Result is not Yellow and the formatting ignored.

This type of code has worked with dataTable, so somewhat baffling.

Ideas?

Thanks, John

Answer №1

To remove the panelGrid in the CSS selector or change it to table.panelGridA, remember that h:panelGrid gets rendered as an HTML table.

Additionally, make sure to add the !important tag to override any other built-in CSS styles you may have).

.panelGridA {
    background-color: Yellow !important;
    bottom: 0px; left: 0px; right: 0px; top: 0px; 
    width: 150px;"
}

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

color settings on a search icon as a background

I'm struggling to make the background color of my search glyph fill the entire box. I want it to resemble this image. However, at the moment, it looks more like this. I can't figure out what's causing the issue. Below is the HTML code I&a ...

Avoid having the content below become pushed down by a collapsed navbar

I am utilizing Bootstrap 4.1 My current structure is as follows: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhkt ...

Tips for enhancing webpage load times by optimizing CSS and jQuery file handling

As a beginner in HTML and CSS, I am facing slow loading times when testing my pages on a local server. This makes me concerned about the potential loading time on the internet. Currently, I have all the files included in the <head> tag at the top of ...

Alterations to Firefox's placeholder color

Surprisingly, this code didn't work in Firefox (give it a try on Chrome and Firefox: http://jsfiddle.net/YzkSx/): <!doctype html> <html> <head> <title>Placeholder demo</title> <style type="text/css"> ...

Exploring the dimensions of checkboxes in Fluent UI Northstar

Is there a specific method for controlling the size of checkboxes in Fluent UI Northstar? My attempts to modify the font size and height have only impacted the label, not the checkbox itself. Unfortunately, I couldn't find any guidance on this in the ...

Troubleshooting: How the Mozilla scrollbar is affecting the positioning of my elements (with jsfiddle

I need assistance with my code on both Chrome and Mozilla browsers. The layout looks perfect in Chrome, but in Mozilla, the scrollbar is affecting the positioning of my list elements. Could someone please help me figure out how to make it consistent acros ...

Unlocking the potential of Bootstrap 4 pop ups and modals within an Angular 6 project

Angular.json "styles": [ "./node_modules/bootstrap/dist/css/bootstrap.min.css", "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css", "src/styles.css" ], ...

Tips for avoiding css reanimation when clicking on a calendar

Recently, I have been experimenting with animating an ASP calendar using CSS and JQuery. My approach involves hiding the calendar initially with CSS and then fading it in when certain events occur. The calendar is contained within an AJAX update panel. How ...

Issues with CSS file loading in Django

My program has a CSS file that I defined, but for some reason it's not working. When I checked with firebug, the status is 200 OK, but no changes are occurring. I'm unsure if there is a syntax issue with my CSS file. Can you please provide your i ...

Getting the value of a checkbox from a MySQL database

Is there a way to print the entire contents of a textarea without any scroll bars, so that all text entered is visible? Currently, only the last few lines are showing when printed. I need the textarea to automatically resize for printing. <textarea cla ...

Methods for animating .jpg images using CSS

I'm currently working on animating an image, specifically moving it from left to right and back. However, before I dive into implementing CSS animation keyframes, I noticed that I am having trouble getting the HTML element to follow the CSS styles I a ...

Positioning the logo in the center of the page, rather than in the center of a margin

I'm having trouble centering my logo in the middle of the page. When I use m-auto, it centers the logo between the other items, but not the page itself. I also attempted the right:... method, but it didn't work. Here is my code: .navbar-nav { ...

Feature for jotting down notes, creating a break between lines without any information present

I'm currently working on implementing a note-taking feature for my web application. However, I have encountered two issues: Firstly, I am struggling to identify line breaks within the text. While I can hardcode text with line breaks, when a user clic ...

Choosing images based on aspect ratio in CSS

I am looking to add a specific class to image elements, but only for those that are in landscape format. Is there a way to target images in my HTML with a width/height ratio greater than 1, similar to how media queries work with the "device-pixel-ratio" f ...

Resizing an image with six corners using the canvas technique

Currently, I am facing two issues: The topcenter, bottomcenter, left and right anchors are not clickable. I'm struggling with the logic to adjust the image size proportionally as described below: The corner anchors should resize both height and wi ...

eliminating the outline from bootstrap button results in an increase in the margin of the buttons

I'm facing a challenge that should be simple, but it's causing me some trouble. I have code that displays text on the left side and two buttons on the right side of the div. These buttons use Bootstrap icons, which by default appear within a bla ...

Unable to update `margin: 0;` on child divs

Can anyone help me remove the margins of the child divs so that the squares defined at #overview > div are aligned next to each other? #overview { display: inline-block; margin: 0em; padding: 0em; background: green; } #overview > div { ...

Bring in styles from the API within Angular

My goal is to retrieve styles from an API and dynamically render components based on those styles. import { Component } from '@angular/core'; import { StyleService } from "./style.service"; import { Style } from "./models/style"; @Component({ ...

Tips for aligning the navigation bar, main content, and footer in the center

Exploring the realm of web coding for the first time, I find myself in need of some guidance. My current project involves creating a webpage for the local sports team to replace their outdated one on Wordpress. Finding the platform not very user-friendly, ...

Tips for fading an image as you scroll using CSS and JavaScript?

I have been dedicating my day to mastering the art of website development. However, I am facing a challenge that is proving to be quite difficult. I am looking to create a smooth transition effect where an image gradually blurs while scrolling down, and re ...