CODEWITHSUNDEEP
cssionic-frameworksass
semmelbroesl
semmelbroesl

Reputation: 43

How can I enlarge an input field in IONIC 2

I am trying to figure out, how to enlarge an Input-Field so that it fills the whole page below the title.

enter image description here

I want to enlarge the "highlighted" part to cover the remaining part of the page.

The code looks like this:

tagebuch.html:

[........]

    <ion-content>
            <ion-list>

                [........]

                <ion-item id="description">
                    <ion-label floating>Description</ion-label>
                    <ion-input type="text" [(ngModel)]="Eintrag"></ion-input>
                </ion-item>

            </ion-list>

            <button full ion-button class="iButton" (click)="saveEintrag()">Speichern</button> 

    </ion-content>

tagebuch.scss:

page-tagebuch-anlegen {

    #description{
        height: 80%;
    }
}

I can't understand why this code does "nothing", but if I specify the height in "px" it does work.

Can anybody tell me, why this is not working and how I can fix this?

Thank You :)

Upvotes: 0

Views: 395

Answers (2)

semmelbroesl
semmelbroesl

Reputation: 43

Here is the Code that worked for me in this example:

<ion-item>
    <ion-label floating>Tagebucheintrag</ion-label>
    <!-- <ion-input type="text" [(ngModel)]="description" id="description"></ion-input> -->
    <ion-textarea name="description" cols="40" rows="5" id="description"></ion-textarea>
</ion-item>

Upvotes: 0

maninak
maninak

Reputation: 2726

You need to use a textarea to get multiline handling.

<textarea name="Text1" cols="40" rows="5"></textarea>

Upvotes: 3

Related Questions