Ionic-framework: bug: ion-select without ion-label does not render properly

[mebibou]

Bug Report

Ionic version:


[x] 4.x

Current behavior:
When setting an ion-select without an ion-label, the select does not take the whole space and therefore looks very odd.

Expected behavior:
The ion-select should just take any available space, just like ion-input does.
It is somewhat fixable by setting in css:

ion-select {
  max-width: 100%;
}

but it should by default just expand

Related code:

<ion-item>
  <ion-icon slot="start" name="car"></ion-icon>
  <ion-select>
    <ion-select-option value="1">Option 1</ion-select-option>
  </ion-select>
</ion-item>

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.2 (/.nvm/versions/node/v10.1.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.6.1
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 6.5.0
   Cordova Platforms : ios 4.3.1
   Cordova Plugins   : cordova-plugin-ionic 5.3.1, cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 7 other plugins)

Utility:

   cordova-res : 0.3.0 (update available: 0.6.0)
   native-run  : 0.2.5 (update available: 0.2.7)

System:

   Android SDK Tools : 26.1.1 (/usr/local/Cellar/android-sdk/24.4.1_1)
   ios-deploy        : 1.9.2
   ios-sim           : 6.1.2
   NodeJS            : v10.1.0 (/.nvm/versions/node/v10.1.0/bin/node)
   npm               : 6.10.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.2.1 Build version 10E1001

[liamdebeasi]

Thanks for the issue. I believe this is because ion-item is expecting an element to be slotted or in an ion-label. For example, if I do <ion-select slot="end">, ion-select renders fine.

@brandyscarney Thoughts on this? At first glance this seems to be the correct behavior, but I can also understand why this behavior might be seen as incorrect.

[mebibou]

adding slot="end" does not solve the issue, as seen on screenshot below:

When ion-input is used within an ion-item without an ion-label, it works as expected. Others like ion-datetime work as well, only ion-select does not handle this. By default, it should take the whole available space imho

[liamdebeasi]

Good catch, didn't notice that! I agree, this is a bug. We will look into a fix for this.

[mebibou]

So just to make it complete, here is a sample:

<ion-list>
  <ion-item>
    <ion-icon slot="start" name="car"></ion-icon>
    <ion-select placeholder="Select a Value">
      <ion-select-option value="1">Option 1</ion-select-option>
    </ion-select>
  </ion-item>

  <ion-item>
    <ion-icon slot="start" name="time"></ion-icon>
    <ion-datetime value="2019-01-01"></ion-datetime>
  </ion-item>

  <ion-item (click)="updateFrom()">
    <ion-icon slot="start" name="radio-button-off"></ion-icon>
    <ion-input value="Start"></ion-input>
  </ion-item>
</ion-list>

I also have set in scss:

ion-select {
  max-width: 100%;
}

but as you can see the placeholder (and the value as well) of the select do not align with the ion-input. I have logged another issue regarding alignment of the ion-datetime

[Slavrix]

was there any progress on this?

[brandyscarney]

There is a workaround to this, by setting the following (remove the padding if you don't want it aligned left with the input):

ion-select {
  min-width: 100%;
  padding-left: 0;
}

Here's a Codepen: https://codepen.io/brandyscarney/pen/NWPbdyr

Unfortunately issues with workarounds are not at the top of our priority list at the moment but we always appreciate any help to push issues to the top with PRs. I'll add the help wanted label to this which will adds steps on how to contribute. 🙂

The problem is the select & datetime are designed to be with a label so it will take some work to make sure they look good in instances with & without a label and where there are multiple of them in one item (see "Date"):

[ionitron-bot[bot]]

This issue has been labeled as help wanted. This label is added to issues that we believe would be good for contributors.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.

For a guide on how to create a pull request and test this project locally to see your changes, see our contributing documentation.

Thank you!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.