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?
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;
}
Not sure but try this
labelPosition='right'
style
style={{
paddingLeft: "50%"
}}
Related
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.
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
I'm new in reactJS, but I want to know how I can put icon inside input element?
I have a FormItem and inside of this an Input, and inside of this input i want to put an icon.
<Col xs={24} sm={24} md={24} lg={12}>
<FormItem
{...formItemLayout}
label={intl.formatMessage({ id: `maintenace.link.linkOrigin` })}
>
{getFieldDecorator(`officePhone`, {
initialValue: selectedData_.officePhone
? selectedData_.officePhone
: ""
})(
<Input
name="officePhone"
placeholder={intl.formatMessage({
id: `maintenance.officePhone`
})}
/>
)}
</FormItem>
</Col>
If anyone knows, please, I will be very grateful.
If you use some lib related to the Ant Design. You can add prefix prop
<Input prefix={<SmileOutlined />} />
You could use a background on the input, something like this :
input: {
background: url(icon.gif) no-repeat scroll 7px 7px;
padding-left: 20px;
}
I'm trying to get a <Button> from the Material UI library to a) sit at same height as the <TextField> next to it; and b) have it be aligned with that same field.
Both the <Button> and the <TextField> are each inside their own <Grid> component (with a container wrapping them).
The container <Grid> has the prop alignItems="center", which produces this result:
It's here I'm running into difficult trying to get the height of the <Button> to match that of the input field. This must be a relatively common requirement - is there a simple way of achieving this?
Given that you have each of your element in a <Grid> component themselves, this should work:
https://codesandbox.io/s/material-ui-playground-forked-1yymw?file=/app.jsx
Use container={true} for Grid to set it as a flex container. Aside from that, you can always leverage makeStyles to generally customize the components' style
MUI Grid container prop
If true, the component will have the flex container behavior.
const useStyles = makeStyles({
fullHeightButton: {
height: "100%"
}
});
function App() {
const classes = useStyles();
return (
<React.Fragment>
<Grid container={true}>
<TextField variant="outlined"/>
<Button variant="contained" color="primary">+</Button>
</Grid>
<br/>
<Grid container={true}>
<Grid><TextField variant="outlined"/></Grid>
<Grid><Button classes={{root: classes.fullHeightButton}} variant="contained" color="primary">+</Button></Grid>
</Grid>
</React.Fragment>
);
}
ReactDOM.render(<App/>, document.getElementById("test"));
<body>
<div id="test"></div>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script src="https://unpkg.com/#material-ui/core#latest/umd/material-ui.development.js"></script>
<script type="text/babel">
const { Button, Grid, makeStyles, TextField } = MaterialUI;
</script>
</body>
In my case, I had two buttons that sandwiched a TextField, where the spacing between the first button and the textfield was wrong as shown:
Buttons before code addition
My code was:
<CardActions className='cardactions'>
<Button variant='contained' color='error'> - </Button>
<TextField id='outlined-basic' variant='outlined' size='small' type='number' label='Enter Quantity'/>
<Button variant='contained' color='success'>+</Button>
</CardActions>
Adding sx={{ marginRight:1}} to the first button corrected the issue.
Buttons after code addition
Code after addition:
<CardActions className='cardactions'>
<Button variant='contained' color='error' sx={{ marginRight:1}}> - </Button>
<TextField id='outlined-basic' variant='outlined' size='small' type='number' label='Enter Quantity'/>
<Button variant='contained' color='success'>+</Button>
</CardActions>
I'm using materialUI in my React 16.10 application. I have two buttons in a Box.
<Box
style={{
marginTop: "3rem",
marginLeft: "1rem",
display: "flex",
justifyContent: "center",
spacing: 1,
}}
>
<Button onClick={handleSave} variant="contained" color="primary">
SAVE
</Button>
<Button
onClick={toDetailsView}
startIcon={<CancelIcon />}
variant="contained"
color="primary"
>
CANCEL
</Button>
</Box>
Even though I'm using "spacing: 1", the buttons appear right next to each other so it is impossible to distinguish where one ends and the next begins ...
How do I add style so that there is a little bit of space in between the buttons?
Looking for easy fix ?
margin: 1rem;
I'm trying to align the label and the radio button inside a FormControlLabel component so that the label consumes the same width regardless of the text inside of it. Here's what it currently looks like:
Here's the code I have:
<RadioGroup row>
<FormControl>
<FormControlLabel
value={first_column_day}
control={
<Radio
value={first_column_day}
/>
}
label={<Typography variant={"subtitle2"}>{first_column_day}</Typography>}
labelPlacement="start"
/>
</FormControl>
<FormControl>
<FormControlLabel
value={second_column_day}
control={
<Radio
value={second_column_day}
/>
}
label={<Typography variant={"subtitle2"}>{second_column_day}</Typography>}
labelPlacement="start"
/>
</FormControl>
</RadioGroup>
I tried adding justifyContent for FormControl:
<FormControl style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
I also tried wrapping Typography in a div:
<div><Typography variant={"subtitle2"}>{first_column_day}</Typography></div>
But those didn't work. So far the only thing that worked is adding a fixed width to the Typography like so:
<Typography style={{ width: 75 }} variant={"subtitle2"}>{first_column_day}</Typography>
But I don't really like doing that because it's not responsive. Setting the width to 100% doesn't work either.
You can add min-width to FormControlLabel component if you need alignment like below without losing responsiveness -
Working Sandbox here - https://codesandbox.io/s/material-demo-3u8i2?file=/demo.js