Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: wrong margin in slotted ion-label in RTL and ios and Ionic angular 5.0

See original GitHub issue

Bug Report

Ionic version:

[x] 5.x

Current behavior: ion-label has left margin=8px and right margin=0

Expected behavior: ion-label should have right margin=8px to seperate it from the ion-icon next to it

Steps to reproduce: 1- generate a new project using the default ‘list’ template 2- add this to index.html <html lang="ar" dir="rtl"> 3- run project in ios mode

Related code:

<ion-list lines="none">
    <ion-list-header>
      <ion-label>Resources</ion-label>
    </ion-list-header>
    <ion-item>
      <ion-icon slot="start" color="medium" name="book"></ion-icon>
      <ion-label>Ionic Documentation</ion-label>
    </ion-item>
</ion-list>

Other information:

Ionic info:

Ionic:
   Ionic CLI                     : 6.1.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.1
   @angular-devkit/build-angular : 0.900.3
   @angular-devkit/schematics    : 9.0.3
   @angular/cli                  : 9.0.3
   @ionic/angular-toolkit        : 2.1.2

Cordova:
   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 12 other plugins)

Utility:
   cordova-res : 0.9.0
   native-run  : 0.3.0

System:
   ios-deploy : 1.10.0
   ios-sim    : 8.0.2
   NodeJS     : v12.14.1 (/usr/local/bin/node)
   npm        : 6.13.4
   OS         : macOS Mojave
   Xcode      : Xcode 11.3 Build version 11C29

‏لقطة الشاشة 2020-02-29 في 6 00 22 م

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

brandyscarneycommented, Mar 3, 2020

More digging has shown me that this is due to the way we set the defaults:

/// @prop - Margin top for an icon in the start/end slot
$item-ios-icon-slot-margin-top:              7px !default;

/// @prop - Margin end for an icon in the start/end slot
$item-ios-icon-slot-margin-end:              null !default;

/// @prop - Margin bottom for an icon in the start/end slot
$item-ios-icon-slot-margin-bottom:           7px !default;

/// @prop - Margin start for an icon in the start/end slot
$item-ios-icon-slot-margin-start:            0 !default;

The margin-left being set to 0 is the reason it is breaking in RTL.

1reaction

liamdebeasicommented, Mar 2, 2020

Thanks for the issue. I was able to confirm this behavior – looks like it is only happening in Safari.

Top Results From Across the Web

wrong margin in slotted ion-label in RTL and ios and Ionic ...

The margin-left being set to 0 is the reason it is breaking in RTL. 1

ion-item - Ionic Framework

The error slot will not be displayed unless the ion-invalid class is added to the ion-item . In Angular, this is done automatically...

@ionic/core | Yarn - Package Manager

Ionic is an open source app development toolkit for building modern, fast, top-quality cross-platform native and Progressive Web Apps from a single codebase ......

IONIC Angular Spacing seems to be wrong - Stack Overflow

The the expected behaviour for ionic items is a line with padding for the start-slotted element. Add slot="start" to your thumbnail to have ......

Announcing Ionic 6 - Ionic Blog

We have revamped the input styles in Material Design mode to support new filled and outline variants. We have also added error and...