Scroll List page with fixed button at the bottom IONIC
I would like to display ion-list in a page that has fixed submit button at the bottom of the page. If I place a submit button at the bottom, it scrolls down below the list. I want to fix the button at the bottom and list should occupy only 70% of the screen. List has to scroll within that 70% height.
Please let me know how to make bottom submit button fixed and with fixed height for ion-list.
Thanks,
angular typescript ionic-framework ionic2 ionic3
asked Nov 20 '18 at 4:23
MobiMobi
74
add a comment |
I would like to display ion-list in a page that has fixed submit button at the bottom of the page. If I place a submit button at the bottom, it scrolls down below the list. I want to fix the button at the bottom and list should occupy only 70% of the screen. List has to scroll within that 70% height.
Please let me know how to make bottom submit button fixed and with fixed height for ion-list.
Thanks,
angular typescript ionic-framework ionic2 ionic3
asked Nov 20 '18 at 4:23
MobiMobi
74
Use ion-footer and make transparent background of ion-footer then add button inside ion-footer for height you can adjust it by css.
– Javascript Hupp Technologies
Nov 20 '18 at 5:34
add a comment |
I would like to display ion-list in a page that has fixed submit button at the bottom of the page. If I place a submit button at the bottom, it scrolls down below the list. I want to fix the button at the bottom and list should occupy only 70% of the screen. List has to scroll within that 70% height.
Please let me know how to make bottom submit button fixed and with fixed height for ion-list.
Thanks,
angular typescript ionic-framework ionic2 ionic3
asked Nov 20 '18 at 4:23
MobiMobi
74
I would like to display ion-list in a page that has fixed submit button at the bottom of the page. If I place a submit button at the bottom, it scrolls down below the list. I want to fix the button at the bottom and list should occupy only 70% of the screen. List has to scroll within that 70% height.
Please let me know how to make bottom submit button fixed and with fixed height for ion-list.
Thanks,
angular typescript ionic-framework ionic2 ionic3
angular typescript ionic-framework ionic2 ionic3
asked Nov 20 '18 at 4:23
MobiMobi
74
asked Nov 20 '18 at 4:23
MobiMobi
74
asked Nov 20 '18 at 4:23
MobiMobi
74
asked Nov 20 '18 at 4:23
MobiMobi
74
asked Nov 20 '18 at 4:23
MobiMobi
74
74
Use ion-footer and make transparent background of ion-footer then add button inside ion-footer for height you can adjust it by css.
– Javascript Hupp Technologies
Nov 20 '18 at 5:34
add a comment |
Use ion-footer and make transparent background of ion-footer then add button inside ion-footer for height you can adjust it by css.
– Javascript Hupp Technologies
Nov 20 '18 at 5:34
Use ion-footer and make transparent background of ion-footer then add button inside ion-footer for height you can adjust it by css.
– Javascript Hupp Technologies
Nov 20 '18 at 5:34
Use ion-footer and make transparent background of ion-footer then add button inside ion-footer for height you can adjust it by css.
– Javascript Hupp Technologies
Nov 20 '18 at 5:34
add a comment |
1 Answer
1
active
oldest
votes
To set fixed button at bottom you can use <ion-footer> which will set your content always at footer part of screen.
<ion-header> // For setting navigation bar or toolbar in header part
<ion-footer> // For setting bottom bar with non scrollable content
Sample code:
<ion-header>
<ion-navbar>
<button ion-button menuToggle><ion-icon name="menu"></ion-icon></button>
<ion-title>List</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
<ion-icon [name]="item.icon" item-start></ion-icon>
{{ item.title }}
<div class="item-note" item-end>{{ item.note }}</div>
</button>
</ion-list>
</ion-content>
<ion-footer>
<div><button ion-item>Submit</button></div>
</ion-footer>
in above code I placed footer outside so it will stay always at footer position after ion-content.
Ref Link :
ion-header
ion-footer
And your list will scroll without footer button.
answered Nov 20 '18 at 10:24
CodeChangerCodeChanger
3,67011640
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53386187%2fscroll-list-page-with-fixed-button-at-the-bottom-ionic%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
To set fixed button at bottom you can use <ion-footer> which will set your content always at footer part of screen.
<ion-header> // For setting navigation bar or toolbar in header part
<ion-footer> // For setting bottom bar with non scrollable content
Sample code:
<ion-header>
<ion-navbar>
<button ion-button menuToggle><ion-icon name="menu"></ion-icon></button>
<ion-title>List</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
<ion-icon [name]="item.icon" item-start></ion-icon>
{{ item.title }}
<div class="item-note" item-end>{{ item.note }}</div>
</button>
</ion-list>
</ion-content>
<ion-footer>
<div><button ion-item>Submit</button></div>
</ion-footer>
in above code I placed footer outside so it will stay always at footer position after ion-content.
Ref Link :
ion-header
ion-footer
And your list will scroll without footer button.
answered Nov 20 '18 at 10:24
CodeChangerCodeChanger
3,67011640
add a comment |
To set fixed button at bottom you can use <ion-footer> which will set your content always at footer part of screen.
<ion-header> // For setting navigation bar or toolbar in header part
<ion-footer> // For setting bottom bar with non scrollable content
Sample code:
<ion-header>
<ion-navbar>
<button ion-button menuToggle><ion-icon name="menu"></ion-icon></button>
<ion-title>List</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
<ion-icon [name]="item.icon" item-start></ion-icon>
{{ item.title }}
<div class="item-note" item-end>{{ item.note }}</div>
</button>
</ion-list>
</ion-content>
<ion-footer>
<div><button ion-item>Submit</button></div>
</ion-footer>
in above code I placed footer outside so it will stay always at footer position after ion-content.
Ref Link :
ion-header
ion-footer
And your list will scroll without footer button.
answered Nov 20 '18 at 10:24
CodeChangerCodeChanger
3,67011640
add a comment |
To set fixed button at bottom you can use <ion-footer> which will set your content always at footer part of screen.
<ion-header> // For setting navigation bar or toolbar in header part
<ion-footer> // For setting bottom bar with non scrollable content
Sample code:
<ion-header>
<ion-navbar>
<button ion-button menuToggle><ion-icon name="menu"></ion-icon></button>
<ion-title>List</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
<ion-icon [name]="item.icon" item-start></ion-icon>
{{ item.title }}
<div class="item-note" item-end>{{ item.note }}</div>
</button>
</ion-list>
</ion-content>
<ion-footer>
<div><button ion-item>Submit</button></div>
</ion-footer>
in above code I placed footer outside so it will stay always at footer position after ion-content.
Ref Link :
ion-header
ion-footer
And your list will scroll without footer button.
answered Nov 20 '18 at 10:24
CodeChangerCodeChanger
3,67011640
To set fixed button at bottom you can use <ion-footer> which will set your content always at footer part of screen.
<ion-header> // For setting navigation bar or toolbar in header part
<ion-footer> // For setting bottom bar with non scrollable content
Sample code:
<ion-header>
<ion-navbar>
<button ion-button menuToggle><ion-icon name="menu"></ion-icon></button>
<ion-title>List</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
<ion-icon [name]="item.icon" item-start></ion-icon>
{{ item.title }}
<div class="item-note" item-end>{{ item.note }}</div>
</button>
</ion-list>
</ion-content>
<ion-footer>
<div><button ion-item>Submit</button></div>
</ion-footer>
in above code I placed footer outside so it will stay always at footer position after ion-content.
Ref Link :
ion-header
ion-footer
And your list will scroll without footer button.
answered Nov 20 '18 at 10:24
CodeChangerCodeChanger
3,67011640
answered Nov 20 '18 at 10:24
CodeChangerCodeChanger
3,67011640
answered Nov 20 '18 at 10:24
CodeChangerCodeChanger
3,67011640
answered Nov 20 '18 at 10:24
CodeChangerCodeChanger
3,67011640
3,67011640
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53386187%2fscroll-list-page-with-fixed-button-at-the-bottom-ionic%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Use ion-footer and make transparent background of ion-footer then add button inside ion-footer for height you can adjust it by css.
– Javascript Hupp Technologies
Nov 20 '18 at 5:34