Between input field and ion-select tag margin problem

Ionic Framework ionic-v3
1

Hello i am facing a problem in ion-list.

That contain ion-item and i used input tag like

        <ion-item>
            <ion-label color="ligh-grey" floating>Job Status (Position)</ion-label>
            <ion-input type="text"></ion-input>
        </ion-item>

But after i placed ion-select tag like this

        <ion-item>
            <ion-label>Job Sector</ion-label>
            <ion-select [(ngModel)]="job_sector">
                <ion-option value="f">Government</ion-option>
                <ion-option value="m">Private</ion-option>
            </ion-select>
        </ion-item>

I got margin problem like this preview
margin

Job status field and Job sector select tag got stacked so closely unlike other input tags. :face_with_raised_eyebrow:
Can anybody why this happen? Is there any solution? :slight_smile: Thank you

2

@mohamedwahshey hey do you know about this?

4

This is because they’re ion-item, and inside a select component which has it’s special scss styles from ionic team, it’s normal and you can customize it, can you post the HTML code for other two inputs?

1 Like
5 
<ion-content padding>
    <ion-list class="items-middle" text-center>
        <ion-item>
            <ion-label color="ligh-grey" floating>Full Name</ion-label>
            <ion-input type="text" required></ion-input>
        </ion-item>
        <ion-item>
            <ion-label color="ligh-grey" floating>Email</ion-label>
            <ion-input type="email"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label color="ligh-grey" floating>Date of Birth</ion-label>
            <ion-input type="text"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label color="ligh-grey" floating>Phone Number</ion-label>
            <ion-input type="text"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label color="ligh-grey" floating>Address</ion-label>
            <ion-input type="text"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label color="ligh-grey" floating>Job Status (Position)</ion-label>
            <ion-input type="text"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label>Job Sector</ion-label>
            <ion-select [(ngModel)]="job_sector">
                <ion-option value="f">Government</ion-option>
                <ion-option value="m">Private</ion-option>
            </ion-select>
        </ion-item>
        <ion-buttons padding-top>
            <button ion-button full round>Login</button>
        </ion-buttons>
    </ion-list>
</ion-content>
6

remove the ion-item which wrapping the ion-select and try and tell me what happened

7

its broke the design bro. :thinking:

8

ok just leave it, i know what is the issue now it’s not a problem with the design the design is cool but select input component has its own style without margins this is why it’s showing like that, just give the last ion-item before the select (which in your case is wrapping job status) a margin-bottom of 16px

1 Like
9

I also thought use that but i was thought there is any solution unless using scss :grin:

1 Like
10

no, feel free to use your imagination to edit any component you would like to fit your needs, and if you did anything wrong affects the design, don’t worry it will be very obvious to you and you will notice it, then you will learn from it.