Использование CSS сетки с динамически созданными строками - PullRequest
Новая
       48

Использование CSS сетки с динамически созданными строками

0 голосов
/ 25 февраля 2019

Я пытаюсь использовать CSS-макет сетки для стилизации «контроллера» с динамически создаваемыми строками.У меня возникают проблемы с правильным интервалом.

В том, что у меня есть, контейнеры слайдера не отображаются в своих собственных строках (несмотря на grid-auto-rows: auto), а содержимое внутри контейнера слайдера не отображается вв той же строке (несмотря на grid-template-columns: 1fr 2fr 1fr).Есть также странный неожиданный интервал между 2-м и 3-м столбцами (которые не должны существовать в любом случае).

В конечном итоге мне бы хотелось, чтобы каждая строка содержала 1 метку, 1 ползунок и 1значение (все связаны друг с другом) и чтобы элементы в каждом столбце имели одинаковую ширину, предпочтительно минимальную ширину, необходимую для хранения содержимого с максимальной длиной в соответствующем столбце.

Вещи, которые яЛюбопытно о

  • Должен ли этот контроллер иметь абсолютное позиционирование / абсолютную ширину (как бы я сделать так, чтобы ширина соответствовала содержимому?)
  • Как я могу написатьCSS таким образом, что он хорошо изменяет размеры, когда пользователь изменяет размер своего экрана
  • Если ширина столбца метки является минимумом максимума всего содержимого метки, а ширина столбца значения является минимумом максимума всехЗначение содержимого, если я установил минимальную ширину для ползунка, это должно дать мне минимальную ширину для контейнера, верно?
  • Если строки создаются динамически, как я могу ссылаться на них через свойство grid-row?

Спасибо за помощь. 

var slidersContainer = document.createElement("div");
slidersContainer.id = "sliders-container";

var body = document.getElementsByTagName("body")[0];
body.appendChild(slidersContainer);

for (i = 0; i < 10; i++) {
  var sliderContainer = document.createElement("div");
  sliderContainer.className = "slider-container";
  slidersContainer.appendChild(sliderContainer);

  var label = document.createElement("div");
  label.className = "slider-label"
  label.innerHTML = "some-label-" + i;
  sliderContainer.appendChild(label);

  var input = document.createElement("input");
  input.className = "slider";
  input.min = 0;
  input.max = 100;
  input.type = "range";
  sliderContainer.appendChild(input);

  var value = document.createElement("div");
  value.className = "slider-value";
  value.innerHTML = "0.0000001";
  sliderContainer.appendChild(value);
}
#sliders-container {
  position: absolute;
  top: 0;
  right: 0;
  margin: 20px;
  padding: 5px;
  background-color: #333333;
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: 1fr 2fr 1fr;
  grid-gap: 10px;
}

.slider-container {}

.slider-label {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: small;
  color: white;
  grid-column: 1;
}

.slider {
  grid-column: 2;
}

.slider-value {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: small;
  color: white;
  grid-column: 3;
}
<!DOCTYPE html>
<html>

<head></head>

<body></body>

</html>

1 Ответ

0 голосов
/ 25 февраля 2019

Примените свойства CSS grid к slider-container вместо абсолютно позиционированного контейнера - см. Демонстрацию ниже: 

var slidersContainer = document.createElement("div");
slidersContainer.id = "sliders-container";

var body = document.getElementsByTagName("body")[0];
body.appendChild(slidersContainer);

for (i = 0; i < 10; i++) {
  var sliderContainer = document.createElement("div");
  sliderContainer.className = "slider-container";
  slidersContainer.appendChild(sliderContainer);

  var label = document.createElement("div");
  label.className = "slider-label"
  label.innerHTML = "some-label-" + i;
  sliderContainer.appendChild(label);

  var input = document.createElement("input");
  input.className = "slider";
  input.min = 0;
  input.max = 100;
  input.type = "range";
  sliderContainer.appendChild(input);

  var value = document.createElement("div");
  value.className = "slider-value";
  value.innerHTML = "0.0000001";
  sliderContainer.appendChild(value);
}
#sliders-container {
  position: absolute;
  top: 0;
  right: 0;
  margin: 20px;
  padding: 5px;
  background-color: #333333;
}

.slider-container { /* CHANGED */
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-gap: 10px;
}

.slider-label {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: small;
  color: white;
  grid-column: 1;
}

.slider {
  grid-column: 2;
}

.slider-value {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: small;
  color: white;
  grid-column: 3;
}
...