How to create two vertically stacked buttons next to text input
I'm trying to figure out how to vertically stack two buttons (up and down) next to the input they affect. I want to do this with CSS and HTML.
<span class="styled-value">
<span class="multiplier-value-wrapper">
<input class="multiplier-value" type="text" value="4" name="family-size" />
</span>
</span>
<button class="btn btn-small btn-up">
<i class="fa fa-chevron-up"></i>
</button>
<button class="btn btn-small btn-down">
<i class="fa fa-chevron-down"></i>
</button>
As you can see, I am using Font Awesome for up and down chevrons. I'm not sure how to put two buttons on the stack. Once I do that, I will link with JS to control the text value entered (already written).
An example of what I'm working with can be found here: http://codepen.io/anon/pen/WvydgZ
I have included jQuery, jQuery UI and FontAwesome.
The desired affect is:
Any ideas?
source to share
I think you should use a grid system if you can accomplish tasks like this for you. Also, try not to use <span>
unless you need simple inline content. I did some tweaking trying to stay as close to your original as possible ...
.row div{
float: left;
}
.input-row{
line-height: 30px;
height: 30px;
}
input{
height: 30px;
}
button {
background-color: #4f4f4f;
border-radius: 0;
color: white;
padding: 0 4px;
}
.buttons{
width: 20px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="row">
<div class="input-row">
<div class="styled-value">
<div class="multiplier-value-wrapper">
<input class="multiplier-value" type="text" value="4" name="family-size" />
</div>
</div>
</div>
<div class="buttons">
<button class="btn btn-small btn-up">
<i class="fa fa-chevron-up"></i>
</button>
<button class="btn btn-small btn-down">
<i class="fa fa-chevron-down"></i>
</button>
</div>
</div>
source to share
Try using a list box as a wrapper for your buttons. An example of building yours:
Html
<span class="styled-value">
<span class="multiplier-value-wrapper">
<input class="multiplier-value" type="text" value="4" name="family-size"/>
</span>
</span>
<ol class="no-style-list">
<li>
<button class="btn btn-small btn-up">
<i class="fa fa-chevron-up"></i>
</button>
</li>
<li>
<button class="btn btn-small btn-down">
<i class="fa fa-chevron-down"></i>
</button>
</li>
</ol>
CSS
button {
background-color: #4f4f4f;
border-radius: 0;
color: white;
padding: 0 4px;
}
.no-style-list {
list-style-type: none;
padding-left:0;
display: inline-block;
}
source to share
One parameter is to place input
and buttons in table
. Buttons must have display:block
. Thus
<table class='content'>
<tr>
<td>
<span class="styled-value">
<span class="multiplier-value-wrapper">
<input class="multiplier-value" type="text" value="4" name="family-size" />
</span>
</span>
</td>
<td>
<div class='button-wrapper'>
<button class="btn btn-small btn-up">
<i class="fa fa-chevron-up"></i>
</button>
<button class="btn btn-small btn-down">
<i class="fa fa-chevron-down"></i>
</button>
</div>
</td>
</tr>
</table>
source to share