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

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

[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]]

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.