Angular - Show fields side by side

Question

I am trying to show the fields in the angular side by side no matter what I do it is still showing like below

And below is my html component

<div id="report-prj-search">
   <div class="dx-fieldset" >
      <div class="dx-field">
         <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">
         <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 class="dx-field">
         <dx-button (onClick)="click($event)">Filter</dx-button>
      </div>
   </div>
</div>

Answer 1

I've refactored your HTML slightly so that you can use CSS Flexbox:

<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">
          <select></select>
        </div>
      </div>
      <div class="dx-field flex-row">
        <div class="dx-field-label">Purchase Order</div>
        <div class="dx-field-value">
          <select></select>
        </div>
      </div>
    </div>
    <div class="dx-field">
      <button (onClick)="click($event)">Filter</button>
    </div>
  </div>
</div>

Use Flexbox in your CSS:

.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;
}

Here's the flexbox guide that I've used several times in the past:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

您需要将组件样式设置为同一行中的某种组件，例如display: inline或display: flex和flex-direction: row或display: inline-block的包装器！