Jscolor Color Picker смещен - PullRequest
Новая
       14

Jscolor Color Picker смещен

0 голосов
/ 14 июня 2019

В настоящее время я использую jscolor, но когда я отображаю средство выбора на своей веб-странице, его радуга смещается в пределах остальной части средства выбора. Вот ссылка на то, как выглядит палитра цветов на моем сайте: (https://ibb.co/9N8dHXs).

На моем сайте есть большой холст, который я использую для графики three.js, и я думаю, что это может иметь какое-то отношение к проблеме, но я не уверен, и даже когда я пытаюсь убрать холст, я все еще есть проблема.

Я пытался поместить палитру цветов во все части HTML, в разные контейнеры, но независимо от того, что я все еще получаю это смещение.

Фрагмент моего HTML: 

<body>
    <div id="container">
        <div class="sidebar" id="sidebar">
            <div class="controls" id="controls">
                <div>
                    <h4 class="sect-head">BACKGROUND</h4>
                    <div class="sect-child">
                        Sky Color
                        <input class="jscolor" onchange="setRendererColor(this.jscolor)" value="FFE4A6">
                    </div>
                </div>
            </div>
        </div>
     </div>
</body>

Мой jscolor css: 

.jscolor {
    width: 60px; 
    height: 13px;
    border: white;
    font-family: "umma";
    font-size: 10px;
}

Все остальное работает как положено, но как мне исправить эту проблему с графикой?

Ответы [ 2 ]

0 голосов
/ 14 июня 2019 

function setRendererColor(jscolor)
{
  document.body.style.backgroundColor = '#' + jscolor.value;
}
.jscolor {
    width: 100px; 
    height: 13px;
    border: white;
    font-family: "umma";
    font-size: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>
<body>
    <div id="container">
        <div class="sidebar" id="sidebar">
            <div class="controls" id="controls">
                <div>
                    <h4 class="sect-head">BACKGROUND</h4>
                    <div class="sect-child">
                        Sky Color
                        <input class="jscolor" onchange="setRendererColor(this)" value="FFE4A6">
                    </div>
                </div>
            </div>
        </div>
     </div>
</body>
0 голосов
/ 14 июня 2019

Вы должны установить ширину класса jscolor на 100 процентов и установить ширину дочернего элемента секты на 60 пикселей 

.jscolor {
    width: 100%; 
    height: 13px;
    border: white;
    font-family: "umma";
    font-size: 10px;
}
...