It seems impossible to create a global footer in an Ionic app.
Within a single page, you can use <ion-footer> and in turn, the <ion-content> component resizes itself using its resize() function, accounting for contained headers and footers, and global <ion-tab> allowing for tabs.
Having a <ion-footer> in app.html will not resize the content accordingly, causing for the footer to overlay the content.
Before I submit a pull request to the Ionic Framework's Content.resize method, does anyone know of a way to achieve a global footer?
If you know the height of the footer, you can style the .ion-page height to calc(100% - #{$global-footer-height}).
Example where global footer can be toggled on/off:
app.component.ts
#HostBinding('class.has-global-footer') public globalFooterEnabled: boolean = true;
constructor(platform: Platform, statusBar: StatusBar) {
// You can toggle the footer from a Service or something.
setTimeout(() => this.globalFooterEnabled = false, 5000);
// myService.somethingHappened$
.subscribe((toggle) => this.globalFooterEnabled = toggle);
}
app.html at the end:
<ion-footer class="global-footer" *ngIf="globalFooterEnabled">
Hello World!
</ion-footer>
app.scss
$global-footer-height: 50px;
.has-global-footer .ion-page {
height: calc(100% - #{$global-footer-height});
}
.global-footer {
height: $global-footer-height;
}
Related
I have following code:
<button pButton type="text" label="Show Overlay" (click)="op.toggle($event)"><\/button>
<p-overlayPanel #op>
<p-accordion multiple="true">
<p-accordionTab header="Header 1">Content 1<\/p-accordionTab>
<p-accordionTab header="Header 2">Content 2<\/p-accordionTab>
<\/p-accordion>
<\/p-overlayPanel>
After page load, When I click first time on button overlay open as expected, but the problem is when click second time accordion gets expanded (content visible but shows collapse icons).
Angular version - 7.x.x
Primeng version- 7.x.x
I faced same the issue. Its some bug in Angular / PrimeNG. This workaround from https://github.com/primefaces/primeng/issues/9453 worked for me:
:host ::ng-deep {
.p-accordion-tab:not(.p-accordion-tab-active) {
.p-toggleable-content {
height: 0;
overflow: hidden;
}
}
.p-accordion-tab.p-accordion-tab-active {
.p-toggleable-content {
height: auto !important;
overflow: auto !important;
}
}
}
In component hosting accordion just:
styleUrls: ['./some-name.component.scss']
In Blueprint.js MultiSelect example at https://blueprintjs.com/docs/#select/multi-select , after clicking on search box, exactly 10 items are shown. We can scroll down to view the rest.
How can I enable scrolling, and/or specify the maximum number of items displayed?
In the MultiSelect tag, add popoverProps props, then fill in popoverClassName with the custom css value:
.custom-class {
max-height: 150px;
overflow-y: auto;
}
<MultiSelect
popoverProps={{
popoverClassName: "custom-class",
}}
/>
When I click the keyboard and it opens op, the keyboard first finishes the animation. Then the view is resized. This causes for lag when the view scrolls to the field.
I have tried fixing it this way:
this.keyboard.onKeyboardWillShow().then(() => {
this.content.scrollToBottom();
});
But because the view is not yet resized, it does not scroll. How can I fix this? The app doesn't feel native at all without this.
The solution I found for this is as follows.
I created a wrapper within my <ion-content>:
<ion-content>
<div id="wrapper"></div>
</ion-content>
And styled it this way:
#wrapper{
height: 100%;
margin-bottom: 200px; /* it is best to get the keyboard height here from `onKeyboardWillShow()` */
}
Then in ts I did this:
this.keyboard.setResizeMode(KeyboardResizeMode.None);
this.keyboard.onKeyboardWillShow().subscribe(() => {
this.content.scrollToBottom();
});
this.keyboard.onKeyboardWillHide().subscribe(() => {
this.content.scrollToTop(500);
});
Works just like I want it. But I am still open to better answers.
I have an observable -- loading$ -- that outputs true when I want to show a loading overlay in the UI, and false when it's time to remove that overlay. The visibility is controlled with a CSS class.
When the Observable emits true, I want to add the CSS class to the <body>, and remove it on false.
html
<body class="">
<my-app>Angular app goes here</my-app>
</body>
As you can see, the <body> is outside of my Angular 2 app, so I cannot use property binding to change the class. This is what I currently do:
AppComponent.ts
loading$.subscribe(loading =>{
if(loading) document.querySelector('body').classList.add('loading');
else document.querySelector('body').classList.remove('loading');
});
This works well. The loading class is added/removed when the loading$ observable emits true/false. The problem is that I'd like to run my app in a web worker which means no access to the DOM. Plus, Angular recommends against manipulating the DOM directly.
How can I use Angular APIs to change <body>?
Angular 2, typescript 2, rxjs 5 beta 12
PS: This question looks promising, but the key link is dead. I've also seen a couple of suggestions that worked with Beta releases but are now obsolete (example)
If you want an uninterrupted animation by DOM replacement in the middle of bootstrapping the app then use the following approach.
Put the overlay after my-app element.
<my-app></my-app>
<div id="overlay"></div>
Add #HostBinding to class.ready in main component app.component.ts:
#HostBinding('class.ready') ready: boolean = false;
Change the property when the data is loaded with the initial call (splash is still visible when your screen is not fully rendered).
constructor(private contextService: ContextService) {
someService.initCall().then(r => this.ready = true);
}
Use CSS to hide the loader:
my-app.ready + .overlay {
animation: hideOverlay 1s forwards;
}
#keyframes hideOverlay {
0% {
opacity: 1;
}
100% {
opacity: 0;
visibility: hidden;
}
}
#ktretyak 's solution got things to work for me. Basically, instead of using <body> I put the div that takes the loading class within <my-app>
index.html
<body>
<my-app>
<div id="overlay" class="loading"></div>
</my-app>
</body>
CSS
#overlay {
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
display:none;
}
#overlay.loading {
display:block
}
Thanks to the CSS styles, and the fact that loading is enabled to start, the overlay is shown while the Javascript loads and Angular bootstraps.
Once Angular is loaded though, everything within <my-app> will be replaced with AppComponent template. As I explained in the comments beneath the OP, I need ongoing access to this loading overlay, because I show it during the loading of new routes (as users navigate from one routed component to another). So I had to include the same overlay div in the template
app.component.html
<div id="overlay" [class.loading]="showLoading"></div>
<router-outlet></router-outlet>
Now, when my loading$ observable fires, I change a class property showLoading and Angular takes care of updating the overlay since it is now part of AppComponent
app.component.ts
// set to true to show loading overlay. False to hide
showLoading:boolean = true;
ngOnInit(){
// show/hide overlay depending on value emitted
loading$.subscribe(loading => this.showLoading = loading);
}
Try to do like this:
<my-app>
<div class="your-class-for-loading"></div>
</my-app>
When my-app is ready, div will be automatically removed.
I am trying to implement the app that have 4 pages in 4 table. It supposed to be support swipe gesture, and each page contains dynamic data and make the pages have different height.
I tried to use responsive-slider-div-span.source example and integrate the 4 table into the slides.
I would like to set the width and height for the slides dynamically while the document ready, However, The slide will not show if the width and height is not pre set in the the slide div.
May I know any suggestion?
Typically, the size of jssor slider is defined in html code, and you can alter the size grammatically.
Given a slider at size 600x300, you can use javascript to change size before initialization of jssor slider.
<script>
jQuery(document).ready(function ($) {
var options = {};
//retrieve height of the slider, assuming the height should be 200px;
$("#slider1_container").height("200px");
$("#slider1_slides").height("200px");
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
//According to your comment, please add following code
//Handle $EVT_PARK event BEGIN
function OnSliderPark(slideIndex, fromIndex) {
if (slideIndex == 0 || slideIndex == jssor_slider1.$SlidesCount() - 1) {
//do something scroll page to top
}
}
jssor_slider1.$On($JssorSlider$.$EVT_PARK, OnSliderPark);
//Handle $EVT_PARK event END
});
</script>
<div id="slider1_container" style="... width: 600px; height: 300px; ...">
<div u="slides" id="slider1_slides" style="... width: 600px; height: 300px; ...">
...
</div>
</div>