CODEWITHSUNDEEP
angularangular-materialangular-material2right-to-leftangular-flex-layout
Stack Overflow
Stack Overflow

Reputation: 2764

angular flexlayout layoutgap rtl direction

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.

See the exmple here: stackblitz angular material flex layout rtl gap

(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?

Upvotes: 4

Views: 619

Answers (1)

Lia
Lia

Reputation: 11982

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.

forked demo.

Upvotes: 2

Related Questions