I'm learning aura framework but I am facing an issue. I'm actually using nested layout with 4 fields but somehow it's only showing me top 2 fields. Can anyone please help me to show all those 4 fields?
Here is my code. As you can see there is a comment row 2 below that comment two fields are there that is not visible on my page.
Component
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
<div class="c-container">
<lightning:layout multipleRows="true">
<lightning:layoutItem padding="around-small" size="12">
<div class="page-section page-header">
<h2>General Information</h2>
</div>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small" size="12">
<div class="page-main">
<lightning:layout>
<lightning:layoutItem padding="around-small" size="6">
<div class="slds-p-around_medium lgc-bg">
<lightning:input name="firstName" label="First Name" />
</div>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small" size="6">
<div class="slds-p-around_medium lgc-bg">
<lightning:input name="lastName" label="Last Name" required="true" />
</div>
</lightning:layoutItem>
<!-- This row 2 is not visible -->
<lightning:layoutItem padding="around-small" size="6">
<div class="slds-p-around_medium lgc-bg">
<lightning:input type="email" name="email1" value="abc#domain.com" label="Email" required="true" />
</div>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small" size="6">
<div class="slds-p-around_medium lgc-bg">
<lightning:input type="tel" label="Phone" name="phone" required="true" />
</div>
</lightning:layoutItem>
</lightning:layout>
</div>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small" size="12">
<div class="page-footer page-section">
<h2>Footer</h2>
</div>
</lightning:layoutItem>
</lightning:layout>
</div>
</aura:component>
CSS
.THIS.c-container {
border: 1px solid #d8dde6;
margin: 10px 0 20px 0;
}
.THIS .page-section {
border: solid 1px #ccc;
padding: 1rem;
}
.THIS .page-header,
.THIS .page-footer {
height: 50px;
}
.THIS .page-main {
background: #f8f8f8;
}
.THIS .page-left,
.THIS .page-right {
background: #f0efef;
}
We refer to the size in lightning:layoutItem as per the grid. You can have up to 12 columns in your grid, so we choose the size accordingly.
Please replace this code with your code-
<lightning:layout>
<lightning:layoutItem padding="around-small" size="3">
<div class="slds-p-around_medium lgc-bg">
<lightning:input name="firstName" label="First Name" />
</div>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small" size="3">
<div class="slds-p-around_medium lgc-bg">
<lightning:input name="lastName" label="Last Name" required="true" />
</div>
</lightning:layoutItem>
<!-- This row 2 is not visible -->
<lightning:layoutItem padding="around-small" size="3">
<div class="slds-p-around_medium lgc-bg">
<lightning:input type="email" name="email1" value="abc#domain.com" label="Email" required="true" />
</div>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small" size="3">
<div class="slds-p-around_medium lgc-bg">
<lightning:input type="tel" label="Phone" name="phone" required="true" />
</div>
</lightning:layoutItem>
</lightning:layout>
Please visit the link below to know more about Grid in Aura.
https://www.lightningdesignsystem.com/utilities/grid/
Thanks
Related
<form className='confession-form' onSubmit={this.handleSubmit}>
<div className="form-group">
<div className="select-box">
<div className={this.state.selectOptionActive ? 'options-container active' : 'options-container'}>
<div className="option" onClick={this.selectOption}>
<input type="radio" name="category" id="dream" className="cat-radio" />
<label htmlFor="dream">Dream</label>
</div>
<div className='option' onClick={this.selectOption}>
<input type="radio" name="category" id="guilt" className="cat-radio" />
<label htmlFor="guilt">Guilt</label>
</div>
<div className='option' onClick={this.selectOption}>
<input type="radio" name="category" id="pain" className="cat-radio" />
<label htmlFor="pain">Pain</label>
</div>
<div className="option" onClick={this.selectOption}>
<input type="radio" name="category" id="wild" className="cat-radio" />
<label htmlFor="wild">Wild</label>
</div>
<div className="option" onClick={this.selectOption}>
<input type="radio" name="category" id="regret" className="cat-radio" />
<label htmlFor="regret">Regret</label>
</div>
<div className="option" onClick={this.selectOption}>
<input type="radio" name="category" id="fantasy" className="cat-radio" />
<label htmlFor="fantasy">Fantasy</label>
</div>
<div className="option" onClick={this.selectOption}>
<input type="radio" name="category" id="other" className="cat-radio" />
<label htmlFor="other">Other</label>
</div>
</div>
<div className="selected" onClick={() => this.setState({selectOptionActive: !this.state.selectOptionActive})}>
{
this.state.optionSelected ? (
this.state.optionSelected
) : (
'Select Category'
)
}
<span className={this.state.selectOptionActive ? 'mdi mdi-chevron-up' : 'mdi mdi-chevron-down'}></span>
</div>
</div>
</div>
<textarea name="confession" id="confession" className='confession-body' placeholder='What is your confession?'></textarea>
<ReCAPTCHA className="recaptcha" sitekey={process.env.REACT_APP_SITE_KEY} size="normal" />
<button className='btn-confess'>Confess</button>
i have this react class compenet with a react-google-recaptcha
if i keep refreshing it sometimes the recaptcha doesn't show up.
and also if a navigate to my form page from home page then back to home then back to form page again it recaptcha doesnt show up and also i check the inspect element the component recaptcha is only (empty div with a class recaptcha)
How can I align my labels, inputs, and textarea on the same line?
export default function Display() {
...
return (
<form onSubmit={handleChange}>
<div className="mb-4 align-middle">
<label>
Title :
<input
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Title"
/>
</label>
<label>
{" "}
Comment :
<textarea
value={comment}
placeholder="comment"
onChange={(e) => setComment(e.target.value)}
cols="50"
rows="3"
/>
</label>
</div>
</form>
);
}
Here a picture (what I have vs expectations):
Set the parent div to display: flex and flex-direction: row
...
return (
<form onSubmit={handleChange}>
<div className="mb-4 align-middle" style={{display: 'flex', flexDirection: 'row'}}>
<label>
Title :
<input
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Title"
/>
</label>
<label>
{" "}
Comment :
<textarea
value={comment}
placeholder="comment"
onChange={(e) => setComment(e.target.value)}
cols="50"
rows="3"
/>
</label>
</div>
</form>
);
}```
You can use flex properties of tailwind css to align them in a same row. Also I have wrapped the the two inputs in two separate rate divs.
export default function Display() {
...
return (
<form onSubmit={handleChange}>
<div className="mb-4 align-middle flex flex-row items-center justify-center space-x-10">
<div>
<label>
Title :
<input
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Title"
/>
</label>
</div>
<div>
<label>
{" "}
Comment :
<textarea
value={comment}
placeholder="comment"
onChange={(e) => setComment(e.target.value)}
cols="50"
rows="3"
/>
</label>
</div>
</div>
</form>
);
}
I currently have a sidebar, and a page (home.component.js) to the right of this sidebar.
To make the content not fall behind the sidebar, I have included a padding left of 20vw in the body of my index.css
background: #f0f0f0 !important;
min-height: 100vh;
display: flex;
font-weight: 400;
font-family: 'Inter';
padding-left: 20vw;
}
However, this is casing the same padding to appear on my sign up form, featured below
Code for sign-up page is below
import React, { Component } from "react";
import { BrowserRouter } from "react-router-dom";
import TopNav from "./TopNav"
export default class SignUp extends Component {
render() {
return (
<navbar>
<TopNav />
</navbar>,
<div className="auth-wrapper">
<div className="auth-inner">
<form>
<h4>Sign Up</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever
</p>
<div className="form-group">
<label>First name</label>
<input type="text" className="form-control" placeholder="First name" />
</div>
<div className="form-group">
<label>Last name</label>
<input type="text" className="form-control" placeholder="Last name" />
</div>
<div className="form-group">
<label>Email address</label>
<input type="email" className="form-control" placeholder="Enter email" />
</div>
<div className="form-group">
<label>Password</label>
<input type="password" className="form-control" placeholder="Enter password" />
</div>
<p classname="forgot-password text-right">
Already registered log in?
</p>
<button type="submit" className="button">Sign Up</button>
</form>
</div>
</div>
);
}
}
How can I make this padding only appear on my homepage, and not carry forward to my Sign Up page, so the sign up page has no padding-left?
Homepage
render() {
return (
<div style={{ display: "flex" }}>
<Sidebar />
<h1>Right of sidebar page </h1>
</div>
);
}
}
I am using the class component here Consider selecting Yes or No value depending on whether to show or hide the div.
I wanted to do the same thing with multiple div. But here if I am selecting yes then both the div are open. And not close to clicked on no value.
Here is my code:
class PersonalInfo extends Component {
constructor(props) {
super(props);
this.divstatus1 = this.divstatus1.bind(this);
this.divstatus2 = this.divstatus2.bind(this);
this.state = {
value1: 'no',
value2: 'no'
};
}
divstatus1 = (e) => {
this.setState({ value1: e.target.value1 });
}
divstatus2 = (e) => {
this.setState({ value2: e.target.value2 });
}
render() {
return (
<div>
<h3 className="showbase_header">Passport Details</h3>
<div className="form-group">
<label htmlFor="orderby"> Do you have passport ?</label>
<select className="form-control orderby" onChange={this.divstatus1}>
<option value="" selected>Select</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<br></br>
<div className={this.state.value1} >
<div className="row">
<div className="col-md-6 form-group">
<label htmlFor="name">Passport Number
<span className="required">*</span>
</label>
<input type="text" id="firstname" aria-required="true" size={30} name="firstname" className="form-control" placeholder="" />
</div>
<div className="col-md-6 form-group">
<label htmlFor="name">Place Of Issue
<span className="required">*</span>
</label>
<input type="text" id="lastname" aria-required="true" size={30} name="lastname" className="form-control" placeholder="" />
</div>
</div>
<div className="row">
<div className="col-sm-6 form-group">
<label htmlFor="expirydate">Expiry Date
<span className="required">*</span>
</label>
<input type="date" id="expirydate" aria-required="true" size={30} name="expirydate" className="form-control" placeholder="" />
</div>
<div className="col-sm-6 form-group">
<label htmlFor="issuedate">Issue Date
<span className="required">*</span>
</label>
<input type="date" id="issuedate" aria-required="true" size={30} name="issuedate" className="form-control" placeholder="" />
</div>
</div>
</div>
</div>
<div className="form-group">
<h3 className="showbase_header">Representation</h3>
<select className="form-control orderby" onChange={this.divstatus2}>
<option value="">Select</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select><br />
<div className={this.state.value2} >
<div class="row">
<div className="col-sm-6 form-group">
<label htmlFor="name">Name
<span className="required">*</span>
</label>
<input type="text" id="name" aria-required="true" size={30} name="name" className="form-control" placeholder="" />
</div>
<div className="col-sm-6 form-group">
<label htmlFor="number">Contact Number
<span className="required">*</span>
</label>
<input type="number" id="name" aria-required="true" size={30} name="number" className="form-control" placeholder="" />
</div>
</div>
</div>
</div>
</div>
);
}
}
export default PersonalInfo;
I have added in main.css
.yes{display: block;}
.no{display: none;}
Can you try this,
divstatus1 = (e) => {
this.setState({ value1: e.target.value });
}
divstatus2 = (e) => {
this.setState({ value2: e.target.value });
}
option does not have an attribute called value1 or value2
I am trying to make what I think is called sub components in React though I can't find any official up to date documentation on how to do this. My issue is I would like to make a large form with different sections broken up as bootstrap cards, within a card I want an arbitrary number of rows of inputs.
Ex)
Section 1
First_Name Last_Name
Email_Address
Section 2
Address
City State Zip
The code looks something like this for Section 1:
<div className="MyCard floatingCard card">
<h5 className="MyCardHeader card-header">Section 1</h5>
<div className="MyCardBody card-body">
{/* Row 1 */}
<div className="row">
<div className="form-group col-md-6" style={{ marginBottom: "2em" }}>
<input />
</div>
<div className="form-group col-md-6" style={{ marginBottom: "2em" }}>
<input />
</div>
</div>
{/* Row 2 */}
<div className="row">
<div className="form-group col-md-12" style={{ marginBottom: "2em" }}>
<input />
</div>
</div>
</div>
</div>
The above is not very clean, and I would also need to do the same for section 2, is there a way to make this look like:
<FormSection header="Section1">
<FormRow>
<Input name="firstName" label="First Name" />
<Input name="lastName" label="Last Name" />
</FormRow>
<FormRow>
<Input name="email" label="Email address" />
</FormRow>
</FormSection>
<FormSection header="Section2">
<FormRow>
<Input name="email" label="Email address" />
</FormRow>
<FormRow>
<Input name="city" label="City" />
<Input name="state" label="State" />
<Input name="zip" label="Zip" />
</FormRow>
</FormSection>