How to expand the width size of Input in Semantic React UI?

Question

I'm working with Reactjs project, and I use Semantic UI React to beautify the Input. However, it seems that Input is always showed in default size. How can I resize its horizontal width ?

I follow the instruction on Semantic UI React Home page, I put this line of code to Html:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css"></link>

In js file I import:

import { Input } from 'semantic-ui-react';

and render the input:

<Input value={this.state.firstName} onChange={this.handleInputFirstName}/>

I've tried this style={{ width: "300px" }} but still didn't work. — Khanh Tran
– Khanh Tran, Commented Jan 15, 2018 at 4:55
If you take a look at the props for the Input component (react.semantic-ui.com/elements/input) you will see that style is not listed. However, className is, so you should be able to pass in a class that will do the same thing. — Brian
– Brian, Commented Jan 15, 2018 at 5:06

Swapnil · Accepted Answer · 2018-01-15 06:08:58Z

14

Adding style={{ width:"300px" }} works perfectly fine for me. I am using same stylesheet as that of you. You can take a look at following code:

const App = () => (
  <div style={styles}>
    <h2>Start editing width and see magic happen {'\u2728'}</h2>
    <Input placeholder="Hello there" style={{width: "370px"}}/>
  </div>
);

Working example can be seen here:

answered Jan 15, 2018 at 6:08

Swapnil

8366 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

How to expand the width size of Input in Semantic React UI?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related