semantic-ui-react - form input placeholder position

Question

I'm using the components from semantic-ui-react to display a Field and Button like below:

<Segment clearing>
    <Form>
        <Form.Group style={{ display: "flex" }}>
            <Form.Field style={{ flexGrow: "1" }}>
                <Form.Input
                    placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
                    focus
                />
            </Form.Field>

            <Form.Button
                    color="green"
                    floated="right"
                    content="Add new API key"
                    type='submit'
            />
        </Form.Group>
    </Form>
</Segment>

Nothing incredibly fancy, the result is as below:

I want to reposition the placeholder in the Form.Input to the right side like below:

How exactly can I achieve this?

Data Moose · Accepted Answer · 2023-01-07 13:08:36Z

2

+50

I would use the CSS placeholder selector. You could, for example, give the Form.Input component an arbitrary class such as "input-aligned-end" and then style it in CSS:

.input-aligned-end::placeholder {
  text-align: end;
}

answered Jan 7, 2023 at 13:08

Data Moose

5374 silver badges7 bronze badges

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

Comments

Madisson · Accepted Answer · 2023-01-11 09:50:15Z

0

Not sure but try this

labelPosition='right'

style

style={{
        paddingLeft: "50%"
   }}

answered Jan 11, 2023 at 9:50

Madisson

355 bronze badges

Collectives™ on Stack Overflow

semantic-ui-react - form input placeholder position

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related