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
Related
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%"
}}
I tried to apply a style to a section using the styled-components module in react.
However, the style was not applied to the section, so I checked it and it is displayed as a div on the console.
// GlobalStyles.tsx
section {
width: 100%;
height: 100%;
display: flex;
}
// Login.tsx
import styled from 'styled-components';
const Section = styled.section`
background-color: #ff69b4;
`;
const SERVER_ENDPOINT = 'http://localhost:3001';
function Login() {
...
return (
<Section>
<form>
<input
type="text"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<input type="submit" value="Login with Spotify" onClick={handleLogin} />
</form>
<span>{errorMsg}</span>
<Link to="/join">Sign Up</Link>
</Section>
);
}
export default Login;
console html
how should i solve this problem?
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 am using Reactstrap and trying to add some custom CSS, but the custom CSS is not getting applied.
Here is the code snippet.
Below is Home.js file
import React, { Component } from 'react';
import { Row, Col, Button, Form, FormGroup, Label, Input } from 'reactstrap';
import './Home.css'
export class Home extends Component {
constructor(props) {
super(props);
this.state = { showForm: false, btnText: "Add Record", formClass: "formHide" };
this.addRecord = this.addRecord.bind(this);
}
addRecord() {
if (this.state.btnText === 'Back') {
this.setState({ btnText: 'Add Record' });
this.setState({ formClass: "formHide" });
} else {
this.setState({ btnText: 'Back' });
}
}
render() {
return (
<section>
<h1 className='centerTitle'>Welcome to Fit Buddy</h1>
<Row>
<Col sm={9}></Col>
<Col sm={3}>
<Button color="primary" onClick={this.addRecord}>{this.state.btnText}</Button>
</Col>
</Row>
<Form className={this.state.formClass}>
<FormGroup row>
<Label for="exampleSelect" sm={3}>Exercise Type</Label>
<Col sm={9}>
<Input type="select" name="select" id="exampleSelect">
<option>Push Ups</option>
<option>Sit Ups</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Label for="exampleReps" sm={3}>No. of Reps</Label>
<Col sm={9}>
<Input type="text" name="text" id="exampleReps" placeholder="Enter number of Reps" />
</Col>
</FormGroup>
</Form>
</section>
);
}
}
Below is Home.css file
centerTitle {
text-align: center !important;
}
formHide {
display: none !important;
}
I tried debugging using developer Tools, this is the code, I am able to see. My Style is there and it is applied correctly in HTML as well. Still, my style is not working.
Code in Browser
When trying to provide styling to HTML Tags, it is working. But when giving styles to class, it is not working.
Please help. Thanks in Advance.
Your css-file is not targeting anything, since you are missing the dots infront of your classnames.
.centerTitle {
text-align: center !important;
}
.formHide {
display: none !important;
}
Edit:
Here is a good overview of the different css-selectors:
https://www.w3schools.com/cssref/css_selectors.asp
I have the following code:
<div className="center">
<TextField
variant="outlined"
className="manualUserFollowTxt"
required
id="manualUserFollowTxt"
label="Username"
name="username"
autoComplete="username"
autoFocus
/>
<Button variant="contained" color="primary" className="manualUserFollowButton"
onClick={(e) => this.followButtonClick(e, document.getElementById("manualUserFollowTxt").value)}
>
Follow
</Button>
</div>
Which basically results in:
what I have
What I want is to have the TextField and the Button be the same height with a little space in between and sitting on one line, preferably in the middle. Something like:
what I want
How can I achieve this??
In order to make the TextField and Button the same height and aligned, you can CSS Flexbox on the parent div.
Set the display to flex, and flex-direction to row.
In order to apply spacing between the TextField and Button, you can apply margin-right to the TextField (here I used material-ui styling):
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import TextField from '#material-ui/core/TextField';
import Button from '#material-ui/core/Button';
const useStyles = makeStyles(theme => ({
textField: {
marginRight: theme.spacing(2),
},
}));
export default function TextFieldDemo() {
const classes = useStyles();
return (
<div style={{display: 'flex', flexDirection: 'row'}}>
<TextField
variant="outlined"
className={classes.textField}
required
id="manualUserFollowTxt"
label="Username"
name="username"
autoComplete="username"
autoFocus
/>
<Button variant="contained" color="primary" className="manualUserFollowButton"
onClick={(e) => this.followButtonClick(e, document.getElementById("manualUserFollowTxt").value)}
>
Follow
</Button>
</div>
);
}