I am trying to style PrimeNg's dropdown icon.
https://www.primefaces.org/primeng/#/dropdown
Here is how it currently looks and what I'm trying to get it to look like.
I'm guessing I have to style the
ui-dropdown-trigger
but I'm not sure what to set it to.
I tried background-color but that didn't work.
Another thing I tried was to just set it as an attribute like:
<p-dropdown ... [styleClass]="{background-color:black}" ...></p-dropdown>
Any ideas?
Edit:
This is how I got the desired output:
Turned off encapsulation (reference)
Added the following code to the css:
body .ui-dropdown .ui-dropdown-trigger {
background-color: #2399E5;
color: white;
}
To change the dropdownicon property itself, you need to do 2 things:
1)You will need to create a var in the component.ts in which you will put the string of the icon you want. But you will have to add 'fa fa-fw' at the begining of the string. For example, if you want to put a 'fa-star', the complete string will be 'fa fa-fw fa-star'
export class AppComponent {
star = 'fa fa-fw fa-star';
constructor(){}
}
2)In the component.html, you have to add [dropdownIcon]=var
<p-dropdown[dropdownIcon]="star" placeholder="Search (Jobs)"></p-dropdown>
And the result will look like
https://i.stack.imgur.com/WZDVx.png
You can set it as an attribute using:
<p-dropdown ... [style]="{'background-color': 'black'}" ...></p-dropdown>
or you can style the ui-dropdown-trigger but, you would have to do it in the global style sheet, not the component's.
To style ui-dropdown-trigger inside the component's css file you would have to use
:host >>> .ui-dropdown-trigger {...}
but, this has been deprecated.
I use included bootstrap theme from primeng. So I have to adapt:
body .ui-dropdown .ui-dropdown-trigger {
background-color: blue;
}
in the CSS to colorize the trigger in the theme.
Related
I'm using PrimeNG and Angular 14. I would like to apply a class (a red border) to my p-dropdown component if the form control contains errors and set another class if it doesn't contain errors. I tried this
<p-dropdown
styleClass="border-round-md"
[ngClass]="{
'border-red-500':
submitted && !this.form.get('myName')?.valid
}"
[options]="cycleFrPerMonth"
formControlName="myName"
></p-dropdown>
but this doesn't work. Even if there are errors, the error class doesn't display. I have even tried replacing the "submitted && !this.form.get('myName')?.valid" with the word "true" but still nothing doing.
You can try this solution:
When you use ngClass with p-dropdown your class will be apply on the component itself so you have to use styleClass as input in order to apply your class on the first div inside p-dropdown component
Add your class with /deep/ inside scss file of your component like that:
:host ::ng-deep .border-red-500{
border-color: #007bff !important;
}
3- Instead of using ngClass just use styleClass like this:
<p-dropdown
[styleClass]="submitted && !form.get('myName')?.valid
? 'border-red-500' : 'border-round-md' "
[options]="cycleFrPerMonth"
formControlName="myName"
></p-dropdown>
In your style file:
:host ::ng-deep .border-color {
// /*your style here */
}
:host ::ng-deep .border-round-md {
// /*your style here */
}
that should works fine.
first of all you should verify in angular.json if primeflex.css
style is added in
styles:[...,"node_modules/primeflex/primeflex.css"]
if not you should install it : npm install primeflex --save and import it in angular.json styles array
now you should add red color to your primeng palette in style.css file
:root {
--red-50: #fff5f5;
--red-100: #ffd1ce;
--red-200: #ffada7;
--red-300: #ff8980;
--red-400: #ff6459;
--red-500: #ff4032;
--red-600: #d9362b;
--red-700: #b32d23;
--red-800: #8c231c;
--red-900: #661a14;
}
last this is an example for your need : stackblitz
i am trying add background color and change the icon color on prev icon and next icon on vuetify slide group prop. if i target the class which i got from console it's not working. but if i remove scoped from my style tag or try to change the color on console style it's working.
.v-slide-group__next.theme--light.v-icon
{
color: rgb(234, 10, 10)!important;
}
I have tried this way but it's not working.how can i style those props icon? thanks in advance.
In order to target the elements with class it's necessary to use <style> without 'scopped', because 'scopped' automatically adds unique hashes in the class selector on each app build. And this prevents targeting Vuetify's elements using this way. I would suggest you to add some class on your wrapper container, let's say class="my-slider" and to target it like this:
<template>
<div>
<v-slide-group class="my-slider">
</div>
</template>
<style>
.my-slider > .v-slide-group__next.theme--light.v-icon
{
color: rgb(234, 10, 10)!important;
}
</style>
I have a ion-select with few options i gave a header using [selectOptions], is there a way to define a css so that i could able to set background-color to header, button alignment ,and add a icon to the header
<ion-select [selectOptions]="daysOptions" #selectDays="ngModel" required name="selectedDay" [(ngModel)]="selectDay" >
<ion-option *ngFor="let day of Days;" [value]="day.val">{{day.name}}</ion-option>
</ion-select>
could someone help me
You can fix this easily now
Add to ion-select element:
[interfaceOptions]="{cssClass: 'my-class'}"
Add to css:
.my-class .alert-wrapper {
max-width: 94% !important;
}
Yes, you can use cssClass in option like this:
// In your component
daysOptions = {
cssClass: 'my-class',
...,
}
Then in css you can do what you want eg:
.my-class .alert-wrapper {
max-width: 94% !important;
}
Thank's to ionic docs: https://ionicframework.com/docs/api/components/alert/AlertController/#advanced
I needed a color selector couple of months ago but I couldn’t find any.
The only way to do this was using custom CSS. I tried adding CSS classes to ion-select and ion-option but the classes doesn’t get reflected in the generated output. So the only way to apply the custom CSS to ion-select and ion-options is by using the parent element and some JS.
You can check the logic in:
HTML:
https://github.com/ketanyekale/ionic-color-and-image-selector/blob/master/src/pages/home/home.html
TS:
https://github.com/ketanyekale/ionic-color-and-image-selector/blob/master/src/pages/home/home.ts
SCSS:
https://github.com/ketanyekale/ionic-color-and-image-selector/blob/master/src/pages/home/home.scss
How to customize the Semantic UI buttons(background-color, border-radius and all)
<button class="ui button create-new-menu-btn">Create New Menu</button>
. create-new-menu-btn {
border-radius: 0;
background-color: red;
}
The above code is not working
You need to make your custom properties more specific than the ones semantic is using. How specificity works (simply) is that when there are competing property values on the same element, the one that is more "specific" is chosen.
Read this to know more about CSS specificity: https://developer.mozilla.org/en/docs/Web/CSS/Specificity
For your particular problem:
One way to make your custom CSS more specific is to use an id in the body tag of your page and use the following selector:
Method 1
#bodyid .create-new-menu-btn {
//Properties
}
Another way is to simply add an id to the element you want to select
Method 2
#create-new-menu-btn {
}
Method 1 is preferred when you want to apply the properties on multiple elements (hence the use of a class) (Like multiple comment buttons on a page)
Method 2 is preferred when there is a single element to be selected. (Like a login/signup button in the header)
You can also add semantic ui's classes before your own for specificity.
For example : if your className is .create-new-menu-btn you can add in css or scss before ui.button or any other semantic ui specific clas that you neeed. So in the end, your class definition in css would look like this:
ui.button.create-new-menu-btn {
....
}
If using JSX, you can use inline styling for the targeted elements
Example:
<Button style={{backgroundColor: 'red', borderRadius: 0}}> View Created </Button>
#bodyId .ui.create-new-menu-btn {
border-radius: 0;
background-color: red;
}
It will target all button with ui class.
Hope It will be useful :)
Put .ui.button infront of your class name create-new-btn. It should look like below
.ui.button.create-new-btn {
//Your css code
}
Then in your html/jsx template you can use the class name create-new-btn like below:
<Button class="create-new-btn"/>
or for Jsx
<Button className="create-new-btn"/>
I have a Submit Button like this:
<input type="submit" data-corners="false" id="code_check_button" tabindex="5" data-rel="external" value="GO">
which - with a custom css theme - outputs this: http://sht.tl/59y3m
Now I would like to use the id (#code_check_button) to style the button with more specificity.
Unfortunately jquerymobile automagically transforms the input type submit in a snippet of code I cannot control: http://sht.tl/cQq
As you can note, the original button ID is useless...
Can you tell me how may I custom style that button (of course, without wrapping it in an extra tag...)?
Thank you!
Numerous ways this can be achieved..
Here are a few examples:
submit {
styles:styles;
}
Not the most compatible in older browsers:
input[type="submit"] {
styles:styles;
}
Then you can target the ID:
#code_check_button {
styles:styles;
}
In your stylesheet add the ID #code_check_button and provide the desired style you want.. see example below :-
#code_check_button {
your desired style properties here...
}
EDIT:
You can use the class of the generated div and style the button accordingly. In this generated snippet you have two elements to style. please find below :-
.ui-btn {
style properties here...
}
.ui-btn .ui-btn-text {
style properties here...
}
CSS
#code_check_button {
color:#000 !important;
width:200px !important;
}
You can see I have added !important tag in all the css properties. This is because of overwritten the jQ mobile default styles.
If something keeps changing your intended css into useless code, this may be a situation where you would resort to simple text (eg. nano for mac or notepad for windows) Web design programs are double edged swords, most of the time the bells and whistles on these programs help make things easier, but sometimes they can make things more complicated. To custom style a button all you have to do is put your id or class selector name in the input tag and then enter the css for it. For example
CSS
#code_check_button { background-image: url(/*desired image url*/);
background-color: /*desired background color*/;
color: /*desired font color*/; }
HTML
<input id="code_check_button" type="submit" name="submit">
Just try it in notepad this time.