search

cocopon / tweakpane

:control_knobs: Compact GUI for fine-tuning parameters and monitoring value changes
https://tweakpane.github.io/docs/
MIT License
3.41k stars 85 forks source link

color panel is displaying incorrectly #580

Closed Hanysisko closed 8 months ago

Hanysisko commented 8 months ago

In my project panel is displaying incorrectly. When I try to 'drag' color that I want, I need to drag cursor above color field or it will give only white or black color. Anyone had similar issue?

image
cocopon commented 8 months ago

It seems that it comes from your CSS. Can you share a minimum code to reproduce the issue? (e.g. using CodeSandbox)

Hanysisko commented 8 months ago

Hi cocopon, I just found it! The problem is that canvas for color palette takes property "position: fixed" from my main css file. I have a question - is there a possibility for fixing this WITHOUT changing my main css file f.e. changing it somewhere in file where I'm using Pane() ?

cocopon commented 8 months ago

Ideally you should fix your CSS because this problem comes from a scope that is too wide. However, if you can't do it in some reason, overwriting it with a more specific declaration can be a workaround.

/* If you can add a ruleset to the existing CSS... (NOT RECOMMENDED) */
.tp-rotv canvas {
  position: static !important;
}
// If you can't modify your CSS in some reason... (NOT RECOMMENDED)
pane.element.querySelectorAll('canvas').forEach((c) => {
  c.style.position = 'static';
});
Hanysisko commented 8 months ago

I did combination of static and fixed with !important in additional files, so now everything works perfectly! Thank you for your time cocopon, have a nice day!