Another problem with ion-item
I have a row two columns
column one has a drop down list with a label.
Second column is input.
<ion-row>
<ion-col col-12 col-sm-9 col-md-6 col-lg-4>
<ion-item>
<ion-label floating>Questions One</ion-label>
<ion-select [ngModel]="question1" name="question1" (ionChange)="selectQ1($event)" >
<ion-option *ngFor="let question of questionList" [value]="question.description" >{{question.description}}</ion-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col col-12 col-sm-9 col-md-6 col-lg-4>
<ion-item>
<ion-input type="text" [(ngModel)]="answer1" #answer1Val="ngModel" name="answer1" placeholder="Answer" required ></ion-input>
</ion-item>
<div *ngIf="answer1Val.invalid && answer1Val.dirty" class="serverErrorRed">
Required Value
</div>
</ion-col>
</ion-row>
<ion-row>
On a mobile screen it looks fine. But on a desktop because I’m using floating label column 1 is taller, which makes column 2 also taller. Which then makes the stuff in column 2 centered and not bottom aligned.
[Image]
For the life of me I can’t find the style to get these aligned.
it seems like it has to be in the ion-item style.
I tried adding bottom to both the row and col. No luck.