I'm using ionic to build a web app.
My template is:
<ion-header>
<ion-toolbar class="large-title-fix">
<ion-title>MyLinkedin</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-segment [(ngModel)]="type">
<ion-segment-button value="Applicant" >
<ion-label>Applicant</ion-label>
</ion-segment-button>
<ion-segment-button value="Offeror">
<ion-label>Offeror</ion-label>
</ion-segment-button>
<ion-segment-button value="Company">
<ion-label>Company</ion-label>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content>
<app-sign-up-applicant *ngIf="type==='Applicant'"></app-sign-up-applicant>
<app-sign-up-offeror *ngIf="type==='Offeror'"></app-sign-up-offeror>
<app-sign-up-company *ngIf="type==='Company'"></app-sign-up-company>
</ion-content>
but this make the ion content not entirely scrollable
Here's a gif to display what happen
It seems like it can scroll, but it doesn't show the entire content of the page
Edit: the problem, in some way, is the toolbar, in fact if I remove the toolbar, It works.
I can't understand why.
Related
I've made a custom toolbar component:
<ion-toolbar>
<ion-title color="black" size="small"><strong>Account Information</strong></ion-title>
<ion-buttons slot="start">
<ion-back-button (click)="return()" color="green" defaultHref="/"></ion-back-button>
</ion-buttons>
<ion-content></ion-content>
</ion-toolbar>
If I reuse this toolbar in different places in my app, can i customize the content of it somehow?
for example, how can I add a save button to it in a page where i use the
toolbar component?:
<ion-header class="ion-no-border">
<app-toolbar>
<ion-buttons slot="primary">
<ion-button (click)="save()" color="green">
Save
</ion-button>
</ion-buttons>
</app-toolbar>
</ion-header>
<ion-content>
<ion-grid>
...
In this example the save button doesn't show up
How does one display an ion-searchbar and an ion-segment inline in the same ion-toolbar? I'm using Ionic 3.
(in case you're curious, this is landscape-mode-only thing because in landscape mode vertical space is at a premium).
I'm (mostly) able to get this to work with ion-col, as seen below. Everything looks good in Chrome via Ionic Serve. But when running on a real device, the ion-segment gets pushed down and doesn't look right.
Example code below:
<ion-toolbar color="primary">
<ion-row>
<ion-col no-padding>
<ion-segment [(ngModel)]="joined" (ionChange)="switchView($event)" color="light">
<ion-segment-button [value]="true">
{{'PROJECT_JOINED_BUTTON' | translate}}
</ion-segment-button>
<ion-segment-button [value]="false">
{{'PROJECT_LIST_BUTTON' | translate}}
</ion-segment-button>
</ion-segment>
</ion-col>
<ion-col no-padding>
<ion-searchbar [(ngModel)]="query" (ionInput)="load()" color="light" debounce="500" showCancelButton="true" placeholder="Search projects"></ion-searchbar>
</ion-col>
</ion-row>
</ion-toolbar>
How it looks in Chrome via Ionic Serve when spoofing iPhone mode
How it looks on a real iOS device:
What works:
I am able to get buttons to align to the end using ion-buttons end. However, when I wrap the ion-segment inside an ion-buttons, the segment doesn't appear at all. When I try applying the end attribute to the ion-segment, the segment overlays the search bar.
<ion-toolbar color="primary">
<ion-searchbar [(ngModel)]="query" (ionInput)="load()" color="light" debounce="500" showCancelButton="true" placeholder="Search projects"></ion-searchbar>
<ion-buttons end>
<button ion-button clear>
Test Button
</button>
</ion-buttons>
</ion-toolbar>
Is there a way to reliably display an ion-segment inline with other content inside an ion-toolbar? Thanks!
Try using align-items-center and col-6 like:
<ion-toolbar color="primary">
<ion-grid>
<ion-row align-items-center>
<ion-col no-padding col-6>
<ion-segment [(ngModel)]="joined" (ionChange)="switchView($event)" color="light">
<ion-segment-button [value]="true">
{{'PROJECT_JOINED_BUTTON' | translate}}
</ion-segment-button>
<ion-segment-button [value]="false">
{{'PROJECT_LIST_BUTTON' | translate}}
</ion-segment-button>
</ion-segment>
</ion-col>
<ion-col no-padding col-6>
<ion-searchbar [(ngModel)]="query" (ionInput)="load()" color="light" debounce="500" showCancelButton="true" placeholder="Search projects"></ion-searchbar>
</ion-col>
</ion-row>
</ion-grid>
</ion-toolbar>
documentation: https://ionicframework.com/docs/api/components/grid/Grid/
I'm having a big issue with aligning an icon to the left. No matter what I do, it aligns to the right side of the screen. Other pages do not have problem and aligns perfectly to the left. This issue happens when I use a tab.
How do I fix this? There's no CSS code as I'm using the default codes.
This is my ionic code:
<ion-header>
<ion-toolbar>
<ion-buttons start>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-segment end [(ngModel)]="stories">
<ion-segment-button value="headlines">
Headlines
</ion-segment-button>
<ion-segment-button value="new">
New
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
No matter what I do, this is the end result:
PS: I'm using the latest version of ionic.
Just like #Sam5487 said, you should use an ion-navbar instead of the ion-toolbar (if you're using the toolbar in order to avoid the back arrow icon when pushing the page, you should set that page as root instead of just pushing it to the nav stack).
About end/start/left/right
I've also seen that you've used the start attribute in the ion-buttons, but it doesn't mean it will be placed to the left, since start and end follow the UI pattern for the platform
So <ion-buttons start> would be on the left for ios and be the first button on the right for android.
And <ion-buttons end> would be on the right for ios and the last button on the right for android.
So with both start or end the button will be placed at the right on Android.
If you want to place a button at the left or the right in both platforms, you should use left or right, since these attributes are provide as a way to over ride that.
Using the menuToggle button
That being said, if you take a look at the menuToggle docs:
If placing the menuToggle in a navbar or toolbar, it should be placed
as a child of the <ion-navbar> or <ion-toolbar>, and not in the
<ion-buttons>.
So in order to achieve the desired result, you just need to change your layout for this one:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-segment [(ngModel)]="stories">
<ion-segment-button value="headlines">
Headlines
</ion-segment-button>
<ion-segment-button value="new">
New
</ion-segment-button>
</ion-segment>
</ion-navbar>
</ion-header>
You can also confirm that this is the recommended way to do it, by taking a look at this page from the Conference App demo made by the guys at Ionic
Try this instead
<ion-header>
<ion-navbar>
//*** Rest of the header code ***//
</ion-navbar>
</ion-header>
Also in your button that is only an icon i suggest adding icon-only as well.
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
I have a page with an <ion-segment> that I use as a Tab to switch between showing two different custom components:
<ion-header>
<ion-navbar>
<ion-title>Page</ion-title>
</ion-navbar>
<ion-toolbar>
<ion-segment [(ngModel)]="tab">
<ion-segment-button value="section1">
Section 1
</ion-segment-button>
<ion-segment-button value="section2">
Section 2
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<section1 *ngIf="tab === 'section1'"></section1>
<section2 *ngIf="tab === 'section2'"></section2>
The section components just have an <ion-content> with stuff in it.
The problem is that if I do it this way, the content of the pages will be overlapped by the header. I've tried different ways to avoid this without success.
One way is to put the <ion-content> into the page like this:
<ion-content>
<section1 *ngIf="tab === 'section1'"></section1>
<section2 *ngIf="tab === 'section2'"></section2>
</ion-content>
But this gives rise to a new problem. If the page contains an <ion-refresher> it will give this error: Template parse errors: No provider for Content. Moving the refresher into the page as well isn't an option.
How to solve this overlapping issue while still keeping the <ion-content> in the custom components?
I am building an Ionic 2 application with side-menu and want to customize my side menu as can be seen in the following image (not exact same, however the important part is how to get that first block with such a picture and some text), with custom color for the entire toolbar etc?:
My application looks like following:
My app.html:
<ion-menu [content]="content">
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
<ion-icon name="{{p.name}}"></ion-icon>
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
You can do it just adding some standard HTML code, and with CSS you can customize the style. Create the CSS Class rules in the .scss file. Rember to import
#import "build/app.html"; in the app.core.scss file. You'll find other information to personalize your app there
And for display the first block part you can add your code before the ion-list of the menu and after the tag <ion-content>.
You can delete this part, so it's more easy to create your custom layout.
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
The code will be:
<ion-menu [content]="content">
<ion-content>
<!--Here you can add all the code
you want, so you can display whatever you want-->
<!--Menu list-->
<ion-list class="menuList">
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)" class="menuButton">
<ion-icon name="{{p.name}}"></ion-icon>
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
If you need some more help, don't hesitate to ask.