sync options + fixed markup

Author: Eugene Tupikov

examples/views/tabular-input.php

@@ -23,19 +23,25 @@
     'models' => $models,
     'modelClass' => Item::class,
     'rendererClass' => ListRenderer::class,
+    'cloneButton' => true,
     'min' => 0,
+    'addButtonPosition' => [
+        TabularInput::POS_HEADER,
+        TabularInput::POS_FOOTER,
+        TabularInput::POS_ROW
+    ],
     'layoutConfig' => [
-        'offsetClass' => 'col-sm-offset-4',
-        'labelClass' => 'col-sm-4',
-        'wrapperClass' => 'col-sm-4',
-        'errorClass' => 'col-sm-4'
+        'offsetClass'   => 'col-sm-offset-4',
+        'labelClass'    => 'col-sm-2',
+        'wrapperClass'  => 'col-sm-10',
+        'errorClass'    => 'col-sm-4'
     ],
     'attributeOptions' => [
-        'enableAjaxValidation' => true,
+        'enableAjaxValidation'   => true,
         'enableClientValidation' => false,
-        'validateOnChange' => false,
-        'validateOnSubmit' => true,
-        'validateOnBlur' => false,
+        'validateOnChange'       => false,
+        'validateOnSubmit'       => true,
+        'validateOnBlur'         => false,
     ],
     'form' => $form,
     'columns' => [

src/MultipleInput.php

@@ -160,6 +160,15 @@ class MultipleInput extends InputWidget
      */
     public $extraButtons;
 
+    /**
+     * @var array CSS grid classes for horizontal layout. This must be an array with these keys:
+     *  - 'offsetClass' the offset grid class to append to the wrapper if no label is rendered
+     *  - 'labelClass' the label grid class
+     *  - 'wrapperClass' the wrapper grid class
+     *  - 'errorClass' the error grid class
+     */
+    public $layoutConfig = [];
+
     /**
      * @var array
      * --icon library classes mapped for various controls
@@ -283,7 +292,10 @@ private function createRenderer()
         /**
          * set default icon map
          */
-        $iconmap = array_key_exists($this->iconSource, $this->iconMap) ? $this->iconMap[$this->iconSource] : $this->iconMap['glyphicons'];
+        $iconMap = array_key_exists($this->iconSource, $this->iconMap)
+            ? $this->iconMap[$this->iconSource]
+            : $this->iconMap['glyphicons'];
+
         $config = [
             'id'                => $this->getId(),
             'columns'           => $this->columns,
@@ -301,7 +313,8 @@ private function createRenderer()
             'enableError'       => $this->enableError,
             'cloneButton'       => $this->cloneButton,
             'extraButtons'      => $this->extraButtons,
-            'iconMap'           => $iconmap,
+            'layoutConfig'      => $this->layoutConfig,
+            'iconMap'           => $iconMap,
         ];
 
         if ($this->removeButtonOptions !== null) {

src/TabularInput.php

@@ -132,6 +132,20 @@ class TabularInput extends Widget
      */
     public $cloneButton = false;
 
+    /**
+     * @var string|\Closure the HTML content that will be rendered after the buttons.
+     *
+     * ```php
+     * function ($model, $index, $context)
+     * ```
+     *
+     * - `$model`: the current data model being rendered
+     * - `$index`: the zero-based index of the data model in the model array
+     * - `$context`: the MultipleInput widget object
+     *
+     */
+    public $extraButtons;
+
     /**
      * @var string a class of model which is used to render the widget.
      * You have to specify this property in case you set `min` property to 0 (when you want to allow an empty list)
@@ -227,7 +241,10 @@ private function createRenderer()
         /**
          * set default icon map
          */
-        $iconmap = array_key_exists($this->iconSource, $this->iconMap) ? $this->iconMap[$this->iconSource] : $this->iconMap['glyphicons'];
+        $iconMap = array_key_exists($this->iconSource, $this->iconMap)
+            ? $this->iconMap[$this->iconSource]
+            : $this->iconMap['glyphicons'];
+
         $config = [
             'id'                => $this->getId(),
             'columns'           => $this->columns,
@@ -243,8 +260,10 @@ private function createRenderer()
             'form'              => $this->form,
             'sortable'          => $this->sortable,
             'enableError'       => $this->enableError,
+            'cloneButton'       => $this->cloneButton,
+            'extraButtons'      => $this->extraButtons,
             'layoutConfig'      => $this->layoutConfig,
-            'iconMap'           => $iconmap,
+            'iconMap'           => $iconMap,
         ];
 
         if ($this->removeButtonOptions !== null) {

src/assets/src/css/multiple-input.css

@@ -1,56 +1,85 @@
-.multiple-input-list {}
+.multiple-input-list {
+}
+
 .multiple-input-list__item {
     margin-bottom: 5px;
 }
+
 .multiple-input-list__input {
     display: inline-block;
     width: 80%;
 }
+
 .multiple-input-list.no-buttons .multiple-input-list__input {
     display: block;
     width: 100%;
 }
+
 table.multiple-input-list {
     margin: 0;
 }
+
 table.multiple-input-list.table-renderer tbody tr > td {
     border: 0 !important;
 }
+
 table.multiple-input-list.table-renderer tr > td:first-child {
     padding-left: 0;
 }
+
 table.multiple-input-list.table-renderer tr > td:last-child {
     padding-right: 0;
 }
+
 table.multiple-input-list tr > th {
     border-bottom: 1px solid #dddddd;
 }
+
 .multiple-input-list.table-renderer .form-group {
     margin: 0 !important;
 }
+
 .multiple-input-list.list-renderer .form-group {
     margin-bottom: 10px !important;
 }
+
 .multiple-input-list.table-renderer .multiple-input-list__item .label {
     display: block;
     font-size: 13px;
 }
+
 .multiple-input-list.table-renderer .list-cell__button {
     width: 40px;
 }
+
 .multiple-input-list.list-renderer .list-cell__button {
-    width: 70px;
+    width: 40px;
     text-align: right;
-    padding-right: 15px;
+    padding-right: 0;
+    padding-left: 5px;
 }
+
+.multiple-input-list.list-renderer tbody .list-cell__button .btn{
+    margin-top: 25px;
+}
+
 .multiple-input-list__item .radio,
 .multiple-input-list__item .checkbox {
     margin: 7px 0 7px 0;
 }
+
 .multiple-input-list__item .radio-list .radio,
 .multiple-input-list__item .checkbox-list .checkbox {
     margin: 0;
 }
+
 .multiple-input-list .multiple-input-list {
     margin-top: -5px;
+}
+
+@media (min-width: 768px) {
+    .multiple-input-list.list-renderer tbody .list-cell__button .btn {
+        margin-top: 0;
+    }
+
 }

src/renderers/TableRenderer.php

@@ -58,14 +58,16 @@ public function renderHeader()
             $cells[] = $this->renderHeaderCell($column);
         }
 
+
+
         if ($this->max === null || ($this->max >= 1 && $this->max !== $this->min)) {
             $button = $this->isAddButtonPositionHeader() ? $this->renderAddButton() : '';
 
-            $cells[] = $this->renderButtonHeaderCell($button);
-
             if ($this->cloneButton) {
                 $cells[] = $this->renderButtonHeaderCell();
             }
+
+            $cells[] = $this->renderButtonHeaderCell($button);
         }
 
         return Html::tag('thead', Html::tag('tr', implode("\n", $cells)));
@@ -82,8 +84,19 @@ public function renderFooter()
             return '';
         }
 
+        $columnsCount = 0;
+        foreach ($this->columns as $column) {
+            if (!$column->isHiddenInput()) {
+                $columnsCount++;
+            }
+        }
+
+        if ($this->cloneButton) {
+            $columnsCount++;
+        }
+
         $cells = [];
-        $cells[] = Html::tag('td', ' ', ['colspan' => count($this->columns)]);
+        $cells[] = Html::tag('td', ' ', ['colspan' => $columnsCount]);
         $cells[] = Html::tag('td', $this->renderAddButton(), [
             'class' => 'list-cell__button'
         ]);
@@ -203,7 +216,7 @@ private function renderRowContent($index = null, $item = null)
         if ($this->cloneButton) {
             $cells[] = $this->renderCloneColumn();
         }
-        
+
         if (!$isLastRow) {
             $cells[] = $this->renderActionColumn($index, $item);
         }