#2436 improve quickinput layout

metasfresh · Nov 27, 2019 · c8e8dd9 · c8e8dd9
1 parent d8cd131
commit c8e8dd9
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/src/assets/css/table.css b/src/assets/css/table.css
@@ -439,6 +439,11 @@
     align-items: center;
     flex-direction: row;
     flex:1;
+    width: 100%;
+    border: 1px solid $brand-border-color;
+    margin-left: 0;
+    margin-right: 0;
+    padding-top: 15px;
 
      > * {
         margin:0;

diff --git a/src/components/table/TableQuickInput.js b/src/components/table/TableQuickInput.js
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import cx from 'classnames';
 
 import { addNotification } from '../../actions/AppActions';
 import {
@@ -171,9 +172,15 @@ class TableQuickInput extends Component {
 
     this.rawWidgets = [];
 
+    const layoutFieldsAmt = layout ? layout.length : 2;
     const stylingLayout = [
       {
-        formGroup: `col-12 col-lg-4 col-xl-5`,
+        formGroup: cx(`col-12`, {
+          'col-lg-5': layoutFieldsAmt === 2,
+          'col-xl-6': layoutFieldsAmt === 2,
+          'col-lg-4': layoutFieldsAmt === 3,
+          'col-xl-5': layoutFieldsAmt === 3,
+        }),
         label: `col-12 col-lg-3 quickInput-label`,
         field: `col-12 col-lg-9`,
       },