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 ?
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css"></link>
import { Input } from 'semantic-ui-react';
<Input value={this.state.firstName} onChange={this.handleInputFirstName}/>
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:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With