I am using the ngx-perfect-scrollbar package in application everywhere where scrolling is used. Recently, I switched to the Angular virtual scroll for optimization reasons, but the default scrollbar is very distracting. Is there a way to use the perfect scrollbar instead of the default one?
Previous code:
<perfect-scrollbar *ngIf="!loading" #scrollbar [config]="horizontalScrollConfig">
<div style="display: flex;">
<component *ngFor="let item of items"></component>
</div>
</perfect-scrollbar>
Updated code:
<div class="cdk-virtual-scroll-data-source">
<cdk-virtual-scroll-viewport itemSize="53" orientation="horizontal" class="viewport hidden-scrollbar">
<component *cdkVirtualFor="let item of items"></component>
</cdk-virtual-scroll-viewport>
</div>
I have tried applying the [perfectScrollbar] directive to the div wrapper, I have also tried wrapping the div inside the perfect-scrollbar, but nothing helped.
Is it possible to use the perfect-scrollbar with virtual scrolling?
Related
I am trying to display a list of items in an Angular web app. I am having a list component which contains the related *ngFor directive to display each list-item component. Inside the HTML of the list-item component I defined the following structure:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="item">
<div class="content font-weight-bold" style="width: 250px; height: 180px" *ngStyle="{'opacity':
(object.booleanValue) ? 1.0 : 0.5}">
<div class="someActualContent">
<div>{{object.text}}</div>
....
</div>
</div>
</div>
Displaying of the objects works fine (all information are correctly shown) until I add the *ngStyle-directive. Then, no element is visible anymore. However, in inspect mode I can see that all list-items are actually there - they are invisible and smaller than I defined them in the div at style="...". Compiling is successful.
I tried object.booleanValue==true but this didin't lead to any changes.
Does someone have an explanation?
Thank you in advance!
Enclose the ngStyle directive in square brackets instead of micro-syntax notation *ngStyle. Try the following
<div
class="content font-weight-bold"
style="width: 250px; height: 180px"
[ngStyle]="{'opacity': (object.booleanValue) ? 1.0 : 0.5}"
>
...
</div>
So I have this 'output' element which fills up with messages, the overflow is set on scroll so after a certain amount of messages this element becomes scrollable. It doesn't auto scroll to the bottom though, so I tried doing this using the DOM, document.getElementById('output'), this didn't work and after some reading I learned this should be avoided in angular.
So I want to target this #output element in my output-window component with my typescript and access some scrollTo() method to scroll it to the bottom, how should I do this?
output-window.component.html:
<div id="output">
<p *ngFor="let message of messages">
{{ message }}
</p>
</div>
Project structure
home.component
+-->output-window.component
+-->div#output
Targeting this div#output is what's giving me trouble.
retrieve p tags with view children
#ViewChildren("p") ps: QueryList<any>
ngAfterViewInit() {
this.ps.last.nativeElement.scrollIntoView();
}
then access to native element and then scroll to it.
or better approach is write a directive for p element and set it for last element
Edit : It seems you need to name your p element like below
<div id="output">
<p *ngFor="let message of messages" #p>
{{ message }}
</p>
</div>
in order to make ViewChildren work properly.
I have created a stack blitz for you. Please check here
I have seen this answer but it answers for jquery and not angular/typescript.
My question is similar to this question, but my question is seeking a solution for angular.
How can I remove wrapper (parent element) without removing the child in Angular using typescript or scss? (If it is possible by both kindly show both methods).
For example how to programatically manupulate the dom below from
<div class="wrapper">
<span>This is It!</span>
</div>
<div class="button">Remove wrapper</div>
to: (After clicking on the button I would like to have the dom iook like below)
<span>This is It!</span>
<div class="button">Remove wrapper</div>
EDIT:
Kindly also show how to set it so that it can add the wrapper div back when I click the button again. Basically toggling the wrapper div.
I think you can simulate using ng-template and two divs, some like
<div *ngIf="toogle" class="wrapper">
<ng-content *ngTemplateOutlet="template"></ng-content>
</div>
<ng-content *ngTemplateOutlet="!toogle?template:null"></ng-content>
<ng-template #template>
<hello name="{{ name }}"></hello>
</ng-template>
<button (click)="toogle=!toogle">toogle</button>
See a example in stackblitz
I have the following div and it shows a login button on a nav bar, but if the screen is small I want to hide this button. For some reason when I add the fxHide.gt-sm=true it doesn't hide when I make the screen smaller. How can I fix this?
<div fxHide.gt-sm="true">
<ng-template #login>
<button
mat-icon-button
[routerLink]="['/auth']"
[style.width]="'auto'"
[style.overflow]="'visible'"
matTooltip="Login or Register"
class="topbar-button-right">
<span>Login</span>
<mat-icon>exit_to_app</mat-icon>
</button>
</ng-template>
</div>
What you want:
Default behavior: shown
If lt-md (less than medium screen) => hide
With your current implementation you have:
Default behavior: shown
If gt-sm (greater than small screen) => hide
Now, what you want translates into:
<div fxShow fxHide.lt-md>
You could invert the logic into
<div fxHide fxShow.gt-sm>
That should do it.
fxHide.gt-sm means hide it when it's greater than small. Change it to fxShow.gt-sm if you only want it visible on larger screen.
Faced the same thing but after importing FlexLayoutModule it worked.
If the OP is having issues making the fxHide command work at all, this question may be a duplicate of Angular Material FlexLayout fxHide does not hide
You must ensure that FlexLayout is imported in all modules that wish to use it:
https://stackoverflow.com/a/62672981/4440629
I am new to dojo / dojo mobile.
I am building a screen with a header and a list of items beneath. Very
classical in mobile apps.
<body id="content" style="display: none">
<div data-dojo-type="dojox.mobile.ScrollableView" id="mainView"
data-dojo-props="selected:true,scrollDir:'v'">
<h1 data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Main',fixed:'top'"></h1>
<div data-dojo-type="dojox.mobile.EdgeToEdgeList" style="margin-top: 0px;">
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Take Picture...',
icon:'images/plus-30.png',
url:'TakePicture.html',
transition:'slide'">
</div>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/PhoneGapDemo.js"></script>
<script src="js/messages.js"></script>
Problem : the first item on the list is hidden behind the header and not
visible.
(Same rendering in IBM Rich Page Editor, IBM Mobile App Simulator, Apple iOS
Simulator and iPhone iOS6)
I juste started the project, I don't have fancy CSS or other ... just
started from scratch, added the ScrollableView, the Header, the
EdgeToEdgeList and then the ListItems.
Workaround is to apply a style on the EdgeToEdgeList to move it 40px down.
But it is not clean and breaks cross-platform compatibility (what if the
header is not always 40px height ?)
I am using DoJo 1.8
Thanks
Seb
Hi even im new to this worklight, well im not sure but got to the properties (go to the design and right click on the edge-to-edge list and select properties) you can see the tag, style , Layout, All options.
go to styles and click the properties and change the postion / lay out. it might help.
please let me know if you get that right.
Solution is twofold
use style="visibility:hidden" in element, as following
<body id="content" style="visibility:hidden">
load "mobileDeviceTheme" explicitly with a element instead of letting Dojo load it asynchronously (this module needs to be loaded early to allow for proper height calculation)
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
before (the load of dojo/dojo.js)
Seb