Buttons under each other next to an input text field

Question

I want to position two buttons under each other next to an input text box with vertical align middle. Here is what I did so far:

jQuery(document).ready(function($) {
  //plugin bootstrap minus and plus
  //http://jsfiddle.net/laelitenetwork/puJ6G/
  $('.btn-number').click(function(e) {
    e.preventDefault();

    fieldName = $(this).attr('data-field');
    type = $(this).attr('data-type');
    var input = $("input[name='" + fieldName + "']");
    var currentVal = parseFloat(input.val());
    if (!isNaN(currentVal)) {
      if (type == 'minus') {

        if (currentVal > input.attr('min')) {
          input.val(currentVal - 0.5).change();
        }
        if (parseFloat(input.val()) == input.attr('min')) {
          $(this).attr('disabled', true);
        }

      } else if (type == 'plus') {

        if (currentVal < input.attr('max')) {
          input.val(currentVal + 0.5).change();
        }
        if (parseFloat(input.val()) == input.attr('max')) {
          $(this).attr('disabled', true);
        }

      }
    } else {
      input.val(0);
    }
  });
  $('.input-number').focusin(function() {
    $(this).data('oldValue', $(this).val());
  });
  $('.input-number').change(function() {

    minValue = parseFloat($(this).attr('min'));
    maxValue = parseFloat($(this).attr('max'));
    valueCurrent = parseFloat($(this).val());

    name = $(this).attr('name');
    if (valueCurrent >= minValue) {
      $(".btn-number[data-type='minus'][data-field='" + name + "']").removeAttr('disabled')
    } else {
      alert('Sorry, the minimum value was reached');
      $(this).val($(this).data('oldValue'));
    }
    if (valueCurrent <= maxValue) {
      $(".btn-number[data-type='plus'][data-field='" + name + "']").removeAttr('disabled')
    } else {
      alert('Sorry, the maximum value was reached');
      $(this).val($(this).data('oldValue'));
    }


  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
  <div class="input-group">
    <input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">
    <ul class="input-group-btn">
      <li><button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
				<span class="glyphicon glyphicon-minus">-</span>
			</button></li>
      <li><button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">
				<span class="glyphicon glyphicon-plus">+</span>
			</button></li>
    </ul>
  </div>
</div>

The code is working pretty good, but I have no luck with positioning elements.

Answer 1

Create 2 divs and use float property to put them left and right.

<div class="input-group">
<div id="leftdiv" style="float:left">
    <input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">
</div>
<div id="rightdiv" style="float:right;">
    <ul class="input-group-btn">
        <li>
            <button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
                <span class="glyphicon glyphicon-minus">-</span>
            </button>
        </li>
        <li>
            <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">
                <span class="glyphicon glyphicon-plus">+</span>
            </button>
        </li>
    </ul>
</div>

Answer 2

Something like this

ul.input-group-btn {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
    vertical-align: middle;
}

jQuery(document).ready(function($) {
  //plugin bootstrap minus and plus
  //http://jsfiddle.net/laelitenetwork/puJ6G/
  $('.btn-number').click(function(e) {
    e.preventDefault();

    fieldName = $(this).attr('data-field');
    type = $(this).attr('data-type');
    var input = $("input[name='" + fieldName + "']");
    var currentVal = parseFloat(input.val());
    if (!isNaN(currentVal)) {
      if (type == 'minus') {

        if (currentVal > input.attr('min')) {
          input.val(currentVal - 0.5).change();
        }
        if (parseFloat(input.val()) == input.attr('min')) {
          $(this).attr('disabled', true);
        }

      } else if (type == 'plus') {

        if (currentVal < input.attr('max')) {
          input.val(currentVal + 0.5).change();
        }
        if (parseFloat(input.val()) == input.attr('max')) {
          $(this).attr('disabled', true);
        }

      }
    } else {
      input.val(0);
    }
  });
  $('.input-number').focusin(function() {
    $(this).data('oldValue', $(this).val());
  });
  $('.input-number').change(function() {

    minValue = parseFloat($(this).attr('min'));
    maxValue = parseFloat($(this).attr('max'));
    valueCurrent = parseFloat($(this).val());

    name = $(this).attr('name');
    if (valueCurrent >= minValue) {
      $(".btn-number[data-type='minus'][data-field='" + name + "']").removeAttr('disabled')
    } else {
      alert('Sorry, the minimum value was reached');
      $(this).val($(this).data('oldValue'));
    }
    if (valueCurrent <= maxValue) {
      $(".btn-number[data-type='plus'][data-field='" + name + "']").removeAttr('disabled')
    } else {
      alert('Sorry, the maximum value was reached');
      $(this).val($(this).data('oldValue'));
    }


  });

});

ul.input-group-btn {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
    vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
  <div class="input-group">
    <input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">
    <ul class="input-group-btn">
      <li><button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
				<span class="glyphicon glyphicon-minus">-</span>
			</button></li>
      <li><button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">
				<span class="glyphicon glyphicon-plus">+</span>
			</button></li>
    </ul>
  </div>
</div>