Bootstrap color picker bigger - html

Question

Is there any way to make the bootstrap color picker box bigger ?
I looked through it's css but i couldn't find where is setting the box height and weight.
I am using this color picker : Stefan Petre's Bootstrap Colorpicker

Answer 1

Assuming you're using the HTML5 native color picker, you can customize it with CSS :
input[type="color"].custom {
padding: 0;
border: none;
height: 50px;
width: 50px;
vertical-align: middle;
}
<div class="container">
<form role="form">
<div class="form-group">
<label for="cp1">HTML5 native Color Picker :</label><br>
<input type="color" name="cp1" value="#9b59b6">
</div>
<div class="form-group">
<label for="cp2">CSS Customized Color Picker :</label><br>
<input type="color" name="cp2" value="#9b59b6" class="custom">
</div>
</form>
</div>
EDIT (using bootstrap-colorpicker.js plugin)
As the width is hard-coded in the plugin, you'll need to modify the plugin itself. Here's the full JS code which will allow you to simply set your desired size, without changing the original CSS (just modify CPSize value in the first lines) :
/* =========================================================
* bootstrap-colorpicker.js [edited]
* http://www.eyecon.ro/bootstrap-colorpicker
* =========================================================
* Copyright 2012 Stefan Petre
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================= */
!function( $ ) {
// Set your desired size here :
var CPSize = 300;
// Color object
var Color = function(val) {
this.value = {
h: 1,
s: 1,
b: 1,
a: 1
};
this.setColor(val);
};
Color.prototype = {
constructor: Color,
//parse a string to HSB
setColor: function(val){
val = val.toLowerCase();
var that = this;
$.each( CPGlobal.stringParsers, function( i, parser ) {
var match = parser.re.exec( val ),
values = match && parser.parse( match ),
space = parser.space||'rgba';
if ( values ) {
if (space === 'hsla') {
that.value = CPGlobal.RGBtoHSB.apply(null, CPGlobal.HSLtoRGB.apply(null, values));
} else {
that.value = CPGlobal.RGBtoHSB.apply(null, values);
}
return false;
}
});
},
setHue: function(h) {
this.value.h = 1- h;
},
setSaturation: function(s) {
this.value.s = s;
},
setLightness: function(b) {
this.value.b = 1- b;
},
setAlpha: function(a) {
this.value.a = parseInt((1 - a)*100, 10)/100;
},
// HSBtoRGB from RaphaelJS
// https://github.com/DmitryBaranovskiy/raphael/
toRGB: function(h, s, b, a) {
if (!h) {
h = this.value.h;
s = this.value.s;
b = this.value.b;
}
h *= 360;
var R, G, B, X, C;
h = (h % 360) / 60;
C = b * s;
X = C * (1 - Math.abs(h % 2 - 1));
R = G = B = b - C;
h = ~~h;
R += [C, X, 0, 0, X, C][h];
G += [X, C, C, X, 0, 0][h];
B += [0, 0, X, C, C, X][h];
return {
r: Math.round(R*255),
g: Math.round(G*255),
b: Math.round(B*255),
a: a||this.value.a
};
},
toHex: function(h, s, b, a){
var rgb = this.toRGB(h, s, b, a);
return '#'+((1 << 24) | (parseInt(rgb.r) << 16) | (parseInt(rgb.g) << 8) | parseInt(rgb.b)).toString(16).substr(1);
},
toHSL: function(h, s, b, a){
if (!h) {
h = this.value.h;
s = this.value.s;
b = this.value.b;
}
var H = h,
L = (2 - s) * b,
S = s * b;
if (L > 0 && L <= 1) {
S /= L;
} else {
S /= 2 - L;
}
L /= 2;
if (S > 1) {
S = 1;
}
return {
h: H,
s: S,
l: L,
a: a||this.value.a
};
}
};
// Picker object
var Colorpicker = function(element, options){
this.element = $(element);
var format = options.format||this.element.data('color-format')||'hex';
this.format = CPGlobal.translateFormats[format];
this.isInput = this.element.is('input');
this.component = this.element.is('.color') ? this.element.find('.add-on') : false;
this.picker = $(CPGlobal.template)
.appendTo('body')
.on('mousedown', $.proxy(this.mousedown, this));
if (this.isInput) {
this.element.on({
'focus': $.proxy(this.show, this),
'keyup': $.proxy(this.update, this)
});
} else if (this.component){
this.component.on({
'click': $.proxy(this.show, this)
});
} else {
this.element.on({
'click': $.proxy(this.show, this)
});
}
if (format === 'rgba' || format === 'hsla') {
this.picker.addClass('alpha');
this.alpha = this.picker.find('.colorpicker-alpha')[0].style;
}
if (this.component){
this.picker.find('.colorpicker-color').hide();
this.preview = this.element.find('i')[0].style;
} else {
this.preview = this.picker.find('div:last')[0].style;
}
this.base = this.picker.find('div:first')[0].style;
this.update();
};
Colorpicker.prototype = {
constructor: Colorpicker,
show: function(e) {
this.picker.show();
this.height = this.component ? this.component.outerHeight() : this.element.outerHeight();
this.place();
$(window).on('resize', $.proxy(this.place, this));
if (!this.isInput) {
if (e) {
e.stopPropagation();
e.preventDefault();
}
}
$(document).on({
'mousedown': $.proxy(this.hide, this)
});
this.element.trigger({
type: 'show',
color: this.color
});
},
update: function(){
this.color = new Color(this.isInput ? this.element.prop('value') : this.element.data('color'));
this.picker.find('i')
.eq(0).css({left: this.color.value.s*100, top: CPSize - this.color.value.b*100}).end()
.eq(1).css('top', CPSize * (1 - this.color.value.h)).end()
.eq(2).css('top', CPSize * (1 - this.color.value.a));
this.previewColor();
},
setValue: function(newColor) {
this.color = new Color(newColor);
this.picker.find('i')
.eq(0).css({left: this.color.value.s*100, top: CPSize - this.color.value.b*100}).end()
.eq(1).css('top', CPSize * (1 - this.color.value.h)).end()
.eq(2).css('top', CPSize * (1 - this.color.value.a));
this.previewColor();
this.element.trigger({
type: 'changeColor',
color: this.color
});
},
hide: function(){
this.picker.hide();
$(window).off('resize', this.place);
if (!this.isInput) {
$(document).off({
'mousedown': this.hide
});
if (this.component){
this.element.find('input').prop('value', this.format.call(this));
}
this.element.data('color', this.format.call(this));
} else {
this.element.prop('value', this.format.call(this));
}
this.element.trigger({
type: 'hide',
color: this.color
});
},
place: function(){
var offset = this.component ? this.component.offset() : this.element.offset();
this.picker.css({
top: offset.top + this.height,
left: offset.left
});
},
//preview color change
previewColor: function(){
try {
this.preview.backgroundColor = this.format.call(this);
} catch(e) {
this.preview.backgroundColor = this.color.toHex();
}
//set the color for brightness/saturation slider
this.base.backgroundColor = this.color.toHex(this.color.value.h, 1, 1, 1);
//set te color for alpha slider
if (this.alpha) {
this.alpha.backgroundColor = this.color.toHex();
}
},
pointer: null,
slider: null,
mousedown: function(e){
e.stopPropagation();
e.preventDefault();
var target = $(e.target);
//detect the slider and set the limits and callbacks
var zone = target.closest('div');
if (!zone.is('.colorpicker')) {
if (zone.is('.colorpicker-saturation')) {
this.slider = $.extend({}, CPGlobal.sliders.saturation);
}
else if (zone.is('.colorpicker-hue')) {
this.slider = $.extend({}, CPGlobal.sliders.hue);
}
else if (zone.is('.colorpicker-alpha')) {
this.slider = $.extend({}, CPGlobal.sliders.alpha);
} else {
return false;
}
var offset = zone.offset();
//reference to knob's style
this.slider.knob = zone.find('i')[0].style;
this.slider.left = e.pageX - offset.left;
this.slider.top = e.pageY - offset.top;
this.pointer = {
left: e.pageX,
top: e.pageY
};
//trigger mousemove to move the knob to the current position
$(document).on({
mousemove: $.proxy(this.mousemove, this),
mouseup: $.proxy(this.mouseup, this)
}).trigger('mousemove');
}
return false;
},
mousemove: function(e){
e.stopPropagation();
e.preventDefault();
var left = Math.max(
0,
Math.min(
this.slider.maxLeft,
this.slider.left + ((e.pageX||this.pointer.left) - this.pointer.left)
)
);
var top = Math.max(
0,
Math.min(
this.slider.maxTop,
this.slider.top + ((e.pageY||this.pointer.top) - this.pointer.top)
)
);
this.slider.knob.left = left + 'px';
this.slider.knob.top = top + 'px';
if (this.slider.callLeft) {
this.color[this.slider.callLeft].call(this.color, left/CPSize);
}
if (this.slider.callTop) {
this.color[this.slider.callTop].call(this.color, top/CPSize);
}
this.previewColor();
this.element.trigger({
type: 'changeColor',
color: this.color
});
return false;
},
mouseup: function(e){
e.stopPropagation();
e.preventDefault();
$(document).off({
mousemove: this.mousemove,
mouseup: this.mouseup
});
return false;
}
}
$.fn.colorpicker = function ( option, val ) {
return this.each(function () {
var $this = $(this),
data = $this.data('colorpicker'),
options = typeof option === 'object' && option;
if (!data) {
$this.data('colorpicker', (data = new Colorpicker(this, $.extend({}, $.fn.colorpicker.defaults,options))));
}
if (typeof option === 'string') data[option](val);
});
};
$.fn.colorpicker.defaults = {
};
$.fn.colorpicker.Constructor = Colorpicker;
var CPGlobal = {
// translate a format from Color object to a string
translateFormats: {
'rgb': function(){
var rgb = this.color.toRGB();
return 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')';
},
'rgba': function(){
var rgb = this.color.toRGB();
return 'rgba('+rgb.r+','+rgb.g+','+rgb.b+','+rgb.a+')';
},
'hsl': function(){
var hsl = this.color.toHSL();
return 'hsl('+Math.round(hsl.h*360)+','+Math.round(hsl.s*100)+'%,'+Math.round(hsl.l*100)+'%)';
},
'hsla': function(){
var hsl = this.color.toHSL();
return 'hsla('+Math.round(hsl.h*360)+','+Math.round(hsl.s*100)+'%,'+Math.round(hsl.l*100)+'%,'+hsl.a+')';
},
'hex': function(){
return this.color.toHex();
}
},
sliders: {
saturation: {
maxLeft: CPSize,
maxTop: CPSize,
callLeft: 'setSaturation',
callTop: 'setLightness'
},
hue: {
maxLeft: 0,
maxTop: CPSize,
callLeft: false,
callTop: 'setHue'
},
alpha: {
maxLeft: 0,
maxTop: CPSize,
callLeft: false,
callTop: 'setAlpha'
}
},
// HSBtoRGB from RaphaelJS
// https://github.com/DmitryBaranovskiy/raphael/
RGBtoHSB: function (r, g, b, a){
r /= 255;
g /= 255;
b /= 255;
var H, S, V, C;
V = Math.max(r, g, b);
C = V - Math.min(r, g, b);
H = (C === 0 ? null :
V == r ? (g - b) / C :
V == g ? (b - r) / C + 2 :
(r - g) / C + 4
);
H = ((H + 360) % 6) * 60 / 360;
S = C === 0 ? 0 : C / V;
return {h: H||1, s: S, b: V, a: a||1};
},
HueToRGB: function (p, q, h) {
if (h < 0)
h += 1;
else if (h > 1)
h -= 1;
if ((h * 6) < 1)
return p + (q - p) * h * 6;
else if ((h * 2) < 1)
return q;
else if ((h * 3) < 2)
return p + (q - p) * ((2 / 3) - h) * 6;
else
return p;
},
HSLtoRGB: function (h, s, l, a)
{
if (s < 0) {
s = 0;
}
var q;
if (l <= 0.5) {
q = l * (1 + s);
} else {
q = l + s - (l * s);
}
var p = 2 * l - q;
var tr = h + (1 / 3);
var tg = h;
var tb = h - (1 / 3);
var r = Math.round(CPGlobal.HueToRGB(p, q, tr) * 255);
var g = Math.round(CPGlobal.HueToRGB(p, q, tg) * 255);
var b = Math.round(CPGlobal.HueToRGB(p, q, tb) * 255);
return [r, g, b, a||1];
},
// a set of RE's that can match strings and generate color tuples.
// from John Resig color plugin
// https://github.com/jquery/jquery-color/
stringParsers: [
{
re: /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
parse: function( execResult ) {
return [
execResult[ 1 ],
execResult[ 2 ],
execResult[ 3 ],
execResult[ 4 ]
];
}
}, {
re: /rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
parse: function( execResult ) {
return [
2.55 * execResult[1],
2.55 * execResult[2],
2.55 * execResult[3],
execResult[ 4 ]
];
}
}, {
re: /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/,
parse: function( execResult ) {
return [
parseInt( execResult[ 1 ], 16 ),
parseInt( execResult[ 2 ], 16 ),
parseInt( execResult[ 3 ], 16 )
];
}
}, {
re: /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/,
parse: function( execResult ) {
return [
parseInt( execResult[ 1 ] + execResult[ 1 ], 16 ),
parseInt( execResult[ 2 ] + execResult[ 2 ], 16 ),
parseInt( execResult[ 3 ] + execResult[ 3 ], 16 )
];
}
}, {
re: /hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
space: 'hsla',
parse: function( execResult ) {
return [
execResult[1]/360,
execResult[2] / 100,
execResult[3] / 100,
execResult[4]
];
}
}
],
template: '<div class="colorpicker dropdown-menu">'+
'<div class="colorpicker-saturation" style="width:'+CPSize+'px;height:'+CPSize+'px"><i><b></b></i></div>'+
'<div class="colorpicker-hue" style="height:'+CPSize+'px"><i></i></div>'+
'<div class="colorpicker-alpha" style="height:'+CPSize+'px"><i></i></div>'+
'<div class="colorpicker-color"><div /></div>'+
'</div>'
};
}( window.jQuery );

Answer 2

For Bootstrap Color Picker (based on Stefan Petre's Bootstrap Colorpicker) I needed to edit the MaxTop and MaxLeft values in defaults section of the code file. There is a section for regular or horizontal. Set the values to match your css height and width.
sliders: {
saturation: {
maxLeft: 100,
maxTop: 100,
callLeft: 'setSaturation',
callTop: 'setBrightness'
},
hue: {
maxLeft: 0,
maxTop: 100,
callLeft: false,
callTop: 'setHue'
},
alpha: {
maxLeft: 0,
maxTop: 100,
callLeft: false,
callTop: 'setAlpha'
}
},
slidersHorz: {
saturation: {
maxLeft: 100,
maxTop: 100,
callLeft: 'setSaturation',
callTop: 'setBrightness'
},
hue: {
maxLeft: 100,
maxTop: 0,
callLeft: 'setHue',
callTop: false
},
alpha: {
maxLeft: 100,
maxTop: 0,
callLeft: 'setAlpha',
callTop: false
}
}

Answer 3

If you want to make each instance of colorpicker bigger, change the js and css file of bootstrap pugin.
Change the below mentioned functions in bootstrap-colorpicker.js:
/** * Vertical sliders configuration * #type {Object} */
sliders: {
saturation: {
maxLeft: 200,
maxTop: 200,
callLeft: 'setSaturationRatio',
callTop: 'setBrightnessRatio'
},
hue: {
maxLeft: 0,
maxTop: 200,
callLeft: false,
callTop: 'setHueRatio'
},
alpha: {
maxLeft: 0,
maxTop: 200,
callLeft: false,
callTop: 'setAlphaRatio'
}
},
/**
* Horizontal sliders configuration
* #type {Object}
*/
slidersHorz: {
saturation: {
maxLeft: 200,
maxTop: 200,
callLeft: 'setSaturationRatio',
callTop: 'setBrightnessRatio'
},
hue: {
maxLeft: 200,
maxTop: 0,
callLeft: 'setHueRatio',
callTop: false
},
alpha: {
maxLeft: 200,
maxTop: 0,
callLeft: 'setAlphaRatio',
callTop: false
}
}
Changes in bootstrap-colorpicker.css
.colorpicker-saturation{
width: 100px;
height: 100px;
background-image: url('');
}
.colorpicker-hue, .colorpicker-alpha {
width: 15px;
height: 100px;
float: left;
cursor: row-resize;
margin-left: 4px;
margin-bottom: 4px;
}
.colorpicker.colorpicker-horizontal.colorpicker-bar {
width: 100px;
}
.colorpicker.colorpicker-horizontal.colorpicker-hue.colorpicker-guide,
.colorpicker.colorpicker-horizontal.colorpicker-alpha.colorpicker
- guide {
display: block;
height: 15px;
background: #ffffff;
position: absolute;
top: 0;
left: 0;
width: 1px;
border: none;
margin-top: 0;
}
.colorpicker-bar-horizontal {
height: 15px;
margin: 0 0 4px 0;
float: left;
width: 100px;
}
.colorpicker-bar {
height: 15px;
margin: 5px 0 0 0;
clear: both;
text-align: center;
font-size: 10px;
}
Same has been explained here.