CODEWITHSUNDEEP
javascripttwitter-bootstrapspinnerfuelux
David Watson
David Watson

Reputation: 3432

How to attach FuelUX Spinner to input element?

I have a FuelUX spinner taken directly from the FuelUX docs:

<!DOCTYPE html lang="en">
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://fuelcdn.com/fuelux/2.3/css/fuelux.min.css" rel="stylesheet" />
    <link href="http://fuelcdn.com/fuelux/2.3/css/fuelux-responsive.min.css" rel="stylesheet" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://fuelcdn.com/fuelux/2.3/loader.min.js" type="text/javascript"></script>
</head>
<body class="fuelux">
    <div id="MySpinner" class="spinner">
        <input type="text" class="input-mini spinner-input">
        <div class="spinner-buttons btn-group btn-group-vertical">
            <button type="button" class="btn spinner-up">
                <i class="icon-chevron-up"></i>
            </button>
            <button type="button" class="btn spinner-down">
                <i class="icon-chevron-down"></i>
            </button>
        </div>
    </div>
</body>
</html>

However, when the spinner renders in chrome, the spin buttons are detached from the input element. The spin buttons work properly incrementing and decrementing the integer in the input field. Is there anything additional I need to do to get the spin buttons to attach to the input field beside loading the javascript?

Upvotes: 1

Views: 2184

Answers (2)

Raulnd
Raulnd

Reputation: 147

You need to add class="spinbox" to a div within a class="fuelux" container.

<div class="col-lg-12 fuelux">
<div class="spinbox" data-initialize="spinbox" id="mySpinbox">
  <input type="text" class="form-control input-mini spinbox-input">
  <div class="spinbox-buttons btn-group btn-group-vertical">
    <button type="button" class="btn btn-default spinbox-up btn-xs">
      <span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
    </button>
    <button type="button" class="btn btn-default spinbox-down btn-xs">
      <span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
    </button>
  </div>
</div>
</div>

Upvotes: 0

Adam Alexander
Adam Alexander

Reputation: 15180

Maybe you're just missing the CSS? You can find the details for everything you need here:

https://github.com/ExactTarget/fuelux/wiki/Using-Fuel-UX

Upvotes: 0

Related Questions