Is it possible to make Wordpress core (iris)colorpicker-wrapper higher instead of making colorboxes scale smaller?

Question

I'm having an issue using wordpress core colorpicker. I'm retrieiving random number of colors from the server (that fetches colors a specific website). These colors I want to use within the color-palette and I can manage that with the code below:

javascript (jquery):

var colors_ajax= $.ajax({            
   type: 'POST',
   data:{
       action: 'getwebcolors',    
       web_adr: web_adr
   },
   url: '/wp-admin/admin-ajax.php',
   dataType: 'json'
});

colors_ajax.done(function(palette_colors) {

    var options = {
        color: true,
        mode: 'hsl',
        controls: {
        horiz: 's', // horizontal defaults to saturation
        vert: 'l', // vertical defaults to lightness
        strip: 'h' // right strip defaults to hue
        },
        hide: true, // hide the color picker by default
        border: true, // draw a border around the collection of UI elements
        target: false, // a DOM element / jQuery selector that the element will be appended within. Only used when called on an input.
        width: 200, // the width of the collection of UI elements
        palettes: palette_colors // show a palette of imported color.
     }

    $('.my-color-field').iris(options);  

});

If I have say more than 15 colors , they get very, very small (like 9x9 pixels or so). Is there a way to scale the wrapper in height instead of the color-boxes to scale (I always want the same size on the "colorboxes")? I want to have fixed width like 200px set above.

Is there a way to specify column or rows? I haven't found anything about this. By looking at other questions like mine, there seems to be a need but no solution?

Answer 1

I found what I was looking for here: https://stackoverflow.com/questions/30732181/add-new-row-of-color-palettes-in-iris-color-picker

I have several palettes on one page and I added some rows to the code when having more then one palette in one page

...setup options...
$('.my-color-field').iris(options);

$('.iris-palette').css({'height':'20px','width':'20px', 'margin-left':'','margin-right':'3px','margin-top':'3px'});
$('.iris-strip').css('height','140px');

//Nr of palette-areas? This is need if you have several 
//palettes on one page (else the palette-box would have an 
//unnessary large height)
var paletteareasCount = $('.palette-area').length;                                
var paletteCount = Math.ceil( $('.iris-palette').length / paletteareasCount);

var paletteRowCount = Math.ceil(paletteCount / 8);
$('.iris-picker').css({'height': 150 + (paletteRowCount * 23)+'px', 'padding-bottom':'15px'});

html

<div class="palette-area"><input type="text" value="#ccbbaa" class="my-color-field" /></div>
<div class="palette-area"><input type="text" value="#ccbbaa" class="my-color-field" /></div>
<div class="palette-area"><input type="text" value="#ccbbaa" class="my-color-field" /></div>

jsFiddle: http://jsfiddle.net/g4ucnquz/6/