For some reason Ionic think that my page has content and is adding in a scrollbar. Here is my page:
And the code for the page:
<ion-header>
<ion-navbar>
<ion-title>Week</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="createPage()">
<ion-icon name="add"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
I found this thread here which tells you how to remove the scroll bar, which I can do but I want to track down what is causing it to appear in the first place.
Any ideas are appreciated. Thanks.
Related
I have an ion-card in an ion-footer. It has an ion-textarea in it, as it will be used for a chat window. I am trying to place an icon beside the ion-card (an arrow) so a user can submit a message.
Whether I put the icon inside the ion-card, inside the ion-card-content, inside or outside the ion-footer, it just doesnt have the right positioning. If I put it inside the footer, it doesn't even show. If I put it outside the footer, it obviously rests on top or on the bottom of the footer.
<IonFooter style={{backgroundColor: 'white'}}>
<IonCard style={{width: '75%'}}>
<IonCardContent>
<IonTextarea
placeholder="Enter message here..."
value={text}
ionChange={e => setText(e.detail.value)}
/>
</IonCardContent>
</IonCard>
<IonIcon icon={arrowForwardSharp} size={"large"} color={"black"} />
</IonFooter>
Inside the footer (its below but you can't see it for some reason, even if i use a black icon)
Outside the footer (strangely places in a black box)
You can try by adding a grid inside you ionCard and adapt the number of col
If you want the icon separated from the textarea
<ion-footer>
<ion-card>
<ion-card-content>
<ion-grid>
<ion-row>
<ion-col><ion-textarea placeholder="Enter message here..."></ion-textarea></ion-col>
<ion-col>
<ion-item><ion-icon name="arrow-forward"></ion-icon></ion-item></ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
</ion-footer>
If you want the icon "inside" :
<ion-item>
<!-- <ion-label position="floating">Write Here</ion-label> -->
<ion-textarea></ion-textarea>
<ion-icon name="send" color="primary" slot="end"></ion-icon>
</ion-item>
I am using collapsable header in my ionic 5 app. I am getting this white space between my ion-header and ion-content when I swipe down on my page.
My code looks like below:
<ion-header [translucent]="false" no-border>
<ion-toolbar>
<ion-title>
Requests
</ion-title>
<ion-buttons slot="primary">
<ion-button class="person-icon" (click)="showProfile()">
<ion-icon slot="icon-only" name="person-outline" mode="md" color="light"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense" no-border>
<ion-toolbar color="primary">
<ion-title size="large">Requests</ion-title>
</ion-toolbar>
<ion-searchbar class="ion-text-left" style="padding-bottom:0px;" mode="ios" [(ngModel)]="searchReq" animated type="search" placeholder="Search"></ion-searchbar>
</ion-header>
....
Any idea what am I doing wrong or how I can remove that white space or lock my collapsable header with main header?
My app UI is complex so I'm giving an example to illustrate my problem. On Ionic 5 I have this code taken directly from the official docs
<ion-header translucent="true">
<ion-toolbar>
<ion-buttons collapse="true" slot="end">
<ion-button>Click Me</ion-button>
</ion-buttons>
<ion-title>Settings</ion-title>
</ion-toolbar>
</ion-header>
<ion-content fullscreen="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-buttons collapse="true" slot="end">
<ion-button>Click Me</ion-button>
</ion-buttons>
<ion-title size="large">Settings</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-searchbar></ion-searchbar>
</ion-toolbar>
</ion-header>
...
</ion-content>
If I set the color of the toolbars in a way like <ion-toolbar color="primary"> I get something like this
How can I set the color for the space above the colored toolbar?
Had the same issue as well, controlled all my toolbars css from the global.scss to set background color:
ion-toolbar {
background: var(--ion-color-primary) !important;
}
where
--ion-color-primary is my desired color
I'm using ion-avatar and ion-icon inside my ion-navbar toolbar. The problem is it keeps the avatar image and the icon on back pressed page transition. I'm thinking those items are not being animated properly. Here is my code
<ion-header>
<ion-navbar>
<ion-avatar item-left>
<img [src]="user?.getPicture()" alt="">
</ion-avatar>
<ion-title>{{ user?.getFirstName() }} {{ user?.getLastName() }}</ion-title>
<ion-icon name="md-more"></ion-icon>
</ion-navbar>
</ion-header>
user is a data from the server.
Thanks in advance.
I want to have a list item that can be swiped to reveal an archive button.
The icon should be to the left of the text.
I'm following the doc here (Button Layout): https://ionicframework.com/docs/api/components/item/ItemSliding/
<ion-item-options icon-start>
<button ion-button (click)="archive(item)">
<ion-icon name="archive"></ion-icon>
Archive
</button>
</ion-item-options>
But it still displays the icon on top of the text, see an example here: https://stackblitz.com/edit/ionic-fhhzdy?file=pages/home/home.html
What am I missing?
Seems like it's caused because of a bug in how the CSS rules are being applied but in the meantime, it works properly if you also add the icon-left attribute
<ion-content padding>
<ion-list>
<ion-item-sliding #item>
<ion-item>
Swipe me!
</ion-item>
<ion-item-options icon-left icon-start> <!-- Here! -->
<button ion-button (click)="archive(item)">
<ion-icon name="archive"></ion-icon>
Archive
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-content>
Working stackblitz project
More info:
I've found that the following style rule is being applied which causes the issue. So the only way to avoid this issue is to use both icon-left and icon-start attributes:
// The issue is because of this style rule...
ion-item-options:not([icon-left]) .button:not([icon-only]) .button-inner,
ion-item-options:not([icon-start]) .button:not([icon-only]) .button-inner {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}