CODEWITHSUNDEEP
javascriptjqueryhtmlcssforms
Patrick
Patrick

Reputation: 3450

How to create a two vertically stacked buttons next to a text input

I am trying to figure out how to vertically stack two buttons (up and down) next to the input they influence. 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 the up and down chevrons. I am unsure as how to get the two buttons to stack. Once I do I will tie in the JS to control the text input value (already written).

An example of what I am working with can be found here: http://codepen.io/anon/pen/WvydgZ

I have plugged in jQuery, jQuery UI, and FontAwesome.

The desired affect is this: enter image description here

Any ideas?

Upvotes: 3

Views: 632

Answers (3)

ODelibalta
ODelibalta

Reputation: 2244

I think you should use a grid system if you can to accomplish tasks like this for you. In addition, try not to use <span> unless you want simple inline content. I did some tweaking trying to stay to your original as much 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>

Upvotes: 4

Joe
Joe

Reputation: 88

Try using a list as a wrapper for the buttons. An example building off of 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;
}

http://codepen.io/anon/pen/KpeZOe

Upvotes: 1

depperm
depperm

Reputation: 10746

One option is place the input and buttons in a table. The buttons should have display:block. Like so

<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>

demo

Upvotes: 0

Related Questions