Bootstrap Input Group

[DanYoSon]

The first is with any version of bootstrap > 3.1.0 when using input groups,
I think is caused by the commits to bootstrap as a result of this issue
twbs/bootstrap#12349 for version 3.1.1
because of the added z-index: 2; the swatch is behind the input field like this

I worked around this by adding z-index:5; to .minicolors-swatch
The second seems to be with any version of bootstrap if you add an item before the input field the border radius on the left is not removed as expected like this.

This seems to be because the <input> is nested in a <div> for minicolors.
This works fine

    <div class="input-group">
        <input type="text" id="input-group" class="form-control demo" value="#ff0000"/>
        <span class="input-group-btn">
            <button class="btn btn-default" type="button">Button</button>
        </span>
    </div>

but if you add

<span class="input-group-addon">1</span>

as follows

    <div class="input-group">
        <span class="input-group-addon">1</span>
        <input type="text" id="input-group" class="form-control demo" value="#ff0000"/>
        <span class="input-group-btn">
            <button class="btn btn-default" type="button">Button</button>
        </span>
    </div>

the border is funny, I solved this by adding the following css to https://github.com/claviska/jquery-minicolors/blob/master/jquery.minicolors.css

.input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

Not sure if there is a better way of solving these problems. If these are good ways of doing it I can try and submit a PR.

[claviska]

I updated the demo to Bootstrap 3.3.1 and applied the suggested fixes to test it out. Looks good, thanks :)