Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ionic-content: padding or no padding?

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): enter image description here

This layout is what I get when I use <ion-content class="padding"> (notice the padding on the input fields): enter image description here

This layout is what I get when I use <ion-content> (notice there's no padding on the button): enter image description here

like image 610
binoculars Avatar asked Aug 18 '15 11:08

binoculars


People also ask

What is padding in ionic?

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.

How do you remove padding from ionic?

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] .

What does ion content do?

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.


1 Answers

You should use it like this:

<ion-content padding="true">

You can see the example from the official Ionic example

like image 163
Nikola Avatar answered Sep 18 '22 17:09

Nikola