Как установить ввод ширины и высоты с помощью компонентов semantic-ui

Привет, я новичок в семантическом мире, и я хочу настроить высоту и ширину ввода по умолчанию. Я знаю, что у нас есть предопределенные классы в семантике, такие как маленький, большой, мини, но мне нужно иметь пользовательскую высоту и ширину.

В семантической документации (http://semantic-ui.com/elements/input.html ) в разделе ввода имеем такое сообщение:

«Входные данные будут автоматически изменять размер, если вы не объявите ширину вручную»

Я объявил ширину ввода следующим образом:

<input  width="10" type="text" value="test" placeholder="empty" readonly>

но это не работает для меня. Небольшая помощь, пожалуйста.


input css semantic-ui
person quique    schedule 20.04.2015    source источник

Ответы (4)


arrow_upward
8
arrow_downward

Примечание. Атрибут ширины используется только с <input type="image">. http://www.w3schools.com/tags/att_input_width.asp

Вот почему ваш код не работает. Чтобы заставить его работать, вы можете сделать это:

<input style="width:100px; height: 100px;" type="text" value="test" placeholder="empty" readonly>

Или используйте файл CSS:

input[type="text"] {
    width: 100px;
    height: 100px;
}

Вы можете изменить 100px на желаемую ширину и высоту. Семантический пользовательский интерфейс не будет устанавливать ширину и высоту за вас, поэтому они говорят объявлять ширину вручную.

person Henrique Arthur    schedule 20.04.2015

arrow_upward
2
arrow_downward

Я успешно попытался:

style={{minWidth:"10em"}}

за

<Form.Field width={3}><Select placeholder='Options' options={options} 
    style={{minWidth:"10em"}}/></Form.Field>
person Roman    schedule 16.03.2018

arrow_upward
2
arrow_downward

Вы можете установить with для компонента семантического пользовательского интерфейса, используя свойство стиля.

Ожидается следующий синтаксис:

<Input style={{marginRight: spacing  'em'}}

В вашем примере вы должны указать:

<Input style={{width: 100, height: 100}}
person raj chakravarthy    schedule 23.08.2019

arrow_upward
1
arrow_downward

Вы бы просто поместили его в пользовательский файл css

input[type="text"]{
height: 100px;
width: 400px;
}
person Enjayy    schedule 20.04.2015