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
Related
<section class="mesh_section type-mesh_section status-publish hentry">
How do I hide the above? I've tried the with the post ID at the front
.postid-11319 .mesh_section { display: none}
I've even put the display none code under Inspect element under this and it works fine.
element.style {
}
There's a whole section I need hidden.
Image here of full code:
There is some issue with you example. First .postid-11319 doesn't select something with the id="postid-11319" but class="postid-11319". To select by id you should use the # operator like:
#postid-11319 .mesh_section { display: none; }
For you interest, the inspector propose you to update the styles of an element by using element.style {} but that's only working in the scope of the inspector to easily design something with CSS.
Are you open to using JQuery?
Your JQuery Function would look a little like this
$( ".mesh_section" ).hide();
I've founding using display: none can cause issues like the element appearing and disappearing
Alternatively you can add display: none inline
<section style="display:none" class="mesh_section type-mesh_section status-publish hentry"> </section>
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}}"
In my Angular application, I have an instance of the ng-select widget:
If you click on it, by default you can search for items and add more of them to the current selection:
I would like to change this default behaviour, in particular:
it shouldn not be possible to add new elements
clicking on it should not open the search bar or the items list
it should not show the arrow down icon (displayed by default on the right)
it should not show the X icon to remove all selection at once (displayed by default on the right)
So this is how I would like it to be:
In order to achieve this, we first need to create 3 css classes.
One to disable the arrow-down icon:
.ng-select.disable-arrow .ng-arrow-wrapper .ng-arrow {
display: none;
}
One to disable the search/list dropdown:
.ng-select.disable-dropdown ng-dropdown-panel {
display: none;
}
One to disable the clear-all X icon:
.ng-select.disable-clear-all .ng-clear-wrapper {
display: none;
}
Then we add the ng-select element using the 3 css classes that we created, plus a few options:
<ng-select
class="disable-arrow disable-dropdown disable-clear-all"
[searchable]="false"
[clearable]="true"
[multiple]="true"
>
</ng-select>
To disable the clear-all X icon add [clearable]="false" attribute to your ng-select tab ex.:
<ng-select class="disable-clear-all" [clearable]="false" [searchable]="false">
</ng-select>
To hide the clear and arrow icons:
.ng-clear-wrapper {display: none;}
.ng-arrow-wrapper {display: none;}
Below is only what u need if u need it programmatically.
<ng-select
[items]="people3"
bindLabel="name"
[disabled]="true"
[multiple]="true"
[(ngModel)]="selectedPeople3">
</ng-select>
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 "print this page" button that works fine:
<a style="top:-40;left: 375;position:absolute;z-index:5000;">
<script>
document.write("<input type='button' " +
"onClick='window.print()' " +
"class='printbutton' " +
"value='Print This Page'/>");
</script>
</a>
It is exactly where I want it and it doesn't show on the print.
I have several navigation buttons that jump to other pages:
<button style="position:absolute;top:1050px;left:-105px;z-index:5000;">
Home</button>
These work fine, but they do print.
How can i make them not-print like the print button? I have tried several variations on modifying the print button script, but have not found the right combination yet.
Suggestions certainly appreciated. Please be very specific because I am very early into this.
You could do like suggested here.
Put this in your CSS file or add it to your style headers like you did with the "a" elements.
inside of a CSS document would look like this:
#media print
{
.no-print, .no-print *
{
display: none !important;
}
}
Using inline-styles within your current document would look like this:
<style>
#media print
{
.no-print, .no-print *
{
display: none !important;
}
}
</style>
then wrap your buttons in the no-print class.
<div-class="no-print">
<button style="position:absolute;top:1050px;left:-105px;z-index:5000;">
Home</button>
</div>