I attempted to create a component similar to the input-group in bootstrap. I opted not to use the default input-group class of bootstrap because it doesn't allow for adding multiple buttons and input elements in the input group addon. Therefore, I decided to create a custom input-group using the display-table property. However, when I implemented this property, some extra space was added to the top in the buttons section.
My goal is to align the input and counter components on the same line.
HTML Part
<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;
}
For more information, please visit my StackBlitz project.