Varun Nuthalapati Varun Nuthalapati - 4 months ago 10
HTML Question

Adjusting Buttons and Text Field in a Div

I'm trying to develop a Integer Number Field. I've got it working but the styling is somewhat creating a problem. I'm using Glyphicons Plus and Minus to act as increment and decrement functionalities and input text field to display the Integer number.

I'm not able to adjust the Minus Glyphicon to the height of the div.
The working code: http://jsfiddle.net/nvarun123/fv4jxo4t/26/

HTML code:

<div>
<a>
<button (click)="decrement()" class="btn btn-primary">
<span><i class="glyphicon glyphicon-minus" ></i></span>
</button>
</a>
<input type="text" style="width:45%;" [(ngModel)]="count">
<a>
<button (click)="increment()" class="btn btn-primary" style="float: right;">
<span><i class="glyphicon glyphicon-plus" ></i></span>
</button>
</a>
</div>


CSS code:

div {
position:relative;
border: 1px solid #CACEDB;
width: 162px;
height:38px;
overflow: hidden;
white-space: nowrap;
border-radius:3px;
}
input{
text-align: center;
height:100%;
width:100%;
border:none;
}
input:focus{
outline: none;
}
button
{
-webkit-appearance: none;
outline: none;
height:100%;
border:none;
vertical-align:middle;
}

button:active {
background-color: #015191;
}

Answer

Your minus button needs a float:left :

 <div> 
    <a>
        <button (click)="decrement()" class="btn btn-primary" style="float: left;">
            <span><i class="glyphicon glyphicon-minus" ></i></span>
        </button>
    </a>
    <input type="text" style="width:45%;" [(ngModel)]="count">
    <a>
        <button (click)="increment()" class="btn btn-primary" style="float: right;">
            <span><i class="glyphicon glyphicon-plus" ></i></span>
        </button>
    </a>
</div>
Comments