i am striving to achieve an ionic view similar to this
However, at the moment I have this
What changes or additions do I need to make to achieve this layout, or is this design theme inherent to the Android OS rather than the Ionic application?
If anyone has insights on how to address this issue or what steps I need to take to modify the appearance of the ion-select and ion-options menus, your help would be greatly appreciated.
SCSS
page-home {
.center {
display: block;
margin: auto;
padding-top: 5px;
padding-bottom: 10px;
}
.margins {
margin-left: 5%;
margin-right: 5%;
}
.ilb {
display: flex;
margin: 5px;
}
.curved {
margin-bottom: 10px;
border-radius: 10px;
}
.curvedButton {
margin-left:10px;
margin-right: 10PX;
border-radius: 10px;
}
}
HTML
<div class="margins">
<form [formGroup]="todo" (ngSubmit)="CreateUser()" novalidate>
<ion-item class="curved">
<ion-label>Name</ion-label>
<ion-input type="text" formControlName="name"></ion-input>
<p color="danger" ion-text *ngIf="todo.get('name').hasError('required')">*Required</p>
</ion-item>
<ion-item class="curved">
<ion-label>Company</ion-label>
<ion-input type="text" formControlName="company"></ion-input>
</ion-item>
<ion-item class="curved">
<ion-label>Room</ion-label>
<ion-select #C (ionChange)="onChange(C.value)" id="roomFilter" formControlName="room">
<ion-option *ngFor="let lab of labs" value="{{lab}}" type="string">{{lab}}</ion-option>
</ion-select>
</ion-item>
<ion-item class="curved" *ngIf="todo.get('room').errors && todo.get('room').dirty">
<p color="danger" ion-text *ngIf="todo.get('room').hasError('required')">*Required</p>
</ion-item>
<ion-item class="curved">
<ion-label>PassID</ion-label>
<ion-select formControlName="passID" multiple="true" id="passesID">
<ion-option *ngFor="let pass of passes" value="{{pass}}">{{pass}}</ion-option>
</ion-select>
</ion-item>
<ion-item class="curved" *ngIf="todo.get('passID').errors && todo.get('passID').dirty">
<p color="danger" ion-text *ngIf="todo.get('passID').hasError('required')">*Required</p>
</ion-item>
<ion-item class="curved">
<ion-label>Pass Return Date</ion-label>
<ion-datetime displayFormat="DD MMM YYYY " min="2018" max="2030" formControlName="date" multiple="true">
</ion-datetime>
</ion-item>
<div class="ilb">
<button class="curvedButton" ion-button block type="Reset">Reset Form</button>
<button class="curvedButton" ion-button block type="submit" [disabled]="!todo.valid">Create</button>
</div>
<ion-row style="height: 100px"></ion-row>
<img alt="CC Logo" src="assets/imgs/Global Solutions Center_white.png" class="center" width="100%">