Skip to content

ion-label in ion-range takes to much space in ionic 4 #15062

@RobinVdBroeck

Description

@RobinVdBroeck

Feature Request

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.0.3 (/usr/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.1
   @angular-devkit/core       : 0.7.0
   @angular-devkit/schematics : 0.7.0
   @angular/cli               : 6.1.2
   @ionic/ng-toolkit          : 1.0.2
   @ionic/schematics-angular  : 1.0.3

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0

System:

   Android SDK Tools : 26.1.1
   NodeJS            : v8.11.3 (/usr/bin/node)
   npm               : 6.2.0
   OS                : Linux 4.15

Describe the Feature Request
In ionic v4, when you put labels in the range they take 1/3th of the space (by flex). This doesn't look good.

Describe Preferred Solution
Labels only take the space required for showing them

Describe Alternatives
A config variable so you can choose how it behaves.

Related Code

<script src="https://unpkg.com/@ionic/core@4.0.0-beta.1/dist/ionic.js"></script>
<ion-item>
  <ion-range min="-200" max="200" color="secondary">
    <ion-label slot="start">-200</ion-label>
    <ion-label slot="end">200</ion-label>
  </ion-range>
</ion-item>

codepen

Additional Context
/

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions