I want to show datatable rows with different colors.
I am using rowStyleClass attribute.
But It is not changing the colors
My code in datatable is,
rowStyleClass="highlight";
and my css file is looks like this,
.highlight {
background: yellow !important ;
}
You should have like two classes with different colors and use, in the rowStyleClass attribute, inline if:
rowStyleClass="#{(rowIndex mod 2) eq 0 ? 'highlight1' : 'highlight2'}"
Where "rowIndex" you should set in the datatable rowIndexVar attribute
rowIndexVar="rowIndex"
That means that even rows will have row style class set as 'highlight1' and odd rows - 'highlight2'
See here more info
The easiest way is to implement .ui-datatable-odd and .ui-datatable-even style classes in your CSS, which are implemented by p:dataTable by default. Example:
.ui-datatable-odd {
background: #ffffff;
}
.ui-datatable-even {
background: #F2F5F9;
}
Ends up looking something like
It could be you need to use more specific selectors, read about css specificity for that
Try this...It is working in my case
.ui-widget-content .ui-datatable-even{
background: #F2F5F9;
}
.ui-widget-content .ui-datatable-odd{
background: red;
}
Tudor's answer is the correct way. In case you use treeTable you can do it this way:
.ui-treetable tbody tr:nth-child(odd) {
background-color: #edf2f6 !important;
}
.ui-treetable tbody tr:nth-child(even) {
background-color: #ffffff !important;
}
Related
I am trying to do some dynamic color changes based on a value in HTML. I want it to do this but in HTML using angular plugins.
if(ClassyAverage >50 class = red)
else if(ClassyAverage >40 class = orange)
else(class = green)
I have some CSS values that I can get the color from as well
.red{
color: #f00;
}
.green {
color: #0f0;
}
.orange{
color: orange;
}
use [ngClass]="{'red':ClassyAverage>50,'orange':ClassyAverage>40}"
and use your default class as green.
[ngClass] is very useful when you want to add css classes depending on the variables in the component.
I am trying to modify the primeng p-calendar, but it is not working properly.
For example:
I want it to be like this:required changes
But original it looks like this:original image
What i have tried so far:
HTML
<div class="nxui-form-group">
<label for="planEndDate">
<img src="assets/images/calendar.svg" class="nxui-icon-small nxui-icon-align-bottom">
{{ 'i18n.all-damage-reports.label.plan-end-date' | translate }}
</label>
<p-calendar formControlName="planEndDate"
class="calendar-control"
id= "planEndDate"
[title]="'i18n.all-damage-reports.label.plan-end-date' | translate"
[dateFormat]="'i18n.common.dateformat.shortdate-p-calendar' | translate"
[locale]="'i18n.common.dateformat.calendar' | translate"
></p-calendar>
</div>
CSS
p-calendar.calendar-control {
opacity: 1;
color: black;
background: #eeeeee;
}
looking forward to inputs.
Thanks
I think that you should use the special selectors of angular to change a component style like :host or ::ng-need, you can check that in the official documentation:
https://angular.io/guide/component-styles
::ng-deep body .ui-datepicker .ui-datepicker-header .ui-datepicker-title {
margin: 0;
padding: 0;
line-height: 1;
color: goldenrod;
}
::ng-deep .ui-datepicker .ui-datepicker-group {
background-color: cadetblue;
}
Hope that'll help you !
In my case, I want to style the calendar icon, html is below
<div class="main-container">
<p-calendar showTime="true" hourFormat="12" [showIcon]="true"></p-calendar>
</div>
Then I added style below but it is not working:
.main-container ::ng-deep .ui-datepicker-trigger.ui-button {
// add style here
}
Then I added p-calendar after ::ng-deep it worked
.main-container ::ng-deep p-calendar .ui-datepicker-trigger.ui-button {
// add style here
}
Did you try to change the styling classes?
See https://www.primefaces.org/primeng/#/calendar (section styling)
Like for example
.ui-calendar .ui-inputtext {
// place text styling here
}
Select element class via using Inspect then add ::ng-deep selector to force style on child components
::ng-deep .ui-inputtext {
/* Example */
opacity: 1 !important;
}
The code you see in the templates is not what actually is in browser's DOM. There are some other elements injected, like <input> for text input.
Try something like
p-calendar.calendar-control input {
border: 1px solid black;
background: #eeeeee;
}
And anyway, look at the actual elements in your browser with Inspect Element and write CSS according to the real situation.
I found out that html and body quote got basically a background:none.
How can i change that to apply a new background in one of my quote ?
For example, if you want a grey background for your body, put the following code :
body {
background-color: #CCCCCC !important;
}
The !important lets you override a property that has been defined in another CSS. In the case of Foundation, the background has probably been set before.
Hope that it will help you.
You have two background tags in both style sheets of Foundation 4:
Try to edit:
css/foudation.css
body {
background: white;
...
}
css/normalize.css
html{
background: #fff;
...
}
If using foundation with SASS add this to ./scss/app.scss :
body, html {
background-color: $white !important;
}
where $white - variable defined in ./scss/_settings.scss
I have a p:treeTable and the tree contents are all in one column. The tree is a shared component so some of my pages require column header and and some don't. In the pages where the columnHeader is empty, it creates the an empty row for the column header, which I don't want. I do want the column contents, just not the header when there is no column header.
How can I fix this? Any pointers/ideas would be great. Thanks!
You can solved that with custom CSS by setting the thead display attribute to none:
Example:
div[id="testForm:first"] thead {
display:none;
}
if your JSF is similar to this:
<h:form id="testForm">
<p:dataTable id="first">
...
<p:/dataTable>
</h:form>
If your <p:dataTable> uses columns widths like this
<p:dataTable styleClass="myTable">
<p:column width="100">
and you use the following CSS to hide the column headers
.myTable thead {
display:none;
}
you will also lose the column widths you set
Solution to hide column header and keep column widths
.myTable thead th {
border: none !important;
background: none !important;
}
A more formal solution:
TAG:
<p:treeTable styleClass="tree-table-no-header">
Style:
.tree-table-no-header thead {
display: none;
}
You may find you need to be more specific with your style selector:
div[id$="myTableId"]>div>table>thead { display:none; }
This also eliminates the need to reference your form id. The '$' is a starts with wild card and the '>' says select only direct children. See http://www.w3schools.com/cssref/css_selectors.asp for a really good CSS Selector reference.
Hide header (same as other answers):
.hide-table-header thead {
display: none;
}
... and specify column width:
<p:dataTable styleClass="hide-table-header">
<p:column style="width: 80px">
These won't work with reflow="true" tables.
For me the border:none, background:none suggestion leaves an empty space above the table and hides the left side border of the table as well.
Add this code to your css3 file
** Remove the header from the dataTable**/
.ui-datatable.borderless thead {
display: none;
}
/** Remove the border from the dataTable **/
.ui-datatable.borderless tbody,
.ui-datatable.borderless tbody tr,
.ui-datatable.borderless tbody td {
border-style: none;
}
Then call this code from the xhtml file like this :
<p:dataTable styleClass="borderless">
Are there any useful techniques for reducing the repetition of constants in a CSS file?
(For example, a bunch of different selectors which should all apply the same colour, or the same font size)?
Recently, variables have been added to the official CSS specs.
Variables allow you to so something like this :
body, html {
margin: 0;
height: 100%;
}
.theme-default {
--page-background-color: #cec;
--page-color: #333;
--button-border-width: 1px;
--button-border-color: #333;
--button-background-color: #f55;
--button-color: #fff;
--gutter-width: 1em;
float: left;
height: 100%;
width: 100%;
background-color: var(--page-background-color);
color: var(--page-color);
}
button {
background-color: var(--button-background-color);
color: var(--button-color);
border-color: var(--button-border-color);
border-width: var(--button-border-width);
}
.pad-box {
padding: var(--gutter-width);
}
<div class="theme-default">
<div class="pad-box">
<p>
This is a test
</p>
<button>
Themed button
</button>
</div>
</div>
Unfortunately, browser support is still very poor. According to CanIUse, the only browsers that support this feature today (march 9th, 2016), are Firefox 43+, Chrome 49+, Safari 9.1+ and iOS Safari 9.3+ :
Alternatives :
Until CSS variables are widely supported, you could consider using a CSS pre-processor language like Less or Sass.
CSS pre-processors wouldn't just allow you to use variables, but pretty much allow you to do anything you can do with a programming language.
For example, in Sass, you could create a function like this :
#function exponent($base, $exponent) {
$value: $base;
#if $exponent > 1 {
#for $i from 2 through $exponent {
$value: $value * $base;
}
}
#if $exponent < 1 {
#for $i from 0 through -$exponent {
$value: $value / $base;
}
}
#return $value;
}
Elements can belong to more than one class, so you can do something like this:
.DefaultBackColor
{
background-color: #123456;
}
.SomeOtherStyle
{
//other stuff here
}
.DefaultForeColor
{
color:#654321;
}
And then in the content portion somewhere:
<div class="DefaultBackColor SomeOtherStyle DefaultForeColor">Your content</div>
The weaknesses here are that it gets pretty wordy in the body and you're unlikely to be able to get it down to listing a color only once. But you might be able to do it only two or three times and you can group those colors together, perhaps in their own sheet. Now when you want to change the color scheme they're all together and the change is pretty simple.
But, yeah, my biggest complain with CSS is the inability to define your own constants.
You should comma seperate each id or class for example:
h1,h2 {
color: #fff;
}
You can use global variables to avoid duplicacy.
p{
background-color: #ccc;
}
h1{
background-color: #ccc;
}
Here, you can initialize a global variable in :root pseudo class selector. :root is top level of the DOM.
:root{
--main--color: #ccc;
}
p{
background-color: var(--main-color);
}
h1{
background-color: var(--main-color);
}
NOTE: This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes. More Info here
However, you can always use the Syntactically Awesome Style Sheets i.e.
In case Sass, you have to use $variable_name at the top to initialize the global variable.
$base : #ccc;
p{
background-color: $base;
}
h1{
background-color: $base;
}
You can use dynamic css frameworks like less.
Personally, I just use comma-separed selector, but there some solution for writing css programmatically. Maybe this is a little overkill for you simpler needs, but take a look at CleverCSS (Python)
Try Global variables to avoid duplicate coding
h1 {
color: red;
}
p {
font-weight: bold;
}
Or you can create different classes
.deflt-color {
color: green;
}
.dflt-nrml-font {
font-size: 12px;
}
.dflt-header-font {
font-size: 18px;
}
As far as I know, without programmatically generating the CSS file, there's no way to, say, define your favorite shade of blue (#E0EAF1) in one and only one spot.
You could pretty easily write a computer program to generate the file. Execute a simple find-and-replace operation and then save as a .css file.
Go from this source.css…
h1,h2 {
color: %%YOURFAVORITECOLOR%%;
}
div.something {
border-color: %%YOURFAVORITECOLOR%%;
}
to this target.css…
h1,h2 {
color: #E0EAF1;
}
div.something {
border-color: #E0EAF1;
}
with code like this… (VB.NET)
Dim CssText As String = System.IO.File.ReadAllText("C:\source.css")
CssText = CssText.Replace("%%YOURFAVORITECOLOR%%", "#E0EAF1")
System.IO.File.WriteAllText("C:\target.css", CssText)
You can use multiple inheritance in your html elements (e.g. <div class="one two">) but I'm not aware of a way of having constants in the CSS files themselves.
This link (the first found when googling your question) seems to have a fairly indepth look at the issue:
http://icant.co.uk/articles/cssconstants/
CSS Variables, if it ever becomes implemented in all major browsers, may one day resolve this issue.
Until then, you'll either have to copy and paste, or use a preprocessor of whatever sort, like others have suggested (typically using server-sider scripting).
:root {
--primary-color: red;
}
p {
color: var(--primary-color);
}
<p> some red text </p>
You can change color by JS
var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--primary-color')).trim();
document.documentElement.style.setProperty('--primary-color', 'blue');