I'm trying to recreate something similar to this.
I've noticed that the input fields can't be inside <ion-content class="padding">
because then they get an ugly padding. The button on the other hand, needs this padding, because otherwise it sticks to the side without any padding.
The following code didn't work, since that places the button on top of the input fields:
<ion-view view-title="Settings">
<div ng-controller="ClickedCtrl">
<ion-content>
<div class="list">
<label class="item item-input item-floating-label">
<span class="input-label">First Name</span>
<input type="text" placeholder="First Name" ng-mode="fname">
</label>
</div>
</ion-content>
<ion-content class="padding">
<button class="button button-positive" ng-click="clicked()">
Save
</button>
</ion-content>
</div>
</ion-view>
UPDATE:
This layout is what I want (notice there's no padding on the input fields, but there is padding on the button):
This layout is what I get when I use <ion-content class="padding">
(notice the padding on the input fields):
This layout is what I get when I use <ion-content>
(notice there's no padding on the button):
Learn Ionic React by Building a WhatsApp clone Ionic offers an easy way to add padding to elements. There are couple of classes that can be used and all of them will add 10px between border of element and its content. The following table displays all the available padding classes.
try to add an id = 'ion-overrides' or whatever you want to call it to your body element and then in your scss change the ion-app.md [padding] . scroll-content {...} to #ion-overrides ion-app.md [padding] .
The Ionic framework provides an <ion-content> element that serves as a container which wraps all the other elements that we want to create in the app. The content component allows an easy to use content area that contains some useful methods to control the scrollable area.
You should use it like this:
<ion-content padding="true">
You can see the example from the official Ionic example
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With