CODEWITHSUNDEEP
ionic-frameworkionic4
Monicka Akilan
Monicka Akilan

Reputation: 1549

Only down arrow coming for ION-SELECT and blank for textbox in IONIC 4

In my ionic select i got output like small down arrow rather than a full select tag and for input tag just a blank space. I can enter data but UI not looks good. Is there any css i need to add.

 <ion-card class='sc-ion-card-md-h'>
      <ion-card-header>
        <ion-card-subtitle>Name:</ion-card-subtitle>
        <ion-card-title>
          <ion-select #inputName id="username" class="form-control">
            <ion-select-option>SELECT</ion-select-option>
            <ion-select-option>Monicka</ion-select-option>
            <ion-select-option>Hema</ion-select-option>
            <ion-select-option>Ramesh</ion-select-option>
            <ion-select-option>Madhavan</ion-select-option>
            <ion-select-option>Aadhavan</ion-select-option>
            <ion-select-option>Madhan</ion-select-option>
            <ion-select-option>Prasanth</ion-select-option>
          </ion-select>
        </ion-card-title>
      </ion-card-header>
      <ion-card-header>
        <ion-card-subtitle>Date:</ion-card-subtitle>
        <ion-card-title>
          <ion-input type="text" #inputDate id="date" class="form-control"></ion-input>
        </ion-card-title>
      </ion-card-header>
    </ion-card>

Output looks like this...

enter image description here

enter image description here

Upvotes: 0

Views: 923

Answers (1)

rtpHarry
rtpHarry

Reputation: 13125

It seems like you are trying to convert a Bootstrap form over to Ionic and you are bringing some jQuery thinking along with it.

This is how you would do it with an Ionic page:

enter image description here

page.html

<ion-header>
  <ion-toolbar>
    <ion-title>card-select</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-list>
      <ion-item>
        <ion-label position="stacked">Name:</ion-label>
        <ion-select [(ngModel)]="username" placeholder="SELECT">
          <ion-select-option>Monicka</ion-select-option>
          <ion-select-option>Hema</ion-select-option>
          <ion-select-option>Ramesh</ion-select-option>
          <ion-select-option>Madhavan</ion-select-option>
          <ion-select-option>Aadhavan</ion-select-option>
          <ion-select-option>Madhan</ion-select-option>
          <ion-select-option>Prasanth</ion-select-option>
        </ion-select>
      </ion-item>
      <ion-item>
        <ion-label position="stacked">Date:</ion-label>
        <ion-input [(ngModel)]="date"></ion-input>
      </ion-item>
    </ion-list>
  </ion-card>
</ion-content>

page.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-card-select',
  templateUrl: './card-select.page.html',
  styleUrls: ['./card-select.page.scss'],
})
export class CardSelectPage implements OnInit {

  username: string;
  date: string;

  constructor() { }

  ngOnInit() {
  }

}

notes

You don't need all those classes you put on.

Using label position="stacked" puts it above the input.

You dont need to bind the name like #username or id="username". What you do is put a variable on the page behind it and then use ngModel to bind to it. Any change that is made to the user interface (typing into a box, selecting an option) is then automatically set to the variable in the page. This works both ways because of the [()] syntax, so if you change username with something like this.username = "superman"in the code then the input box on the page will automatically update to match that value as well.

You don't need type="text" on the input, its the default.

You can use the placeholder attrib to pass some SELECT text instead of having an extra select option.

Upvotes: 2

Related Questions