CODEWITHSUNDEEP
csstwitter-bootstrap
Maximus
Maximus

Reputation: 2976

Convert Bootstrap 2.3.2 & jQuery-Spinner to work with Bootstrap 3.*

I am trying to convert xixilive's jQuery Spinner Plugin that uses Bootstrap 2.3.2 code into bootstrap 3.* Unfortunately it's not working as it should be, along with no JavaScript errors, so I believe it's just a CSS issue.

Here is what I have done so far:

HTML/CSS

<div class="input-group spinner" data-trigger="spinner">
    <input type="text" value="0" 
                       data-min="0" 
                       data-max="10" 
                       name="spinner" 
                       id="spinner" 
                       data-rule="quantity" readonly />

    <span class="input-group-btn"> 
        <!-- Up arrow -->
        <a href="javascript:;" class="spin-up" data-spin="up">
            <i class="fa fa-sort-up"></i>
        </a>
        <!-- Down arrow -->
        <a href="javascript:;" class="spin-down" data-spin="down">
            <i class="fa fa-sort-down"></i>
        </a>
    </span>
</div>

Expected output

enter image description here

Demo Fiddle: http://jsfiddle.net/DAS3K/

Upvotes: 2

Views: 3617

Answers (2)

Maximus
Maximus

Reputation: 2976

I just solved it by myself. Here is the code if anyone is looking for solution

Replace bootstrap-spinner.css file with this one:

.spinner .input-group-btn {
    padding: 2px
}

.spinner .input-group-btn a.spin-up, .spinner .input-group-btn a.spin-down {
    height: 10px;
    overflow: hidden;
    display: block;
    text-align: center;
    position: relative;
    color: #999
}

.spinner .input-group-btn a.spin-up .fa-sort-down, .spinner .input-group-btn a.spin-down .fa-sort-down {
    position: relative;
    top: -9px
}

.spinner .input-group-btn a.spin-up:hover, .spinner .input-group-btn a.spin-down:hover {
    color: #555
}

.spinner input {
    width: 4em;
    text-align: center;
    font-size: 12px;
    border-radius: 4px 0 0 4px;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;

    line-height: 20px;
}

.spinner .input-group-btn {
    background-color: #EEEEEE;
    border: 1px solid #CCCCCC;
    height: 20px;
    line-height: 20px;
    min-width: 14px;
    padding: 4px 5px;
    text-align: center;
    text-shadow: 0 1px 0 #FFFFFF;
    width: auto;
}

.spinner .input-group-btn a:focus {color: #999 !important; }

and use following HTML code

<div class="col-sm-1">
    <div class="input-group spinner" data-trigger="spinner">
        <input type="text" class="form-control" value="0" data-min="0" data-max="10" name="spinner" id="spinner" data-rule="quantity" >
        <span class="input-group-btn">
            <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-sort-desc"></i></a>
            <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-sort-down"></i></a>
        </span>
    </div>
</div>

If you use to want use glyphicon instead of font-awesome then replace fa and fa-xxx classes in HTML and bootstrap.spinner.css file as well.

Upvotes: 3

MackieeE
MackieeE

Reputation: 11862

You could:

  • Wrap the buttons into a bootstrap add-on
  • Switch icon to glyphicon for the icon spinners, there's no direct suitable change though for the old to new icons thus I've adjusted for chevrons.
  • Swap input-group-btn to input-group-addon

This would produce HTML a little like:

<div class="input-append spinner" data-trigger="spinner">
    <div class="input-group">
        <input type="text" id="spinner-input" class="form-control" value="1" data-rule="quantity" /> 
        <span class="input-group-addon">
             <a href="javascript:;" class="spin-up spin-control" data-spin="down"><i class="glyphicon glyphicon-chevron-up"></i></a>
                  <br />
             <a href="javascript:;" class="spin-down spin-control" data-spin="up"><i class="glyphicon glyphicon-chevron-down"></i></a>
        </span>

    </div>
</div>

I've had apply some extra CSS rules and the linebreak for the buttons could be handled instead with mini columns instead! but I hope that gives you an head-start regardless!

Result:

enter image description here

Demo Fiddle: http://jsfiddle.net/792hq/

Upvotes: 1

Related Questions