how to display these ionic input field value properly? - html

Question

<ion-grid>
<ion-item>
<ion-label col-5 inline>Building Type</ion-label>
<ion-select type="text" formControlName="ml_build_type">
<ion-option value="VILLA">Villa</ion-option>
<ion-option value="BLGD">Building</ion-option>
</ion-select>
</ion-item>
<ion-row>
<ion-item col-6 inline>
<ion-label >Name/Number</ion-label>
<ion-input type="text" formControlName="ml_build" ></ion-input>
</ion-item>
<ion-item col-6 inline >
<ion-label >Flat No</ion-label>
<ion-input type="number" formControlName="ml_flat" ></ion-input>
</ion-item>
</ion-row>
<ion-row>
<ion-item col-6>
<ion-label inline> Floor No</ion-label>
<ion-input type="number" min="0" formControlName="ml_floor" ></ion-input>
</ion-item>
<ion-item col-6>
<ion-label inline>Room No</ion-label>
<ion-input type="number" min="0" formControlName="ml_room_no" ></ion-input>
</ion-item>
</ion-row>
<ion-row>
<ion-item col-6>
<ion-label inline>Room Type</ion-label>
<ion-select type="text" formControlName="ml_unit" >
<ion-option *ngFor="let room of room_type" let i=i ndex [value]="room.code">{{room.room_type}}</ion-option>
</ion-select>
</ion-item>
<ion-item col-6>
<ion-label inline> Wall Number</ion-label>
<ion-input type="number" min="0" formControlName="ml_wall_no" ></ion-input>
</ion-item>
</ion-row>
<ion-row>
<ion-item col-6>
<ion-label inline> Wall Width</ion-label>
<ion-input type="number" formControlName="ml_width" ></ion-input>
</ion-item>
<ion-item col-6>
<ion-label inline> Wall Height</ion-label>
<ion-input type="number" formControlName="ml_height" ></ion-input>
</ion-item>
</ion-row>
<ion-item>
<ion-label col-5 inline>Window Exists</ion-label>
<ion-select formControlName="window_exists" type="text">
<ion-option value="Y">Yes</ion-option>
<ion-option value="N">No</ion-option>
</ion-select>
</ion-item>
</ion-grid>
this HTML code , the data is displaying according to lable size, i want them to look good and arranged in one line, All data must be display in horizontal alignment . i am trying to use as much as ionic component to make it look perfect but the data is displaying here and there.

Answer 1

In the .scss file for your page, you can override the Ionic label style thus to make the labels all the same width:
.item-input ion-label {
width: 150px;
}
You just have to choose a width that suits your layout and accommodates all label widths.

Answer 2

Ionic provides several attributes that allow you to control the styling for inputs. You probably want to use the Fixed Inline Labels.
Excerpted from Input Component Documentation emphasis added
Use fixed to place a label to the left of the input element. The label does not hide when text is entered. The input will align on the same position, regardless of the length of the label. Placeholder text can be used in conjunction with a fixed label.
Replace inline in your code with fixed.
<ion-item col-6>
<ion-label fixed> Wall Width</ion-label>
<ion-input type="number" formControlName="ml_width"></ion-input>
</ion-item>
EDIT
If you have very long labels and you can't shorten them, your options are:
1. Override the label width:
If you have static labels, you can override the label width of the fixed width labels. Fixed width labels by default are 100px wide. To set them to 200px for example, add the following to your scss file:
ion-label[fixed] {
width: 200px;
flex: 0 0 200px;
//max-width defaults to 200px
//if you're setting your label width wider than 200px
//remember to adjust the max-width as well.
}
2. Toggle the overflow property of the ion-label.
The ion-label has its overflow property set to overflow: hidden. You could set the value to visible, and then programmatically change it to hidden when the respective input is in focus or has a value that is not empty. This way the ellipsis for the label will only appear once the input has been entered and given a value.
A simple way to do this is with ngStyle. To determine if the input as focus, you could add a property to your class, setting its initial value to false, and then toggle the value by adding focus/blur events to the corresponding input as follows:
<ion-input (focus)="inFocus = true" (blur)="inFocus = false" ...>...</input>
Then you can use ngStyle to toggle the overflow value by determining whether the inFocus property is true or the input is not empty (by observing the ngModel for the input). So, you'd have something like:
<ion-label [ngStyle]="{'overflow': inFocus || myForm.myinputvalue != '' ? 'hidden' : 'visible' }">
3. Use floating labels instead.
Floating labels will fill the entire width of the input. When the user touches/clicks inside the input, the label "floats" out of the way but remains visible for reference.
Similarly, a 'stacked' label will be placed above the input, but is fixed in place:

Answer 3

In addition to AndrWeisR's answer I couldn't get it working without the following (Ionic 4).
.item-input ion-label {
width: 150px;
flex: 0 0 150px;
}