I've the following accordion group:
<p-accordion multiple=true>
<p-accordionTab *ngFor="let tab of tabs" styleClass="{{tab.myClass}}" header="{{tab.header}}"
[selected]="false">
{{tab.description}}
</p-accordionTab>
</p-accordion>
It's usually populated dinamically by tabs size. The goal is to have different background and other styles, depending of tab content. So I have that myClass style variable which could change at each accordion tab creation. E.g. assuming to use myClass = 'myClass':
:host ::ng-deep .myClass.p-accordion {
.p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
background: red;
}
}
Anyway I was not able to create a css rule to achieve this goal.
Can anyone assist?
Many thanks in advance
Solution was using a wrapper div of each accordion tab:
<p-accordion multiple=true>
<div *ngFor="let tab of tabs" class="{{tab.customClass}}">
<p-accordionTab header="{{tab.header}}"
[selected]="false">
{{tab.description}}
</p-accordionTab>
</div>
</p-accordion>
where :
.customClass * {
background: red !important;
//other properties
}
In order to create a different style for each tab you need to make it dependent on the tab. Right now you set the same style for each. One approach would be to create a pipe which provides the class name.
<p-accordionTab *ngFor="let tab of tabs" styleClass="{{tab | getTabClass}}" header="{{tab.header}}"
Related
I am using p-tabview and generating content dynamically. Something like below code:
<p-tabView>
<p-tabPanel [header]="item.header" *ngFor="let item of items; let i = index" [selected]="i == 0">
{{item.content}}
</p-tabPanel>
</p-tabView>
Now when printing I want to show all tabs one by one. Applied below css:
.p-tabview .p-tabview-nav {
position: relative;
display: block !important;
}
I can see tabs heading list but only one tab content is showing at once. I tried to manipulate css aria-selected="true" but it did not work for me. Is there a css to show all tabs at once in print preview? TIA
I just want to remove arrow icons from accordion panel headers using PrimeNG. Does anyone know how to accomplish this?
Code:
<p-accordion>
<p-accordionTab header="Godfather I">
Content 1
</p-accordionTab>
<p-accordionTab header="Godfather II">
Content 2
</p-accordionTab>
<p-accordionTab header="Godfather III">
Content 3
</p-accordionTab>
Here's an image:
Give your p-accordion a styleClass="someStyleClass" then go to your root styles and add these:
.someStyleClass.ui-accordion .ui-accordion-header span.fa {
display: none;
}
or if you use SCSS
.someStyleClass.ui-accordion {
.ui-accordion-header {
span.fa {
display: none;
}
}
}
EDIT: This is the simplest solution that I personally can think of that is not messing with the source code.
There's a property in PrimeNG, that allows us to manipulate the icons for accordion.
expandIcon and collapseIcon: to be used on <p-accordion> tag.
We may use something like <p-accordion expandIcon = "" collapseIcon= ""> and this should work like a charm.
Similarly, this could be used when we want to change the icons, as per our needs, say "+" or "-".
<p-accordion expandIcon = "pi pi-plus" collapseIcon = "pi pi-minus">
More info on https://www.primefaces.org/primeng/showcase/#/accordion
Peace
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 basic tab collection. Its going to function as buttons, no actual content:
<md-tabs md-align-tabs="bottom">
<md-tab>Canvas 1</md-tab>
<md-tab>Canvas 2</md-tab>
<md-tab>Canvas 3</md-tab>
<md-tab>Canvas 4</md-tab>
</md-tabs>
I'm trying to use the tab collection at the bottom of the page. Any idea about how to move the ink bar to the top of the tab collection instead of the bottom?
md-align-tabs does not change the location of the ink bar in my testing. I was unable to identify a solution with pure CSS.
You are looking to override the md-pagination-wrapper css value. I would not recommend doing it globally because I don't know what else it effects honestly but if you change it to
md-pagination-wrapper {
height: 2px;
...
}
You will get the effect you are looking for. Here is a codepen for example - http://codepen.io/anon/pen/vKdkzj . I would put a custom override class or id on it though so you don't break anything globally.
An example of what the custom override would look something like this -
Put a custom id or class on your tabs :
<md-tabs md-align-tabs="bottom" id="ink-top-fix">
Use to target md-pagination-wrapper from custom id (or class, whatever you choose to use)
#ink-top-fix md-pagination-wrapper {
height: 2px;
}
override .mat-ink-bar class
.mat-ink-bar{
top:0px !important;
}