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.

Henrique Arthur · Accepted Answer · 2015-04-20 23:41:57Z

8

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.

answered Apr 20, 2015 at 23:41

Henrique Arthur

1,0681 gold badge11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roman · Accepted Answer · 2018-03-16 23:45:36Z

2

I tried successfully:

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

for

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

edited Mar 16, 2018 at 23:45

answered Mar 16, 2018 at 23:38

Roman

22.3k18 gold badges103 silver badges105 bronze badges

Comments

raj chakravarthy · Accepted Answer · 2019-08-23 16:13:36Z

2

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}}

edited Aug 23, 2019 at 16:13

answered Aug 23, 2019 at 16:04

raj chakravarthy

656 bronze badges

Comments

Enjayy · Accepted Answer · 2015-04-20 23:37:42Z

1

You would just put it in a custom css file

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

answered Apr 20, 2015 at 23:37

Enjayy

1,0849 silver badges18 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related