angular flexlayout layoutgap rtl direction

Question

I wrote Angular application and use angular material with flexLayout.

I have a problem with style direction:rtl

The fxLayoutGap appear as right margin before each element except for the last.

(I successed to resolve the issue with empty div after the last element but is so ugly... See stackblitz angular material flex layout rtl gap with empty div)

Any idea?

Fateme Fazli Fateme Fazli · Accepted Answer · 2018-12-23T11:12:55

i think it's problem of fxLayoutGap when the direction is reverse. you can add:

.mat-form-field:last-child{
  margin-right: 25px;
}

or you can remove the fxLayoutGap and add 25px right margin to child items:

.mat-form-field{
  margin-right: 25px;
}

to global src/styles.css file.