How to set width and height input with semantic-ui components

Question

Hello i am new in the semantic world and I want to customize the default input height and width I know that we have predefined classes in semantic like small, big, mini but I need to have custom height and width.

In semantic documentation (http://semantic-ui.com/elements/input.html) at the input section we have this message:

"Inputs will automatically size themselves unless you manually declare a width"

I have declared the width in the input like this:

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

but it doesn't work for me. A little help please.

Answer 1

Note: The width attribute is used only with <input type="image">. http://www.w3schools.com/tags/att_input_width.asp

That's why your code doesn't work. To make it work, you can do this:

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

Or use a CSS file:

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

You can change 100px to the width and height you want. Semantic UI won't set width and height for you, that's why they say manually declare a width.

Answer 2

I tried successfully:

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

for

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

Answer 3

You can set with for Semantic UI component using the style property.

It expects following syntax:

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

In your example you should specify:

<Input style={{width: 100, height: 100}}