Как определить начальный размер для ввода HTML (сохраняя при этом возможность расти)? - PullRequest
Новая
       6

Как определить начальный размер для ввода HTML (сохраняя при этом возможность расти)?

0 голосов
/ 11 октября 2019

Кто-нибудь может мне помочь с этим? У меня есть ввод HTML в сетке CSS внутри контейнера с изменяемым размером.

Пожалуйста, посмотрите на мой пример кода, чтобы сделать его более понятным (это пример React, но это не должно иметь значения): 

import React from "react";
import { withStyles } from "@material-ui/core/styles";

  const styles = theme => ({
  root: {
    backgroundColor: "grey"
  },
  container: {
    display: "inline-block",
    margin: 10,
    padding: 10,
    resize: "both",
    overflow: "auto",
    backgroundColor: "white"
  },
  grid: {
    display: "grid",
    gridTemplateColumns: "auto",  //=> column will be 195px, resize works
    //gridTemplateColumns: "100px",  //=> column will be 100px, but won't grow on resize
    gridTemplateRows: "2em"
  },
  text: {
    width: "100%", //resize works, but initial width is 195px
    //width: "100px", //width is now smaller, but won't resize anymore
  }
});

const App = props => (
  <div className={props.classes.root}>
    <div className={props.classes.container}>
      <div className={props.classes.grid}>
        <input className={props.classes.text} type="text" value="content" />
      </div>
    </div>
  </div>
);

export default withStyles(styles)(App);

Теперь, если я объявлю столбец сетки «auto», столбец (и, следовательно, вся сетка и контейнер) будут иметь ширину 195 пикселей, и все будет работать хорошо (изменение размера контейнера приводит к изменению размера ввода).

width is 196px, but nobody declared that

Но что, если мне нужно, чтобы вход был меньше (но все же увеличивался при изменении размера)? Если я установлю определенный размер для ввода, он больше не будет расти, то же самое относится и к столбцу сетки.

Поэтому вопрос таков: если исходная или исходная ширина ввода составляет 195 пикселей, как я могу изменить это? ?

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

Кто-нибудь знает, как это сделать?

Вот ссылка на песочницу: goto sandbox

Привет

Феликс

...