My app runs PrimeNG 1.1.2 and Angular 2.4.1. In my template I use a PrimeNG tab view with corresponding tab panels and respective headers. For a certain reason I want to style the appearance of the tab panel header.
For instance, say I want to set its font color to green:
<p-tabPanel header="Bezier Curve" [selected]="true"
[headerStyle]="{'color': 'green'}">
However, this style does not apply and the font color doesn't change
Any pointers what I am missing?
Edit:
font-color replaced by color
Try to override ui-tabview-title class and set required css in style.css
.ui-tabview-title{
color:green !important;
}
There's no CSS property with name font-color, you are looking for color:
<p-tabPanel header="Bezier Curve" [selected]="true" [headerStyle]="{'color': 'green'}">
W3Schools clearly states:
Property color - Sets the color of text
Edit:
Problem is the following - after template rendering, header text is located between a tags which means you have to create CSS class that will change text color surrounded by a tags inside your header:
.greenText a {
color: green;
}
And then use headerStyleClass attribute instead of headerStyle to apply CSS class:
<p-tabPanel header="Bezier Curve" [selected]="true" headerStyleClass="greenText">
I had the same problem, neither [headerStyle] nor [headerStyleClass] worked for me.
I switched to change the background-color, what -- for whatever reasons -- works.
<p-tabView>
<p-tabPanel [headerStyle]="db.isValid? { 'background-color':'#f58985' }: {}"
[header]="db.name!"
leftIcon="fa fa-tasks" *ngFor="let db of datasheets">...
Maybe that helps others too.
ps: i used PrimeNG 9.1.4 and Angular: 9.1.3
We can use the custom header as well.
<p-tabPanel [selected]="true">
<ng-template pTemplate="header">
<span style="color:green">Bezier Curve</span>
</ng-template>
</p-tabPanel>
Related
I'm trying to style mat-select's differently per component. I have 1 main select in my (always visible) header, and multiple in different components within my SPA. I'm trying to style the header mat-select differently because it has a dark background, the rest should be unstyled, and not affected by the header styling.
I've tried using ngClass & ngStyle, but they don't add the required classes to childs, just to the main class. I've tried using ::ng-deep and /deep/ but they alter the styling of components in other parts of the application. So technically they work, but with the wrong result.
https://stackblitz.com/edit/angular-kzwatd
I'm hoping to just alter the text color to white, since the background of the mat-select is dark.
Anyone have any clue why the stackblitz is not working?
Try using :
<mat-select class="main" placeholder="Main"> ....
/deep/ .main .mat-select-value{
color: red;
}
https://stackblitz.com/edit/angular-rucggb?file=src/app/main-component.css
In CKEditor 4, items shown in the "Styles" combo box are displayed with their styles, demonstrating how the text will be styled if the item is selected.
This is not the case for the "Format" combo box items for block-level formatting. Is there a way to fix this? For example by "cheating" and manually adding a CSS class to each item that mimics how the paragraph style will look?
You can add this in config.js
config.fontSize_style={
element: 'font',
attributes: { 'class': 'fs-#(size)' }
};
which will add class="fs-selectedFontSize"
for eg class="fs-18".
Then you have to add style for such classes in contents.css or link your CSS file. For similar techniques go to the official website of CKEditor Guide
https://ckeditor.com/docs/ckeditor4/latest/guide/index.html
recently I was working on an app using Vuetify and had trouble to change the Vuetify default colors. So I finally ended with this:
https://github.com/vuetifyjs/vuetify/issues/299
Which as its says, I added the following code:
<style lang="stylus">
#require '../node_modules/vuetify/src/stylus/settings/_colors.styl'
$theme := {
primary: #009688
accent: #FFC107
secondary: #00796B
info: #B2DFDB
warning: $red.base
error: $red.base
success: $green.base
}
#require '../node_modules/vuetify/src/stylus/main.styl'
</style>
In App.vue
So when I tested changing colors in the app, it worked as expected, so far so good. Then I noticed that it changed the size of the icons, as pictured below:
Before
After
So, my question is:
Is there a way to solve this problem by not using CSS? If so, how? Or if there's no way, then, how should I solve it using CSS?
You can give icon size in px using size property in Vuetify icons.
<v-icon size="25">home</v-icon>
Or
you can use x-small, small, medium, large and x-large in v-icon tag
e.g.
<v-icon small>home</v-icon>
Unfortunately in the current version (0.17.6) you will need css to create a custom icon size.
If you wanted to set a custom default size of your icons across your app you will need to target it will css.
To target icons size you can use the following:
.icon {
font-size: 20px;
}
If you are using Vuetify v1.0.0-alpha.1 or later, <v-icon>
component has a size attribute which you can use to set an exact
size.
here is the sample inline css from v-icon
<v-icon style="font-size: 5px;">home</v-icon>
here is my sample pen
https://codepen.io/anon/pen/LdpgmY
I recommend just using an <i> tag and setting the icon classes yourself if you can. <v-icon> doesn't provide much advantage anyways and the v-icon class is the one that's setting a specific font-size when all you really want is font-size: inherit.
I'm not sure that the change of colors is giving you the issue with the change of icons size, but if you don't want to set the icon size each time, you can optionally pass in custom variables to overwrite the global defaults like this:
$icon-size: 20px;
You can find more information about this in the Vuetify Documentation
I can't set the background color (or border color) of an input text, if it is a dojo datepicker.
My dojo datepicker is an input text with the two additional attribute:
dojoType="dropdowndatepicker"
displayFormat="yyyy-MM-dd"
I assume dojo has its own style, so even if I provide a style that specifies the background color, dojo overrides it.
something like this does not work:
<input type="text" ..other attributes.. style="width:5em;border:solid #FF0000;">
Any help is appriciated.
And may I just add that my dojo version is old as dirt ( will be upgraded) but currently I can't take advantage of the newer features like dijit, etc.
Dojo uses templates for most of their widgets. The HTML code you write (with dojoType attributes and stuff) is nothing more than a placeholder to configure your widget. Inline CSS applied to this HTML will be applied to the top level of your widget.
Your widget usually consists out of multiple HTML elements and so it may happend that the CSS you write inline, will not be applied to the correct element. Also, Dojo indeed uses themes (wich you usually define as a class="themename" on a parent tag (usually <body>) and most default themes of Dojo are using !important CSS lines for various features.
The best way is to inspect what HTML elements are created when you use a widget and to define a style on that specific element. But because the CSS attributes of the Dojo themes are using !important, it's recommended to be more specific than what they define. The easiest way is to add a custom classname to the <body> tag, for example:
<body class="claro custom">
</body>
Then define your style like:
.custom .dijitTextBox > .dijitInputField {
background-color: yellow;
}
.custom .dijitTextBox > .dijitArrowButton {
background: red;
}
I also made an example JSFiddle.
Have a look at this thread - i think this could help you out:
Changing default style of DOJO widget
Regards
add !important to the end of your rules:
<input type="text" ..other attributes.. style="width:5em !important;border:solid #FF0000 !important;">
This should apply stuff to the input. Please check if the element isn't replaced when dojo starts using it and if you are applying the style to the correct element.
In richfaces for inplace input component <rich:inplaceInput defaultLabel="click to edit"> there is a defaultLabel attribute(show default text if is no ouput) i want set color text for it, i trying to set with style="" but dont know how to do it.
e.g for value="" i can set it via style="margin-left:80;background-color:#fff...etc but for this defaultlabel i cant set it, may i use styleClass and there i defined color text for default Text?
if is somebody who is familiar with css for advanced styling or knows use it in jsf,please let me post i'll be very grateful.
Cheers
Use styleClass for sure.
And in your CSS file define
.yourClass .rf-ii-dflt-lbl {
color: red;
}
.rf-ii-dflt-lbl is the RichFaces-generated class for the default label.
In case the above is not working add !important to the rule:
color: red !important;