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.

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?