I created my Ionic app with the wizard on their page and chose the template "menu". If I look at my app in the desktop version, it is totally ok as you can see here: Desktop view OK
BUT IF I switch to the "mobile view" in my Browser (Firefox), the menu does not show up??
As you can see here: Mobile view no menu
This is my html code for the menu:
<ion-app>
<ion-split-pane contentId="main-content">
<ion-menu contentId="main-content" type="overlay">
<ion-content>
<ion-list id="inbox-list">
<ion-list-header>Netzwerkverwaltung</ion-list-header>
<ion-note></ion-note>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
<ion-item routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" routerLinkActive="selected">
<ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
<ion-label>{{ p.title }}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="main-content"></ion-router-outlet>
</ion-split-pane>
</ion-app>
You put your ion-menu inside of an ion-split-pane.
So the visibility depends on the width of the windows!
U can open your sidemenu from mobile using a swipe from the border of
the side of the menu.
Using menuController.toggle()
Or using ion-menu-button inside the ion-header!
The menu is hidden on smal screens!!
Docs:
IonMenuButton: https://ionicframework.com/docs/api/menu-button
MenuToggle: https://ionicframework.com/docs/api/menu-toggle
MenuController: https://ionicframework.com/docs/v4/api/menu-controller
Related
This is a side menu on the Ionic web app.
<ion-content>
<ion-list>
<ion-menu-toggle autoHide="false" *ngFor="let p of appPages; let i = index">
<ion-item (click)="selectedIndex = I"
[class.selected]="selectedIndex == i" tappable (click)="goToPage(p)">
<ion-icon slot="start" [name]="p.ionicIcon? p.ionicIcon: ''"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
Doc: https://ionicframework.com/docs/api/item#css-custom-properties
Here I need to give a Hover effect. But it is not working. Key thing here is you can see that I do not use routerLink here. So how can I do that?
I have tried this. But not working.
ion-item:hover {
--background-hover: gray !important;
}
If you read through the docs, you'll see your "tappable" attribute is no long valid.
All you need to do is set button="true" on the ion-item.
<ion-item button="true">
My Item
</ion-item>
https://codepen.io/mhartington/pen/KKVemNx?editors=1000
Also worth noting...
You do not need to use the :hover selector on the element. It should just be
ion-item {
--background-hover: gray;
}
[Print screen] [1]: https://i.stack.imgur.com/VWLBX.png
and this is the home.page.html
<ion-header >
<ion-toolbar >
<ion-title>HOME</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<div [innerHTML] id="days"></div>
</ion-content>
Ionic 4 has a bunch of changes and the onClick is no longer valid. You should use <ion-button (click)="myCallback()">
I have added a ionic select button in the page. The option will show a long string, I hope to it can show full text string, but the string is truncated with dot-dot-dot as below:
My code is like:
<ion-item *ngIf="select == 'trip'">
<ion-label> Select Trip </ion-label>
<ion-select text-wrap>
<ion-option *ngFor="let subtrip of trips" value = {{subtrip.tripid}}> {{subtrip.startTime}} - {{subtrip.stopTime}} </ion-option>
</ion-select>
</ion-item>
I have tried add text-wrap in the html, but it doesn't work... Can you help?
For Ionic 4, every option inside ion-select needs to be wrapped inside ion-select-option. Trying out interface="action-sheet" will show the full text of options. The default interface is alert.
<ion-item>
<ion-label>Food</ion-label>
<ion-select interface="action-sheet" [(ngModel)]="food">
<ion-select-option [value]="Burger">BurgerBurgerBurgerBurgerBurgerBurgerBurger</ion-select-option>
<ion-select-option [value]="Sandwich">SandwichSandwichSandwichSandwichSandwichSandwich</ion-select-option>
<ion-select-option [value]="Salad">SaladSaladSaladSaladSaladSaladSalad</ion-select-option>
</ion-select>
</ion-item>
Default alert interface
action-sheet interface
So if this is your template (html):
<ion-content>
<ion-item>
<ion-label>Toppings</ion-label>
<ion-select [(ngModel)]="toppings" multiple="true">
<ion-option>BaconBaconBaconBaconBaconBaconBaconBaconBacon</ion-option>
<ion-option>Black OlivesBaconBaconBaconBaconBaconBaconBacon</ion-option>
<ion-option>Extra CheeseBaconBaconBaconBaconBaconBaconBacon</ion-option>
</ion-select>
</ion-item>
</ion-content>
And you want to ensure no-wrap behavior you can not apply text-wrap to ionic components and hope it will support this behavior out of box unfortunately.
Normally you want to go to your Chrome Dev Tools > Elements and see what CSS rules are inherited and applied to your component (ion-select in this case):
Now depending on which platform style you are using (ios or md) you need to apply changes to this class (in case of ios used like in my case):
page-tutorials {
.no-scroll .scroll-content {
overflow: hidden;
}
}
.alert-ios .alert-md .alert-checkbox-label {
white-space: normal !important;
}
Please note you need to add such class overriding outside of your page component's css (as above) to make it work.
<ion-list radio-group [(ngModel)]="radioGroup">
<ion-item>
<ion-label text-wrap>RadioButtonText</ion-label>
<ion-radio checked="false" value="value"></ion-radio>
</ion-item>
This should work fine for you
I'm trying to implement load more functionality in the half portion of the page.
So I put that code inside the ion-scroll but somehow current implementation is not working i.g. the method is
(ionInfinite)="doInfinite($event)"
is not triggered and loader UI is not rendered. However, the same implementation is working if the content placed in ion-content instead of ion-scroll.
<ion-content padding>
<ion-scroll scrollY="true" id="accountList" class="list-box">
<ion-list >
<ion-item *ngFor="let item of [1,2,3,4,5,6,7,8,9]">
<ion-icon ios="ios-add-circle" md="ios-add-circle" item-start color="secondary"></ion-icon>
Item1
<ion-buttons item-end>
<button ion-button clear icon-only color="orange">
<ion-icon ios="md-create" md="md-create" item-end ></ion-icon>
</button>
<button ion-button clear icon-only color="danger">
<ion-icon ios="md-close" md="md-close" item-end></ion-icon>
</button>
</ion-buttons>
</ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-scroll>
</ion-content>
Sorry for my bad english, but I resolved this problem by using below code:
<ion-scroll #scrollWeb scrollY="true" class="scroll-y">
<ion-grid>
<ion-row>
<ion-col col-4 col-sm-6 col-md-4 col-lg-4 col-xl-4 *ngFor="let item of items">
<item-card [item]="item"></item-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-scroll>
And on my component:
#ViewChild('scrollWeb') scrollWeb: Scroll;
Added listener on DOM Element to discover if the scroll arrived in the end as follows:
ngAfterViewInit() {
if (this.scrollWeb) {
this.scrollWeb.addScrollEventListener((ev) => {
if ((ev.target.offsetHeight + ev.target.scrollTop) >= ev.target.scrollHeight) {
this.doInfinite(null);
}
});
}
}
In doInfinite function you can omit or show a loader as follows:
if (infiniteScroll !== null) {
infiniteScroll.complete();
}
Ionic-version: 3.9.2
I have a similar problem in the component. My solution was:
Replace <ion-scroll> with <ion-content>
Add overflow: auto; style for <ion-content>
Enjoy virtual scrolling
You need call the $event.complete() method. From the Ionic documentation page of InifniteScroll:
"The expression assigned to the infinite event is called when the user
scrolls to the specified distance. When this expression has finished
its tasks, it should call the complete() method on the infinite scroll
instance."
ion-Scroll doesn't fire scroll events right now, thus ion-infinite-scroll subscription to scroll events is not fired.
You can try to find some workarounds like firing similar event yourself. I just desided to emulate visual similarity in regular ion-content using css for now (not perfect solution).
Link to issue on Ionic Github: https://github.com/ionic-team/ionic/issues/13904
Link to issue on forum: https://forum.ionicframework.com/t/ionscroll-event-doesnt-fire-on-ion-scroll/96188/3
I'm developing an mobile application using ionic. In this I'm trying to implement the delete feature like this :
As we see there is icon on left-side of the every list item, when clicked on that icon, list transitions to left-side and delete button gets displayed on the screen.
I want to implement the same feature..But not able to write the right CSS. Please guide me how should I make this work.
Here is the link to my plunkr
You can use ionic list directive.
<ion-list ng-controller="MyCtrl"
show-delete="shouldShowDelete"
show-reorder="shouldShowReorder"
can-swipe="listCanSwipe">
<ion-item ng-repeat="item in items"
class="item-thumbnail-left">
<img ng-src="{{item.img}}">
<h2>{{item.title}}</h2>
<p>{{item.description}}</p>
<ion-option-button class="button-positive"
ng-click="share(item)">
Share
</ion-option-button>
<ion-option-button class="button-info"
ng-click="edit(item)">
Edit
</ion-option-button>
<ion-delete-button class="ion-minus-circled"
ng-click="items.splice($index, 1)">
</ion-delete-button>
<ion-reorder-button class="ion-navicon"
on-reorder="reorderItem(item, $fromIndex, $toIndex)">
</ion-reorder-button>
</ion-item>
</ion-list>
Controller:
app.controller('MyCtrl', function($scope) {
$scope.shouldShowDelete = false;
$scope.shouldShowReorder = false;
$scope.listCanSwipe = true
});