Option to not style the input element

[glewe]

Hi there and thanks for this great looking color picker.

I tried to integrate this into a form using Bootstrap form elements, e.g. the input-group. However, the color picker changes the style of the einput element so it then looks out of place compared to all the others.

I would appreciate an option to not style the input element itself. Maybe add a selector parameter of an element that shall be colored with the selected color.

Thanks and best regards,
George

[mdbassit]

The color input fields shouldn't be styled by the color picker at all. But if you are talking about the input field inside the picker dialog, that's the intended behavior, you can of course customize the style with CSS.

[glewe]

I used this simple code

<input class="form-control mb-2" type="text" data-coloris>

It uses a Bootstrap custom class "mb-2" which adds a margin-bottom to the input field. That margin seems to be occupied by the thumbnail.

[melloware]

@glewe can you post a screenshot of what you mean by "out of place" ?

[glewe]

Here is a normal input field (Bootstrap style)

As soon as I link coloris to it it changes to this:

Is there any way to leave the original input field untouched?

[mdbassit]

The easiest way is to use a custom selector (set the el option to a class for example ) and set the wrap option to false. But the little color preview will not render.

Coloris({
  el: '.myclass',
  wrap: false
});

[mdbassit]

@glewe I just added Bootstrap 5 to a test page and the input field are rendered correctly without any issue. There is no overflowing preview thumbnail like in your screenshot. Could you maybe share a public page where I can see your issue in action?

[glewe]

Great. Thanks, that works. Code looks something like this now:

<div class="input-group mb-3">
  <span class="input-group-text"><i id="sample-txt_color" class="bi-square-fill" style="color: #F2EF3D"></i></span>
  <input id="txt_color" type="text" class="form-control" name="txt_color" value="#F2EF3D" maxlength="9">
</div>
<script>
  Coloris({
    el: "#txt_color",
    wrap: false,
    theme: "polaroid",
    themeMode: "dark",
    alpha: true,
    onChange: function (color) {
      $("#sample-txt_color").css("color", color);
    }
  });
</script>

[glewe]

Additional note:
I noticed that the onChange function does not work with multiple instances. I changed the code to this:

<div class="input-group mb-3">
  <span class="input-group-text"><i id="sample-txt_color" class="bi-square-fill" style="color: #608e20"></i></span>
  <input id="txt_color" type="text" class="form-control" name="txt_color" value="#608e20" maxlength="9" >
</div>
<script>
  Coloris({
    el: "#txt_color",
    wrap: false,
    theme: "polaroid",
    themeMode: "dark",
    alpha: true,
    format: "hex"
  });
  document.getElementById("txt_color").addEventListener("input", function() {
    document.getElementById("sample-txt_color").style.color = this.value;
  });
</script>

[mdbassit]

To support multiple instances, I'd recommend this method:

Coloris({
  el: "#txt_color",
  wrap: false,
  theme: "polaroid",
  themeMode: "dark",
  alpha: true,
  format: "hex",
  onChange: function (color, input) {
    var thumbnail = input.previousElementSibling; // This is the span.input-group-text

    if (thumbnail && thumbnail.firstElementChild) {
      thumbnail.firstElementChild.style.color = color;
    }
  }
});

[glewe]

Yep. Thanks. That works too and is the better solution.