Can not see Ion fab in modal on iOS Ionic 4 - ios

I have created a component and added an ion fab inside it. When I open the component as a modal the ion fab is not shown. When I click once in the place it is supposed to be it shows but when I close the modal and open it again I can not see it.
I thought it was because I had a custom css class but even without it I still can not see the ion fab until i click on the place it is supposed to be.
The problem is only on iOS, on Android it works as expected.
Here is my code:
Opening modal function:
async addCollection(item) {
item.isAdded = !item.isAdded;
let modal = await this.modalCtrl.create(
{
component: AddCollectionComponent,
cssClass: 'add-collection-custom-modal-css',
backdropDismiss: true
}
);
await modal.present();
let data = await modal.onDidDismiss();
}
css class:
.add-collection-custom-modal-css .modal-wrapper {
height: 70vh;
bottom: 0;
position: absolute;
display: block;
width: 100%;
border-radius: 12px;
}
AddCollection component
<ion-content>
<ion-row>
<ion-searchbar placeholder="Search collections"></ion-searchbar>
</ion-row>
<ion-row style="margin: 15px;">
<ion-col class="add-collection-header">
RECENT
</ion-col>
<ion-col>
</ion-col>
</ion-row>
<ion-list *ngIf="mockRecentData" class="gray-bottom-line" lines="none" style="padding-bottom: 20px;">
<ion-item *ngFor="let recent of mockRecentData">
<ion-avatar item-start class="avatar-small">
<img src="assets/noavatar.png">
</ion-avatar>
<h2 class="avatar-text">{{recent}}</h2>
</ion-item>
</ion-list>
<ion-row style="margin: 15px;">
<ion-col class="add-collection-header">
YOUR BOARDS
</ion-col>
<ion-col>
</ion-col>
</ion-row>
<ion-list *ngIf="mockYourBoards" lines="none">
<ion-item *ngFor="let recent of mockYourBoards">
<ion-avatar item-start class="avatar-small">
<img src="assets/noavatar.png">
</ion-avatar>
<h2 class="avatar-text">{{recent}}</h2>
</ion-item>
</ion-list>
</ion-content>
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button (click)="save()" size="small" color="white">
<fa-icon style="color: violet" [icon]="['fas', 'plus']"></fa-icon>
</ion-fab-button>
</ion-fab>

There are two things to consider here -
1.
As per Ionic's documentation, the Modal is a dialog that appears on top of the app's content. This means Modals will always appear at the topmost stack of your app. This is why, if you have a Tabbed app and open a Modal, all tabs will be hidden underneath the Modal page.
2.
As with Fab button, here Ionic says, "FABs generally float over the content in a fixed position. This is not achieved exclusively by using an FAB. They need to be wrapped with a component in order to be fixed over the content."
Therefore, you may try by NOT WRAPPING your <ion-fab-button> with ion-fab. You may place the <ion-fab-button> at a fixed place on the modal through Modal Component's SCSS file.

As a workaround, invoke hardware acceleration on fixed fabs inside modals by setting
ion-fab {
transform: translateZ(0);
}
reference: CSS performance relative to translateZ(0)

Related

Angular material tab with "search input" as last tab

How do we create a "search input" or "add button" as the last tab of an Angular Material tabs component?
I did not see indication from documentation that this can be done. Can someone confirm if this is possible? Workarounds would be appreciated too.
The screenshot shows an example of what I would like: the "search input" as the last tab item:
The screenshot was taken from a random (i.e. any) YouTube channel.
Thanks!
While I do not think that having a input box inside the mat-tab is possible without editing the component, you can have an input box for the search after the mat-tab-group, and bring it into the same row as the mat-tab-group, e.g. by using flex in your CSS.
Example:
HTML:
<div class="container">
<mat-tab-group class="tabs">
<mat-tab label="Tab 1">Content 1</mat-tab>
<mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>
<mat-form-field class="input">
<input matInput placeholder="Search" >
</mat-form-field>
</div>
CSS:
.container {
display: flex;
}
.input {
margin-top: 0.5%;
}
will produce this:
example image
Example on Stackblitz
May need some tinkering for display on mobile devices.

Ionic Keyboard issue while tap on SearchBar its scroll to top and invisible to user

I am working on Ionic 3.X version and On my Home Page I have one search bar.
Issue : While click on SearchBar its opening Keyboard from bottom and my searchBar and whole screen goes UP side and user unable to view or scroll after click on searchBar
issue in OS : iOS
Same code works in Android
Screen Shots:
HTML Code for Search Bar :
<ion-content padding class="home-content-background-color">
<div *ngIf="headerTextShowFlag">
<div text-center>
<img [src]="appLogo" width="100" height="100">
</div>
<ion-label style="text-align: center" class="text-color">Welcome</ion-label>
<hr class="hr-style">
<ion-label text-wrap padding style="text-align: center" class="text-color">
Please Enter Service Request Number</ion-label>
</div>
<div>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<ion-list style="height: 58%; overflow-y: scroll; margin: 0px">
<ion-item *ngFor="let Case of CaseArrayFiltered" (click)="selectCaseFromList(Case)">
{{ Case }}
</ion-item>
</ion-list>
</div>
</ion-content>
Unable to show search bar on top its always moving out of screen at first load while click on search bar at first time.
Disable scroll solve my problem but after adding below line my keyboard show/hide not working properly.
this.keyboard.disableScroll(true);
After lots of R&D on above issue I found solution with some code patch in my .ts file
Need to disable keyboard scroll so that my screen will not go up automatically while keyboard will show.
platform.ready().then(() => {
this.keyboard.disableScroll(true);
});
Also need to update my flag in this.zone()
this.zone.run(() => {
self.toggleHeader = false;
});
Above line of code will execute on main thread and will update flag & UI so based on this my issue was resolved and hope this will helps others who also facing same issue specially in iOS platform.
Thanks.

How to add icon to mat-icon-button

I am using Angular with Material
<button mat-icon-button><mat-icon svgIcon="thumb-up"></mat-icon>Start Recording</button>
I am trying to add an icon to button, but I can't figure out how to do it, and can't find documentation for this.
https://material.angular.io/components/button/api
looking the docs, there is this:
that button has the following html:
<a _ngcontent-c1="" aria-label="Angular Material" class="docs-button mat-button" mat-button="" routerlink="/" tabindex="0" aria-disabled="false" href="/"><span class="mat-button-wrapper">
<img _ngcontent-c1="" alt="angular" class="docs-angular-logo" src="../../../assets/img/homepage/angular-white-transparent.svg">
<span _ngcontent-c1="">Material</span>
</span> <div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay">
</div>
</a>
is that the right way to do it?
Just add the <mat-icon> inside mat-button or mat-raised-button. See the example below. Note that I am using material icon instead of your svg for demo purpose:
<button mat-button>
<mat-icon>mic</mat-icon>
Start Recording
</button>
OR
<button mat-raised-button color="accent">
<mat-icon>mic</mat-icon>
Start Recording
</button>
Here is a link to stackblitz demo.
All you need to do is add the mat-icon-button directive to the button element in your template. Within the button element specify your desired icon with a mat-icon component.
You'll need to import MatButtonModule and MatIconModule in your app module file.
From the Angular Material buttons example page, hit the view code button and you'll see several examples which use the material icons font, eg.
<button mat-icon-button>
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
In your case, use
<mat-icon>thumb_up</mat-icon>
As per the getting started guide at https://material.angular.io/guide/getting-started, you'll need to load the material icon font in your index.html.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Or import it in your global styles.scss.
#import url("https://fonts.googleapis.com/icon?family=Material+Icons");
As it mentions, any icon font can be used with the mat-icon component.
My preference is to utilize the inline attribute. This will cause the icon to correctly scale with the size of the button.
<button mat-button>
<mat-icon inline=true>local_movies</mat-icon>
Movies
</button>
<!-- Link button -->
<a mat-flat-button color="accent" routerLink="/create"><mat-icon inline=true>add</mat-icon> Create</a>
I add this to my styles.css to:
solve the vertical alignment problem of the icon inside the button
material icon fonts are always a little too small compared to button text
button.mat-button .mat-icon,
a.mat-button .mat-icon,
a.mat-raised-button .mat-icon,
a.mat-flat-button .mat-icon,
a.mat-stroked-button .mat-icon {
vertical-align: top;
font-size: 1.25em;
}
Add to app.module.ts
import {MatIconModule} from '#angular/material/icon';
& link in your global index.html.
the above CSS can be written in SASS as follows (and it actually includes all button types, instead of just button.mat-button)
button,
a {
&.mat-button,
&.mat-raised-button,
&.mat-flat-button,
&.mat-stroked-button {
.mat-icon {
vertical-align: top;
font-size: 1.25em;
}
}
}
The Material icons use the Material icon font, and the font needs to be included with the page.
Here's the CDN from Google Web Fonts:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Jquery Mobile CSS problems

I am trying to get an anchor in jquery to line up horizontally right next to a checkbox in a list structure. I previously had the checkbox inside of the anchor object, and this produced the result I wanted but now I want the checkbox to have a separate functionality then the anchor element, thus I wish to separate them. The CSS I am using is as follows, and as you can see from Jsfidle, it looks horrible with the checkbox floating to the top right spot of the button. Answers on here have noted that using field contain or display:inline would fix the problem but I have been unable to get it to work.
<div data-role="main" class="ui-content">
<h3>Some header</h3>
<ul data-role="listview" id = "tasklistTasks">
<li>
<div data-role="fieldcontain" style=" display:inline" >
<input type="checkbox">
Go here
</div>
</li>
<li>
<div data-role="fieldcontain" style=" display:inline" >
<input type="checkbox">
Go here
</div>
</li>
</ul>
</div>
I am using Jquery 2.1 and Jquery mobile 1.4.2. Thanks for any help
The reason for this behavior is that the checkbox is getting the CSS from the jquery mobile CSS you have applied. Inside that particular CSS, your checkbox class' CSS is getting overridden and it has :
margin: -11px 0 0 0;
due to which it is coming to the top left corner of your parent div.
If you are not using CDN of that CSS and you have that downloaded version, you can modify this with :
.ui-checkbox input, .ui-radio input {
position: absolute;
left: .466em;
width: 22px;
height: 22px;
margin: 12px 0 0 0;
outline: 0!important;
z-index: 1;
display: inline-block;
}
You can also see yourself by debugging it in your browser.
Here is how it looks now and i guess this is what you wanted:
http://jsfiddle.net/appleBud/bWFYv/2/
Hope this helps.

mmenu fixed header opens good, but closes without animation

I'm working with JQuery Mobile and mmenu.js JQuery plugin. And I'm trying to set my header fixed. I've tried in two different ways:
1) With the JQuery Mobile option:
<div data-role="header" data-theme="a" data-position="fixed">
2) With CSS:
<div data-role="header" data-theme="a" style="position: fixed; width: 100%;">
In both cases, I can open my menu correctly, with the header animation. But when I close it, close without the animation, the header just appear.
Thanks for the help!

Resources