Alignment of fields not working as expected

Question

I am trying to align the field in the Angular html page and it is not working as expected. The html file is like below

<div id="report-prj-search">
  <div class="dx-fieldset flex-column">
    <div class="flex-row-container">
      <div class="dx-field flex-row">
        <div class="dx-field-label">ShipTo Account</div>
        <div class="dx-field-value">
          <dx-select-box [dataSource]="ShipmentList" displayExpr="customer_shipto_name"  (onValueChanged)="onValueChanged($event)" ></dx-select-box>
        </div>
      </div>

      <div class="dx-field flex-row">
        <div class="dx-field-label">Purchase Order</div>
        <div class="dx-field-value">
          <dx-select-box [dataSource]="purchaseOrder" displayExpr="customer_purchase_order" ></dx-select-box>
        </div>
      </div>
    </div>

    <div class="dx-field">
      <dx-button (onClick)="click($event)">Filter</dx-button>
    </div>
  </div>
</div>

And .scss is like

.dx-fieldset.flex-column  {
  display: flex;
  flex-direction: column;
}
.flex-row-container {
  display: flex;
  flex-direction: row;
}
.dx-field.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.dx-select-box {
  width: 200vw;
  height: 2vw;
  float: left;
}

But the fileds are not aligned properly and I am not able to resize the selectbox size/ lable size also the alignment is little off like below

You shouldn't use `float` within a `flex` container element. https://stackoverflow.com/questions/39194630/float-does-not-work-in-a-flex-container — Jojofoulk, Aug 20 '19 at 03:45
@trx Remove the float and use `align-items: flex-end` as @Jojofoulk told. — Mehraj Khan, Aug 20 '19 at 05:59

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

The reason

So I figured out the issue is actually not because of your CSS (although using float in a flex container is still wrong, so you can just remove it) but it's purely due to the theming used by your library.

From the names of your component elements, I assume you areusing Devextreme, and from looking at your screenshot, it looks like you are using one of their (fairly recent) material themes, blue light it looks like.

The problem is what they do in the CSS with <dx-field> elements It turns out that the CSS from material themes contains:

.dx-field {
  margin: 0 0 30px 0;
}

which is fine and gives some space for fields that are placed under it BUT also contains:

.dx-field:last-of-type {
    margin: 0;
}

Because of this, the last <dx-field> will have its margin overridden to 0. This isn't wrong if the fields are placed in a column order (which is probably what they assume would always be the case), but in your case, you're in a flex container with a row direction, so losing that margin looks weird.

The Fix

To fix it you can change the last element css, something like:

dx-field:last-of-type {
    margin: 0 0 30px 0;
}

Alternatively you can just remove the bottom margin to all elements:

dx-field {
    margin: 0;
}

Fun fact, the default Devextreme themes don't have this issue, so it's probably some weird Material Theme Guidelines

Alignment of fields not working as expected

1 Answers1

The reason

The Fix