CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap-3
shell
shell

Reputation: 1937

Spectrum color picker addon in bootstrap form

I am trying to get the spectrum color picker into a bootstrap form on the right side.

Spectrum github:

https://github.com/bgrins/spectrum

It is not working correctly, as can be seen in this jsfiddle:

http://jsfiddle.net/b5gnupfn/

<div class="input-group">
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
  <span class="input-group-addon" id="basic-addon1">
       <input type='text' class='my_color'/>
  </span>
</div>

EDIT:

I just want it to fit neatly into the text form like with other .input-group-addon or .input-group-btn elements in an .input-group. Right now it is odd looking.

EDIT:

Fixed jsfiddle, it is now accurate regarding the issue.

Upvotes: 1

Views: 1585

Answers (2)

shell
shell

Reputation: 1937

Changing the width, height of sp-replacer, and making it equal the bootstrap form-control makes it fit correctly.

Answer: http://jsfiddle.net/94jcykcp/

.sp-replacer {
    width: 50px;
    height: 30px;
}

.form-control {
    height: 30px !important
}

Upvotes: 1

Zach P
Zach P

Reputation: 570

One possible solution is to change the .input-group-addon to .input-group-btn and add the .input-group-lg class to the entire input group. 

<div class="input-group input-group-lg">
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
   <span class="input-group-btn" id="basic-addon1">
       <input type='text' class='my_color'/>
   </span>
</div>

Here is an example fiddle: http://jsfiddle.net/b5gnupfn/1/. I am not sure if this is what you want, but it looks like it works.

Upvotes: 1

Related Questions