logo
Tags down

shadow

angular form fields side by side


By : Ahmed Higazi
Date : May 04 2020, 11:37 AM

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

enter image description here

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 :

I've refactored your HTML code  slightly so 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/



Share : facebook icon twitter icon
Related Posts Related Posts :
  • clear array after form submit
  • pass url variable to javascript
  • access data using api
  • div position fixed css
  • add horizontal line between two div
  • disable toggle button css
  • css fixed line height
  • background image not working
  • table cell border
  • text line break css
  • overlay div on div
  • text direction rtl css
  • javascript convert string to an object
  • bind inner div click to outer div
  • jquery ajax oncomplete
  • how to use promise in for loop
  • jquery get element using variable
  • javascript send textbox value
  • pass div class content to another class or id
  • css new line after element
  • css calc not working properly
  • link disabled jquery
  • sql join table to subquery
  • MS Access SQL Issue with OR AND Operators
  • set textarea value using php
  • php merge two arrays into one
  • php form with google captcha
  • update current row in php
  • php date format mysql
  • mysql pdo select query
  • php function return an array
  • PHP mysqldump database to sql file
  • display image query
  • php create array using foreach loop
  • associative array php
  • group_concat in mysql laravel
  • php array_push empty
  • mysql on update cascade not working
  • pdo insert prepared statement
  • mysql insert ignore vs on duplicate key
  • mysql insert into existing row
  • mysql multi insert query
  • mysql group by show all rows
  • php change profile image
  • combine multiple arrays into one array php
  • how to sum values in an array
  • how to get sum of the total time
  • How to Create Facebook live stream without notification using API ?
  • on button click make div visible
  • css affect another element on hover
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org