angularuser-interfaceangular-flex-layout

Position elements vertically using FxFlexModule

I am using Angulars FxFlexModule within my app. I need to move the "test" element up closer to the search box. That entire container (the text element and the search box) are using fxLayoutAlign="start start" fxLayoutGap="8px". How can I push the "test" element up closer to the search box using FxFlexModule? I do not want to use absolute or relative positioning.

enter image description here

Solution

  • I'm assuming your code is laid out somewhat like this:

    <div fxLayout="column" fxLayoutAlign="start start" fxLayoutGap="8px">
  <mat-form-field>...</mat-form-field>
  <div>test</div>
</div>

    You can delete fxLayoutGap="8px", which will move "test" up 8px.

    FxLayoutGap also supports negative margins so you could try fxLayoutGap="-8px". Be wary if you're using mat-hints and mat-errors, they may overlap with your "test" element in this case.