отображать таблицу, занимающую дополнительное место в верхней части поля

Question

Я попытался создать один компонент, похожий на input-group в начальной загрузке.Причина, по которой я не использовал класс начальной загрузки группы начальной загрузки, заключается в том, что по умолчанию я не могу добавить несколько кнопок и элемент ввода в аддон группы ввода.поэтому я решил создать пользовательскую группу ввода, используя свойство display-table, но когда я использую это свойство, в секции кнопок добавляется дополнительное пространство сверху.

Мне нужно выровнять компонент input и counter в одной строке.

HTML-часть

 <div class="product-order-form" matAutocompleteOrigin #origin="matAutocompleteOrigin">
    <div class="product-inputGroup tableElem">
        <div class="tableRow">
            <input class="form-control tableCell" type="text" matInput [formControl]="myControl" [matAutocomplete]="auto" [matAutocompleteConnectedTo]="origin">
            <div class="counter tableCell">
                <div class="counterContainer">
                    <div class="value-button" id="decrease" value="Decrease Value">-</div>
                    <input type="text" id="number" value="0" />
                    <div class="value-button" id="increase" value="Increase Value">+</div>
                </div>


            </div>
        </div>


    </div>
 </div>

CSS:

.tableElem{
  display:table;
  width:100%;
}

.tableRow{
  display:table-row;
  width:100%;
}
.tableCell{
  display:table-cell;
}

.product-order-form{
  height: 30px;
}
.counterContainer {
  width: 150px;
  height:30px;  
}

.value-button{
    text-align: center;
    height: 100%;
    width: 50px;
    background: lightgray;
    padding: 5px;
    box-sizing: border-box;
    float: left;
}

.value-button:hover {
  cursor: pointer;
}



input#number{
    text-align: center;
    height: 100%;
    border: none;
    width: 50px;   
    float: left;   
    box-sizing: border-box;
    border-top: 0.5px solid lightgray;
    border-bottom: 0.5px solid lightgray;
}

вот мой stackblitz

Answer 1

Здесь есть две проблемы:

1. .product-order-form устанавливает высоту 30px, что означает, что она короче, чем некоторые из его детей / братьев и сестер.Это может вызвать проблемы (попробуйте добавить overflow:hidden, чтобы увидеть его в действии)
2. .tableCell не имеет vertical-align, что означает, что он будет позиционироваться в верхнем компоненте o / t.Попробуйте добавить vertical-align: middle, и все должно работать нормально

TL; DR

.tableCell[_ngcontent-c2] {
    display: table-cell;
    vertical-align: middle;
}
.product-order-form[_ngcontent-c2]{
  height: auto;
}

должно сработать:)