Changing preview square size (or getting rid of it)?

[FredButBetter]

Your question

I am new to CSS and web development in general, so pardon me if this is really noobish, but I would like to increase the size of the little Pickr window when closed. Is this possible, and if so, how? By this, I mean the small square that shows the current color which you click to open the picker itself. Otherwise (or perhaps in addition) I was wondering if it is possible to do away with this square entirely and just have the whole colorpicker pane itself, static without opening or closing. This is different from the functionality when showAlways is set to True, because it still shows the small sqaure, and the picker is relative to this square, which makes creating a good-looking layout more challenging. Any assistance with either of these (or both :) ) would be much appreciated!

Your environment:

Version (see Pickr.version): 1.51
Used bundle (es5 or normal one): Normal
Used theme (default is classic): Classic
Browser-version:  Chrome
Operating-system:  Windows

[FredButBetter]

I found a solution actually! I was digging around in the CSS and modified the .pickr .pcr-button section to have larger width and height. I had tried this yesterday actually, but didn't realize it wasn't updating due to browser caching, not an issue with the css itself. I am happy to close this issue, but would like to see if you have anything else to say on the topic (or about the second point) Simon before I do.

[simonwep]

Hey @FredButBetter :)

Sorry for the kinda late response! This is the way to go, classes such as .pickr .pcr-button will always stay the same and can be used to apply custom styles.

There's also an option to get rid of it:

// Don't replace 'el' Element with the pickr-button, instead use 'el' as a button.
// If true, appendToBody will also be automatically true.
useAsButton: false

In this case the el element will be used as button, so you might have to fiddle around with your elements a bit :)

[FredButBetter]

Hey Simon, no problem! Thank you for getting back to me. I didn't realize that's what that option did, that is very good to know. If I may, I would like to ask another question, although I'm not sure if you'd prefer if I opened a new question / issue for this. When using the following options, it is not allowing me to move the orientation of the picker with the 'position' option ( the picker remains at the bottom-middle default position regardless). Is this the intended behaviour due to an interaction with one of the options I picked?

const picker1Var = Pickr.create({
      el: picker1,
      theme: 'monolith',
      default: def1,
      defaultRepresentation: 'HEX',
      appendToBody: true,
      padding: 1,
      lockOpacity: true,
      comparison: false,
      showAlways: true,
      position: 'right-middle',

      inline: true,

      components: {
        preview: true,
        opacity: false,
        hue: true,

        interaction: {
          hex: true,
          input: true,
        }
      }
    });

[simonwep]

inline: true is basically causing pickr to be inlined (Take a look into your dev-console) - therefore pickr is not longer a floating widget but rather a completely normal element which follows the HTML-Flow :)

As taken from the README:

If true pickr won't be floating, and instead will append after the in el resolved element. It's possible to hide it via .hide() anyway.

[FredButBetter]

Ok, got it! Thank you very much for clearing this up, I expected that it was just an interaction I didn't understand. And thanks again for making such a wonderful colorpicker and sharing it!

[simonwep]

You're welcome :)