semantic-ui-react Make input use full width available

Question

I have the following Segment

<Segment className='AddAPIKey'>
                <Form>
                    <Form.Group>
                        <Form.Field>
                            <Input placeholder='XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX' />
                        </Form.Field>
                        <Form.Button color='green' floated='right' content='Add new API key' />
                    </Form.Group>
                </Form>
            </Segment>

With the style:

.ui.AddAPIKey {
  display: flex;
  justify-content: right;
}

Resulting in:

Is there a way I can make the input field take the entire width like in the example below? I've tried with width: 100% and auto and no luck.

Input cannot grow on adding text . use attribute contenteditable=true on div — Anil kumar
– Anil kumar, Commented Dec 8, 2022 at 20:53
@Shury entire width of the page available or width long enough to show the text inside — Tohirul Islam
– Tohirul Islam, Commented Dec 11, 2022 at 12:37

Tohirul Islam · Accepted Answer · 2022-12-11 13:19:52Z

1

+50

import React from "react";
import { Input, Form, Segment } from "semantic-ui-react";
import "./style.css";

const InputExampleFocus = () => (
  <Segment>
    <Form>
      <Form.Group style={{ display: "flex" }}>
        <Form.Field style={{ flexGrow: "1" }}>
          <Input placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" />
        </Form.Field>
        <Form.Button color="green" floated="right" content="Add new API key" />
      </Form.Group>
    </Form>
  </Segment>
);

export default InputExampleFocus;

Try this I have removed the .ui.AddAPIKey class and used Inline css to style Form.Group and Form.Field

It produces an Input field that covers all the spaces available.

I hope it solves the issue.

https://codesandbox.io/embed/semantic-ui-example-forked-x5d4qm?fontsize=14&hidenavigation=1&theme=dark

Open the codesandbox and go to `example.js`

edited Dec 11, 2022 at 13:19

answered Dec 11, 2022 at 13:13

Tohirul Islam

4144 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

semantic-ui-react Make input use full width available

1 Answer 1

It produces an Input field that covers all the spaces available.

Open the codesandbox and go to `example.js`

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

It produces an Input field that covers all the spaces available.

Open the codesandbox and go to example.js

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Open the codesandbox and go to `example.js`