Auto Update height of image in sync with main container element - Chatgpt PROMPT & Solutions
Wed Jun 21 2023 07:32:51 GMT+0000 (Coordinated Universal Time)
Saved by @JISSMONJOSE #react.js #css #javascript
"""
<main className="main-container">
<section className="image-section">
<div className="image-container">
<img
src={WelcomeImageUserOnBoarding}
alt="Welcome User On Boarding Image"
sizes=""
/>
<div className="image-overlay">
<h2 className="image-title">Welcome</h2>
<p className="image-content">The DIFC Courts is an independent common law judiciary based in the Dubai International Financial Centre (DIFC) with jurisdiction governing civil and commercial disputes.</p>
</div>
</div>
</section>
<section className="registration-section">
<Typography className="question" sx={{ mt: 2, mb: 1 }}>
Register Now
</Typography>
<Typography className="question-helper">
Enter Below Details to Continue
</Typography>
<div className="button-wrapper">
<button
type="button"
>
<img
src={FingerPrintIcon}
className="finger-print-icon"
alt="Finger Print Icon"
sizes=""
/>
Signup with UAE Pass
</button>
</div>
<Typography
className="question-helper sub-text"
sx={{ mt: 3 }}
>
Or Enter Details Below
</Typography>
<form className="form mt-3">
<div className="row form-row mb-4">
{/* FirstName Col */}
<div className="col-md-6">
<label
htmlFor="firstname"
className="form-label w-100 firstname-label"
>
FirstName*
</label>
<input
type="text"
className="form-control firstname-input"
id="firstname"
placeholder="John"
/>
</div>
{/* LastName Col */}
<div className="col-md-6">
<label
htmlFor="lastname"
className="form-label w-100 lastname-label"
>
LastName*
</label>
<input
type="text"
className="form-control lastname-input"
id="lastname"
placeholder="Doe"
/>
</div>
</div>
<div className="row form-row mb-4">
{/* gender selection buttons */}
<div className="col-md-6">
<label
htmlFor="gender"
className="form-label w-100 gender-label"
>
Gender
</label>
<OptionButtons />
</div>
{/* Date of Birth Col */}
<div className="col-md-6">
<label
htmlFor="dob"
className="form-label w-100 dob-label"
>
Date of Birth*
</label>
<DatePicker
onChange={handleDatePicker}
value={dateOfBirth}
renderInput={(params: any) => (
<TextField
{...params}
inputProps={{
...params.inputProps,
placeholder: 'Select Date of Birth',
}}
// {...register('dateOfBirth', {
// required: true,
// })}
className="date-picker date-picker-input"
/>
)}
className="date-picker-field"
/>
</div>
</div>
<div className="row form-row mb-2">
{/* Email Col */}
<div className="col-md-6">
<label
htmlFor="email"
className="form-label w-100 email-label"
>
Primary Email*
</label>
<input
type="email"
className="form-control email-input"
id="email"
placeholder="abc@babc.com"
/>
</div>
{/* Mobile Number Col */}
<div className="col-md-6">
<label
htmlFor="mobile"
className="form-label w-100 mobile-label"
>
Primary Mobile Number*
</label>
<input
type="text"
className="form-control mobile-input"
id="mobile"
placeholder="+971 50 123 4567"
/>
</div>
</div>
<div className="row form-row mb-4">
{/* Secondary Email Col */}
<div className="col-md-6">
<div className="secondary-email">
<span>
Add Secondary Email
</span>
{/* increase the size of below AiOutlinePlusCircle icon */}
<AiOutlinePlusCircle
className="secondary-email-icon"
// increase the size
size={30}
/>
</div>
</div>
{/* Secondary Mobile Number Col */}
<div className="col-md-6">
<div className="secondary-mobile">
<span>
Add Secondary Mobile
</span>
<AiOutlinePlusCircle
className="secondary-mobile-icon"
// increase the size
size={30}
/>
</div>
</div>
</div>
{/* Select Services from dropdown list */}
<div className="row form-row mb-4">
<div className="col-md-12">
<label
htmlFor="services"
className="form-label w-100 services-label"
>
How did you know about this service?
</label>
{/* add autocomplete to select */}
<Autocomplete
disablePortal
id="combo-box-demo"
options={services}
isOptionEqualToValue={(option, value) => option.label === value.label}
renderInput={(params) => (
<TextField
{...params}
placeholder="Social Media - LinkedIn / Twitter / Instagram"
className="services-input"
/>
)}
/>
</div>
</div>
{/* add new row */}
<div className="row form-row mb-4">
<div className="col-md-4">
{/* add a next step button that follows default styles */}
<button
type="button"
className="next-step-button"
>
Next
</button>
</div>
</div>
{/* add new row below */}
<div className="row form-row mb-4">
<div className="col-md-6">
{/* add a text 'Already have an account? Login ' */}
<span className="already-have-account">
Already have an account?
</span>
{/* wrap login by Link component */}
<Link
to="/accounts/login"
className="login-link"
>
Login
</Link>
</div>
</div>
</form>
</section>
</main>
"""
SASS
--------
"""
/* stylelint-disable */
.main-container {
display: flex;
width: 100%;
justify-content: center;
margin-top: 112px;
background: #FFFFFF;
border-radius: 20px;
}
.image-section {
position: relative;
flex: 1;
}
.image-section img {
width: 100%; /* Set the desired width */
height: auto; /* Maintain aspect ratio */
}
.registration-section {
flex: 1;
padding: 20px;
margin: 30px;
box-sizing: border-box;
overflow: hidden;
}
.image-container {
position: relative;
display: inline-block;
}
.image-overlay {
position: absolute;
bottom: 0;
left: 0;
padding: 20px;
margin-bottom: 130px;
}
.image-title {
font-family: 'Basis Grotesque Arabic Pro';
font-style: normal;
font-weight: 700;
font-size: 70px;
line-height: 64px;
letter-spacing: -0.04em;
text-transform: capitalize;
color: #FFFFFF;
}
.image-content {
color: #FFFFFF;
text-align: left;
font-family: 'Basis Grotesque Arabic Pro';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 19px;
}
.question {
font-family: "Basis Grotesque Arabic Pro" !important;
font-style: normal !important;
font-weight: 500 !important;
font-size: 40px !important;
line-height: 45px !important;
letter-spacing: -0.04em !important;
color: #1b202d !important;
}
.question-helper {
font-family: "Basis Grotesque Arabic Pro" !important;
font-style: normal !important;
font-weight: 300 !important;
font-size: 14px !important;
line-height: 18px !important;
color: #1b202d !important;
}
.button-wrapper {
margin-top: 40px;
}
.button-wrapper button {
width: 100%;
background: #000000;
border-radius: 5px;
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 17px;
color: #F5F5F5;
padding: 16px 50px;
}
.finger-print-icon {
margin-right: 14px;
}
.firstname-label,
.lastname-label,
.gender-label,
.email-label,
.mobile-label,
.services-label
{
font-family: 'Basis Grotesque Arabic Pro';
font-style: 'normal';
font-weight: 500;
font-size: 0.75rem;
line-height: 18px;
color: #1b202d;
margin-top: 0px !important;
}
.firstname-input,
.lastname-input,
.email-input,
.mobile-input,
.services-input
{
font-family: 'Basis Grotesque Arabic Pro' !important;
font-style: 'normal' !important;
font-weight: 500 !important;
font-size: 0.75rem !important;
line-height: 18px !important;
color: #1b202d !important;
height: 2.5rem !important;
}
.date-picker-field .date-picker-input {
font-family: 'Basis Grotesque Arabic Pro';
font-style: normal;
font-weight: 500;
font-size: 0.75rem;
line-height: 18px;
}
// right align secondary-email and secondary-mobile
.secondary-email,
.secondary-mobile {
text-align: right;
}
// add left spacing between secondary-email and secondary-email-icon
.secondary-email-icon {
margin-left: 10px;
}
// add left spacing between secondary-mobile and secondary-mobile-icon
.secondary-mobile-icon {
margin-left: 10px;
}
// add background: #023979;
// border-radius: 10px; to next-step-button
.next-step-button {
background: #023979;
border-radius: 10px;
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 17px;
color: #F5F5F5;
padding: 16px 50px;
border: none;
}
// add below style to already-have-account
.already-have-account {
font-family: 'Basis Grotesque Arabic Pro';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 16px;
color: #494A53;
}
// add below style to login-text
.login-link {
font-family: 'Basis Grotesque Arabic Pro';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 16px;
color: #1B202D;
margin-left: 5px;
text-decoration: underline;
text-underline-offset: 4px;
}
"""
You are a CSS expert.
Client wanrs to Auto Update the WelcomeImageUserOnBoarding image height when main container height increments. image height should be in sync
with the height change of main container div element.
So when main container height updates image height also auto update with same. Thus it wont leave any spacing at bottom.
I have given the jsx and sass file for your reference.
If you have any questions you can ask.
Solutions:
To achieve the desired effect of the `WelcomeImageUserOnBoarding` image height being in sync with the height change of the `main-container` div element, you can use CSS to make the image responsive and adjust its height accordingly.
Here's an updated version of the SASS code with modifications to make the image height responsive:
```sass
.main-container {
display: flex;
width: 100%;
justify-content: center;
margin-top: 112px;
background: #FFFFFF;
border-radius: 20px;
position: relative; /* Add position relative to main-container */
}
.image-section {
position: relative;
flex: 1;
}
.image-section img {
width: 100%;
height: 100%; /* Set the image height to 100% of the parent container */
object-fit: cover; /* Maintain aspect ratio and cover the entire container */
}
.registration-section {
flex: 1;
padding: 20px;
margin: 30px;
box-sizing: border-box;
overflow: hidden;
}
.image-container {
position: relative;
display: inline-block;
width: 100%; /* Set the image container width to 100% */
height: 100%; /* Set the image container height to 100% */
}
.image-overlay {
position: absolute;
bottom: 0;
left: 0;
padding: 20px;
margin-bottom: 130px;
}
/* Rest of the styles remain the same */
```
In this code, I've added `position: relative` to the `main-container` to establish a positioning context for its child elements. Then, I've modified the styles for the `image-section`, `image-container`, and `image-section img` to make the image responsive. By setting the image height to `100%` of the parent container and using `object-fit: cover`, the image will automatically adjust its height to match the height of the `main-container`.
Please ensure you include this updated SASS code in your project and recompile it to generate the CSS styles.
Comments