I am building a login page with react, and here is what I have got
class Landing extends Component {
state = {
box: {
width: "300px",
height: "100px",
margin: "0 auto",
border: "1px solid blue",
textAlign: "center",
verticalAlign: "middle",
lineHeight: "90px",
backgroundColor: "white",
},
landingBody: {
backgroundColor: "#ccffff",
height: `100vh`,
width: `100vw`,
display: `flex`,
alignItems: `center`,
justifyItems: `center`,
},
};
getForm() {
return (
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" size="50" />
<br />
<br />
<label for="pin">PIN:</label>
<input type="text" id="pin" name="pin" maxlength="4" size="4" />
<br />
<br />
<input type="submit" value="Submit"></input>
</form>
);
}
render() {
return (
<div style={this.state.landingBody}>
<div style={this.state.box}>{this.getForm()}</div>
</div>
);
}
}
export default Landing;
I want the box to be in the center of the page, and the username and pin textboxes well inside the box. But the textboxes overflows way out of the containing box. Also, the shape is a bit wierd.
Please help.
First, you need to remove the height prop of the box, flexbox landingbody then can holding the box in center position.
box: {
width: "300px",
margin: "0 auto",
border: "1px solid blue",
textAlign: "center",
verticalAlign: "middle",
lineHeight: "90px",
backgroundColor: "white",
},
Second, the size of your pin textbox is 50, maybe this prop makes the input so long to overflow the container, you can remove it, restyle it's width.
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" />
Any question?
The whole CSS style object shouldn't be in state as you aren't probably changing all the values.
The main reason your elements are overflowing is: size="50" and lineHeight: "90px". You should use width and height instead.
Also I recommend using a CSS framework to make it look a bit nicer.
Here, I quickly made an example login page for you using Bulma https://codesandbox.io/s/sad-gould-ill5z
modify input width id fname like below:
<input type="text" id="fname" name="fname" size="50" style={{width: '100%',height: '5px'}} />
Related
I'm using antd forms in react, but my input is not using full width
<div className='loginForm'>
<Form
className='form'
name="basic"
labelCol={{
span: 8,
}}
wrapperCol={{
span: 16,
}}
style={{
maxWidth: 600,
}}
initialValues={{
remember: true,
}}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off">
<Form.Item
name="email"
rules={[
{
required: true,
message: 'Please input your email!',
},
]}
>
<Input placeholder='Email' />
</Form.Item>
<Form.Item
name="password"
rules={[
{
required: true,
message: 'Please input your password!',
},
]}
>
<Input.Password placeholder='Password' />
</Form.Item>
</div>
Why does it not extend to the full width?
I know this is probably really simple but i can't work it out, where am I going wrong?
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 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 have a modal in my render method:
<ModalContainer>
<Modal isSmall={true} style={{width:'1100px', overflowY : "scroll"}}>
<div className='div-style'>
<ModalHeader>
<h3>Add Company</h3>
</ModalHeader>
<div className='div-style'>
{addingC.map((company, index) => { //renders each element in addingC, I want this div to be scroll-able as the user keeps adding a new object
return(
<div
key={index}
className="flex flex-row w-100 side-by-side"
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
marginBottom: "20px",
}}
>
<label htmlFor="name">Company Name</label>
<ModalInput
type="text"
id="name"
value={company.name}
onChange={(e) =>
this.setState({ newCompanyName: e.target.value })
}
></ModalInput>
<label htmlFor="website">
Company Website
</label>
<ModalInput
type="text"
id="website"
value={company.website}
onChange={(e) =>
this.setState({ newCompanyWebsite: e.target.value })
}
></ModalInput>
</div>
)})}
</div>
<ModalSaveButton type="button" onClick={() => this.addC()}> //add button that allows user to add another company
add
</ModalSaveButton>
this is the addC() method and adds in an empty object when called by the render method:
addC() {
let { addingC } = this.state;
addingC.push({ name: "", website: ""});
this.setState({ addingC });
}
this is the css file where I have also added Y overflow property:
.side-by-side {
display: flex;
flex-direction: row;
align-items: center;
}
.div-style {
overflow-y: auto; //added Y overflow
position: relative;
}
I would like the div to be scroll-able as the user adds new companies and currently once I add about 8 companies, the div becomes too large and instead of scrolling, the top part goes out of the page so its no longer visible as you can see here
In order to use overflow-y or overflow-x, you have to set height or width. Otherwise, it will keep using available space. If there is no space, it will go off the page.
In your CSS file, try adding height in div-style.
Currently, the modal is too small to contain all email inputs when adding multiple users, overflowing the modal. Tried to apply CSS's height 100% property with no success. Here's some of the code:
const divEmail = {
content: {
position: "relative",
display: "block",
margin: "0 50px 0 30px",
background: "transparent"}
};
class PageAssistantSplitCourrielsCollaborateurs extends Component {
render() {
ayantDroits.push(
<div style={{ height: "100%" }}>
<div key={`champ--courriel__${elem}`}>
<Label style={divEmail} htmlFor={`champ--courriel__${elem}`}>
{_aD.name}
</Label>
<Translation>
{t => (
<Input
style={divEmail}
name={`champ--courriel__${elem}`}
id={_aD.rightHolderId}
defaultValue={_aD.email}
placeholder={t("flot.split.inscription.exemple")}
required={this.state.requis}
autoFocus={this.state.autoFocus}
type="email"
onChange={this.onChange}
/>
)}
</Translation>
</div>
</div>
);
});
return (
<div style={{ height: "100%" }}>
<Translation>
{t => (
<div>
{ayantDroits}
</div>
)}
</Translation>
</div>
);
}
}