Post
Ask Question

Change The Size Of Bootstrap Colorpicker

The colorpicker documentation mentions that you have to define the slider and class properties while initializing the colorpicker for making it bigger. In this way, you don't have to make changes during the colorpicker initialization. You make your change once, and it will work for every initialization.
 
For making the colorpicker larger, you have to find the below-mentioned classes in the bootstrap-colorpicker.css file and replace the properties according to below-mentioned styles. This will also work in responsive UI.
 

Changes in bootstrap-colorpicker.css

 
Note
Width and height should be same in each class.
  1. .colorpicker - saturation {    
  2.     width: 100 px;    
  3.     height: 100 px;    
  4.     background - image: url...........    
  5. }.colorpicker - hue, .colorpicker - alpha {    
  6.     width: 15 px;    
  7.     height: 100 px;    
  8.     float: left;    
  9.     cursor: row - resize;    
  10.     margin - left: 4 px;    
  11.     margin - bottom: 4 px;    
  12. }.colorpicker.colorpicker - horizontal.colorpicker - bar {    
  13.     width: 100 px;    
  14. }.colorpicker.colorpicker - horizontal.colorpicker - hue.colorpicker - guide, .colorpicker.colorpicker - horizontal.colorpicker - alpha.colorpicker - guide {    
  15.     display: block;    
  16.     height: 15 px;    
  17.     background: #ffffff;    
  18.     position: absolute;    
  19.     top: 0;    
  20.     left: 0;    
  21.     width: 1 px;    
  22.     border: none;    
  23.     margin - top: 0;    
  24. }.colorpicker - bar - horizontal {    
  25.     height: 15 px;    
  26.     margin: 0 0 4 px 0;    
  27.     float: left;    
  28.     width: 100 px;    
  29. }.colorpicker - bar {    
  30.     height: 15 px;    
  31.     margin: 5 px 0 0 0;    
  32.     clear: both;    
  33.     text - align: center;    
  34.     font - size: 10 px;    
  35. }    
Change the below mentioned functions in  bootstrap-colorpicker.js:
  1. /** 
  2.  * Vertical sliders configuration 
  3.  * @type {Object} 
  4.  */  
  5. sliders: {  
  6.         saturation: {  
  7.             maxLeft: 200,  
  8.             maxTop: 200,  
  9.             callLeft: 'setSaturationRatio',  
  10.             callTop: 'setBrightnessRatio'  
  11.         },  
  12.         hue: {  
  13.             maxLeft: 0,  
  14.             maxTop: 200,  
  15.             callLeft: false,  
  16.             callTop: 'setHueRatio'  
  17.         },  
  18.         alpha: {  
  19.             maxLeft: 0,  
  20.             maxTop: 200,  
  21.             callLeft: false,  
  22.             callTop: 'setAlphaRatio'  
  23.         }  
  24.     },  
  25.     /** 
  26.      * Horizontal sliders configuration 
  27.      * @type {Object} 
  28.      */  
  29.     slidersHorz: {  
  30.         saturation: {  
  31.             maxLeft: 200,  
  32.             maxTop: 200,  
  33.             callLeft: 'setSaturationRatio',  
  34.             callTop: 'setBrightnessRatio'  
  35.         },  
  36.         hue: {  
  37.             maxLeft: 200,  
  38.             maxTop: 0,  
  39.             callLeft: 'setHueRatio',  
  40.             callTop: false  
  41.         },  
  42.         alpha: {  
  43.             maxLeft: 200,  
  44.             maxTop: 0,  
  45.             callLeft: 'setAlphaRatio',  
  46.             callTop: false  
  47.         }  
  48.     }  
Next Recommended Reading Dynamic Progress Bar Using Bootstrap And jQuery