Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[4.0.0-beta.3 to beta.7] RTL mode: margin-start/end & padding-start/end do not work #15341

Closed
abennouna opened this issue Aug 27, 2018 · 9 comments
Closed

[4.0.0-beta.3 to beta.7] RTL mode: margin-start/end & padding-start/end do not work #15341

abennouna opened this issue Aug 27, 2018 · 9 comments
Labels
package: core @ionic/core package

Comments

@abennouna
Copy link
Contributor

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.1.1 (~/.nvm/versions/node/v8.11.1/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.3
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.7
   @ionic/schematics-angular  : 1.0.5

System:

   NodeJS : v8.11.1 (~/.nvm/versions/node/v8.11.1/bin/node)
   npm    : 5.6.0
   OS     : macOS High Sierra

Describe the Bug
The 4 attributes margin-start, margin-end, padding-start, and padding-end do not work correctly in RTL mode: they render like in LTR mode.

Steps to Reproduce
Steps to reproduce the behavior:

  1. Add dir="rtl" to the HTML root element
  2. Use any of the 4 attributes on a div for instance
  3. Notice that they render as in LTR mode (demo provided below)

Related Code

Expected Behavior
The 4 attributes must render as right-to-left mode.

Additional Context
I tried with and without $app-direction: multi but I haven't noticed any change.
@ionitron-bot ionitron-bot bot added the triage label Aug 27, 2018
@abennouna abennouna changed the title RTL mode: margin-start/end & padding-start/end do not work [ionic 4 beta 3] RTL mode: margin-start/end & padding-start/end do not work Aug 27, 2018
@abennouna
Copy link
Contributor Author

abennouna commented Aug 27, 2018 •
edited
Loading

After digging a bit, it seems that by default only LTR directives are included.

I am now able to correctly render those attributes by including the relevant scss files instead of the preprocessed css files:

[globals.scss]

$app-direction: multi;
@import "~@ionic/angular/dist/css/ionic";
@import "~@ionic/angular/dist/themes/ionic.globals.md";

[index.html]

<html lang="en" dir="ltr">
...

So it seems a bit like for Ionic 3.

Is this the correct approach? I updated the repo on https://github.com/abennouna/ionic4-rtl-issue

Demo: https://github-bpgvd6-dez9ax.stackblitz.io/home

@abennouna abennouna changed the title [ionic 4 beta 3] RTL mode: margin-start/end & padding-start/end do not work [4.0.0-beta.3 to beta.7] RTL mode: margin-start/end & padding-start/end do not work Aug 31, 2018
@abennouna
Copy link
Contributor Author

With beta.6:

@import '~@ionic/angular/dist/css/normalize';
@import '~@ionic/angular/dist/css/core';
@import '~@ionic/angular/dist/css/structure';
@import '~@ionic/angular/dist/css/typography';
@import '~@ionic/angular/dist/css/utils.bundle';
@import '~@ionic/angular/dist/themes/ionic.globals.md';

@paulstelzer
Copy link
Contributor

Is this issue still exist in beta.17?

@paulstelzer paulstelzer added needs: reply the issue needs a response from the user and removed triage labels Dec 3, 2018
@abennouna abennouna mentioned this issue Dec 4, 2018
Closed
@abennouna
Copy link
Contributor Author

Yes: RTL mode is broken out of the box, and it's not clear how we can make it work with static CSS files.

As a workaround, we use SCSS files for the moment.

You can check the updated demo here and the demo repository here

@ionitron-bot ionitron-bot bot added triage and removed needs: reply the issue needs a response from the user labels Dec 4, 2018
@paulstelzer paulstelzer added needs: investigation package: core @ionic/core package and removed triage labels Dec 4, 2018
@abennouna
Copy link
Contributor Author

abennouna commented Dec 12, 2018 •
edited
Loading

@paulstelzer I'd like to try to fix some RTL issues, like this one.

Do you know how the CSS compilation work in v4?

I've been banging my head for some time now, and I can't understand how the RTL styles are supposed to be compiled in the final CSS files.

(Edit: So it seems a way to make it work is to target by [dir="rtl"], will continue my tests...)

For instance, the ruleset for [padding-end] contains [this line]
(https://github.com/ionic-team/ionic/blob/master/core/src/css/padding.scss#L52):

  --padding-end: #{$padding};

As mentioned before, when I import the static CSS file alone, I don't get anything related to RTL styles.

But, even if I change that line with:

  @include ltr() {
    --padding-end: #{$padding};
  }
  @include rtl() {
    --padding-start: #{$padding};
  }

edit: the lines above are not the solution

and compile the project, I see the CSS does not change at all.

Any help or pointer will be appreciated, thanks!

@abennouna abennouna mentioned this issue Dec 12, 2018
Closed
@paulstelzer
Copy link
Contributor

Maybe @brandyscarney or @manucorporat can help you :)

@mohamedsharaf
Copy link

mohamedsharaf commented Dec 27, 2018 •
edited
Loading

hope you update demo with sample of all error in rtl and make this as guide like floating input not working in RC0

 <ion-item no-padding>
                <ion-label position="floating" item-start>
                    email
                </ion-label>
                <ion-input color="secondary" type="email" name="email"></ion-input>
   </ion-item>

even i think your pull request with direction suggestion is the best work around the problem with static css files

@brandyscarney brandyscarney mentioned this issue Jan 3, 2019
Closed
11 tasks
@abennouna
Copy link
Contributor Author

Is fixed by #16987.

@ionitron-bot
Copy link

ionitron-bot bot commented Feb 8, 2019

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Feb 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
package: core @ionic/core package
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@mohamedsharaf @abennouna @paulstelzer