We Keep Coding

justify content space between wont show a div

I'm learning React by coding, here i have two different images and under those should be div with 20px height and brown background color, and as you can see i have put height :"100%" and justifyContent: "space-between" so now i should be able to see that div under images, why it isnt showing ?
ttry it here:
https://codesandbox.io/s/amazing-http-6bdt88?file=/src/App.js
code:
import React from "react";
import { Allotment } from "allotment";
import "./styles.css";
import "allotment/dist/style.css";
export default function App() {
return (
<div className="App">
<div style={{ background: "blue", minHeight: "42px" }}>Monitor</div>
<div style={{ display: "flex", height: "100%", background: "darkblue" }}>
<div
style={{
border: "1px solid orange",
width: "100px",
height: "100%",
background: "gray"
}}
>
side content
</div>
<div style={{ width: "100%", height: "100%" }}>
<div
style={{
width: "100%",
height: "100%",
background: "red",
border: "3px solid yellow"
}}
>
<Allotment>
<Allotment.Pane>
<div style={{ height: "40px", background: "brown" }}></div>
<div
style={{
display: "flex",
height: "100%",
flexDirection: "column",
justifyContent: "space-between"
}}
>
<div>
<img
style={{ width: "100%", height: "auto" }}
src={require("./the-mandalorian.jpg")}
alt="cat"
/>
</div>
<div style={{ height: "20px", background: "brown" }}></div>
</div>
</Allotment.Pane>
<Allotment.Pane>
<div style={{ height: "40px", background: "brown" }}></div>
<div
style={{
display: "flex",
height: "100%",
flexDirection: "column",
justifyContent: "space-between"
}}
>
<div>
<img
style={{ width: "100%", height: "auto" }}
src={require("./nature.jpg")}
alt="cat"
/>
</div>
<div style={{ height: "20px", background: "brown" }}></div>
</div>
</Allotment.Pane>
</Allotment>
</div>{" "}
</div>
</div>
</div>
);
}

<img
style={{ width: "100%", height: "auto" }}
src={require("./the-mandalorian.jpg")}
alt="cat"
/><div style={{ height: "20px", background: "brown" }}></div>
try this? hope it helps

The problem is inside <Allotment.Pane> tag.
In your second <div> element inside <Allotment.Pane> change the style height: "100%" to height: "auto"
You don't see the brown div element because your images parent div element is using the whole column with the height of 100%. So the below HTML element has been pushed out.
If you add border: '1px solid white' to the images parent container you will see what I mean.
Try this
<Allotment>
<Allotment.Pane>
<div style={{ height: "40px", background: "brown" }}></div>
<div
style={{
display: "flex",
height: "85%",
flexDirection: "column",
justifyContent: "space-between",
border: "1px solid white"
}}
>
<div>
<img
style={{ width: "100%", height: "auto" }}
src={require("./the-mandalorian.jpg")}
alt="cat"
/>
</div>
</div>
<div
style={{
height: "15%",
background: "brown",
border: "1px solid white"
}}
></div>
</Allotment.Pane>
<Allotment.Pane>
<div style={{ height: "40px", background: "brown" }}></div>
<div
style={{
display: "flex",
height: "85%",
flexDirection: "column",
justifyContent: "space-between",
border: "1px solid white"
}}
>
<div>
<img
style={{ width: "100%", height: "auto" }}
src={require("./nature.jpg")}
alt="cat"
/>
</div>
</div>
<div style={{ height: "15%", background: "brown" }}></div>
</Allotment.Pane>
</Allotment>

Hi so i made a few little correction, look for ***********HERE
try playing with the sizes of your containers. remember that Bottom
and Right go on forever. So I you use 100% of height and there is no bottom
import React from "react";
import { Allotment } from "allotment";
import "./styles.css";
import "allotment/dist/style.css";
export default function App() {
return (
<div className="App">
<div style={{ background: "blue", minHeight: "42px" }}>Monitor</div>
<div style={{ display: "flex", height: "100%", background: "darkblue" }}>
<div
style={{
border: "1px solid orange",
width: "100px",
height: "100%",
background: "gray"
}}
>
side content
</div>
<div style={{ width: "100%", height: "100%" }}>
<div
style={{
width: "100%",
height: "100vh",// ***********HERE
background: "red",
border: "3px solid yellow"
}}
>
<Allotment>
<Allotment.Pane>
<div style={{ height: "40px", background: "brown" }}></div>
<div
style={{
display: "flex",
height: "50vh", // ************HERE
flexDirection: "column",
justifyContent: "space-between",
}}
>
<div>
<img
style={{ width: "100%", height: "auto" }}
src={require("./the-mandalorian.jpg")}
alt="cat"
/>
</div>
<div style={{ height: "20px", background: "brown" }}></div>
</div>
</Allotment.Pane>
<Allotment.Pane>
<div style={{ height: "40px", background: "brown" }}></div>
<div
style={{
display: "flex",
height: "50vh", // *********************HERE
flexDirection: "column",
justifyContent: "space-between"
}}
>
<div>
<img
style={{ width: "100%", height: "auto" }}
src={require("./nature.jpg")}
alt="cat"
/>
</div>
<div style={{ height: "20px", background: "brown" }}></div>
</div>
</Allotment.Pane>
</Allotment>
</div>{" "}
</div>
</div>
</div>
);
}

How to insert the input data dynamically in table for particular ID in react JS?

[In this I want to store the value of marks,id,name of each cell in objects of an array..
I try it but not get correct answer please help me how to store marks and id of each cells in objects of an array
const [values, setValues] = useState(new Array(tableData.length).fill(''));
return (
<TableContainer>
<Table style={{ height: 'max-content' }} stickyHeader>
<TableHead>
<TableRow>
<TableCell
style={{
border: '0px solid transparent',
fontFamily: "'Inter', sans-serif",
}}
align='center'
>
Roll Number
</TableCell>
<TableCell
style={{
border: '0px solid transparent',
fontFamily: "'Inter', sans-serif",
}}
align='center'
>
Name
</TableCell>
<TableCell
style={{
border: '0px solid transparent',
fontFamily: "'Inter', sans-serif",
}}
align='center'
>
Email
</TableCell>
<TableCell
style={{
border: '0px solid transparent',
fontFamily: "'Inter', sans-serif",
}}
align='center'
>
Marks
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{tableData.map((data, index) => (
<>
<TableRow>
<TableCell
key={index}
style={{
border: '0px solid transparent',
fontFamily: "'Inter', sans-serif",
}}
align='center'
>
{data.roll}
</TableCell>
<TableCell
key={index}
style={{
border: '0px solid transparent',
fontFamily: "'Inter', sans-serif",
}}
align='center'
>
{data.name}
</TableCell>
<TableCell
key={index}
style={{
border: '0px solid transparent',
fontFamily: "'Inter', sans-serif",
}}
align='center'
>
{data.email}
</TableCell>
<TableCell
key={index}
style={{
border: '0px solid transparent',
fontFamily: "'Inter', sans-serif",
}}
align='center'
>
<input
key={index}
type={'text'}
style={{
border: '1px solid black',
width: '66px',
height: '32px',
background: '#F2F2F2',
paddingLeft: '5px',
}}
required
value={values[index]}
onChange={(e) => {
setValues(e.target.value);
}}
/>
</TableCell>
</TableRow>
</>
))}
</TableBody>
</Table>
</TableContainer>
);
[1]: https://i.stack.imgur.com/oGvYW.png![enter image description here](https://i.stack.imgur.com/usHRa.png)

You should set the key attribute only for the parent TableRow element
You could initialize the values state as an object of the form { id, value } and update the value corresponding to the id changed.
This configuration should prevent potential errors due to table filtering and index mismatches:
const [values, setValues] = useState(tableData.map(data => ({ id: data.id, value: ''})));
const handleValueChange = (e, id) => {
const otherValues = values.filter(v => v.id !== id);
const updatedValue = { id, value: e.target.value };
setValues({ ...otherValues, updatedValue })
}
return (
<TableContainer>
<Table style={{ height: 'max-content' }} stickyHeader>
...
<TableBody>
{tableData.map((data, index) => (
<TableRow key={data.id}>
<TableCell
style={{
border: '0px solid transparent',
fontFamily: "'Inter', sans-serif",
}}
align='center'
>
{data.roll}
</TableCell>
<TableCell
style={{
border: '0px solid transparent',
fontFamily: "'Inter', sans-serif",
}}
align='center'
>
{data.name}
</TableCell>
<TableCell
style={{
border: '0px solid transparent',
fontFamily: "'Inter', sans-serif",
}}
align='center'
>
{data.email}
</TableCell>
<TableCell
style={{
border: '0px solid transparent',
fontFamily: "'Inter', sans-serif",
}}
align='center'
>
<input
type='text'
style={{
border: '1px solid black',
width: '66px',
height: '32px',
background: '#F2F2F2',
paddingLeft: '5px',
}}
required
value={values.find(v => v.id === data.id)?.value || ''}
onChange={(e) => { handleValueChange(e, data.id); }}
/>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);

How to put div over image with HTML and CSS?

I'm still a beginner in programming and I'm doing a project to improve knowledge.
I need to insert a div with text on top of an image, I'm trying to recreate the example of the image below:
Half of the div is an image and the other half is text. Can you tell me how I can do that?
Here's my code I put into codesandbox
import React from "react";
import "./styles.css";
export default function App() {
return (
<div className="App">
<h1>Restaurant</h1>
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "baseline",
alignItems: "baseline",
height: "200px",
width: "100%",
maxWidth: "300px"
}}
>
<div>
<img
style={{
width: "100%",
height: "100%"
}}
src="https://b.zmtcdn.com/data/collections/271e593eb19475efc39021c6e92603db_1454591396.jpg"
alt=""
className="img"
/>
</div>
<div className="divText">
<span
style={{
color: "#fff",
backgroundColor: "#000"
}}
>
Lorem Ipsum! Lorem Ipsum! Lorem Ipsum!
</span>
</div>
</div>
</div>
);
}
Thank you in advance.

You have two solutions to set a background image :
use the background properties in CSS
.divText {
background-image:url("https://b.zmtcdn.com/data/collections/271e593eb19475efc39021c6e92603db_1454591396.jpg");
}
use positioning to make a custom layout
export default function App() {
return (
<div className="App">
<h1>Restaurant</h1>
<div
style={{
position: "relative",
height: "200px",
width: "300px"
}}
>
<img
style={{
width: "100%",
height: "100%"
}}
src="https://b.zmtcdn.com/data/collections/271e593eb19475efc39021c6e92603db_1454591396.jpg"
alt=""
className="img"
/>
<div className="divText"
style={{
position: "absolute",
bottom: 0,
height: "50%",
width: "100%",
color: "#fff",
backgroundColor: "#000",
opacity: 0.7
}}>
Lorem Ipsum! Lorem Ipsum! Lorem Ipsum!
</div>
</div>
</div>
);
}

Maybe you could do something like this?
""
.wrapper {
width: 400px;
height: 200px;
position: relative;
}
picture {
position: absolute;
z-index: -1;
}
picture img {
object-fit: cover;
top: 0;
}
.text-overlay {
top: 50%;
height: 50%;
position: relative;
background-color: white;
display: flex;
z-index: 2;
padding: 10px;
opacity: 0.8;
font-family: sans-serif;
}
<div class="wrapper">
<picture>
<img src="https://images.unsplash.com/photo-1601758064224-c3c5ec910095?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2047&q=80"
width="400px"
height="200px"
style=" "/>
</picture>
<div class="text-overlay">
<p>Hello</p>
</div>
</div>

And this solution from me:
style.css:
.divText {
position: absolute;
height: 50%;
background-color: white;
bottom: 0;
}
App.js:
import React from "react";
import "./styles.css";
export default function App() {
return (
<div className="App">
<h1>Restaurant</h1>
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "baseline",
alignItems: "baseline",
height: "200px",
width: "100%",
maxWidth: "300px",
position: "relative"
}}
>
<div
style={{
height: "inherit"
}}>
<img
style={{
width: "100%",
height: "100%"
}}
src="https://b.zmtcdn.com/data/collections/271e593eb19475efc39021c6e92603db_1454591396.jpg"
alt=""
className="img"
/>
</div>
<div className="divText">
<span
style={{
color: "#fff",
backgroundColor: "#000"
}}
>
Lorem Ipsum! Lorem Ipsum! Lorem Ipsum!
</span>
</div>
</div>
</div>
);
}

Form is not left align like the other tag in react form

So I am trying to align my form and the overall text format aroung to have every align left but it looks like this :
The goal is to have all the Form align on the left of the green. I tried to remove the left-margin by forcing it to 0px but it's not working.
Here is the code for the form itself:
const AccountForm = <div>
<Form style={{backgroundColor: "#00ff00"}}className="form-form-settings">
<Form.Row style={{width: "100%"}}>
<Form.Group as={Col} controlId="formGridFirstName">
<Form.Label className="form-label-settings">First Name</Form.Label>
<Form.Control bsPrefix="form-control-settings" type="text" placeholder="" value={this.state.userInfo.firstName}/>
</Form.Group>
<Form.Group as={Col} controlId="formGridLastName">
<Form.Label className="form-label-settings">Last Name</Form.Label>
<Form.Control bsPrefix="form-control-settings" type="text" placeholder="" value={this.state.userInfo.lastName} />
</Form.Group>
</Form.Row>
<Form.Row style={{width: "100%"}}>
<Form.Label className="form-label-settings">Username</Form.Label>
<Form.Control bsPrefix="form-control-settings" type="text" placeholder="" value={this.state.userInfo.userName}/>
</Form.Row>
<Form.Row style={{width: "100%"}}>
<Form.Label className="form-label-settings">Email</Form.Label>
<Form.Control bsPrefix="form-control-settings" type="email" placeholder="" value={this.state.userInfo.email}/>
</Form.Row>
{ !updatePassword &&
<Form.Row style={{width: "100%", marginBottom: "20px"}}>
<Form.Label className="form-label-settings" >Password</Form.Label>
<Form.Control bsPrefix="form-control-settings" type="password" placeholder="" value="123"/>
</Form.Row>
}
{
updatePassword &&
<Form.Row style={{width: "100%"}}>
<Form.Label className="form-label-settings">Current Password</Form.Label>
<Form.Control bsPrefix="form-control-settings" type="password" placeholder="" value="123"/>
</Form.Row>
}
{
updatePassword &&
<Form.Row style={{width: "100%", marginBottom: "20px"}}>
<Form.Label className="form-label-settings">New Password</Form.Label>
<Form.Control bsPrefix="form-control-settings" type="password" placeholder=""/>
</Form.Row>
}
</Form>
</div>;
and the form is stored in
<div className="settings-tab-right">
<h1> {TextContents.Account} </h1>
<div>
{AccountForm}
{!updatePassword && <a href="#" className="settings-link-like-btn" onClick={this.onUpdatePassword}>{TextContents.UpdatePassword}</a>}
{updatePassword && <a href="#" className="settings-link-like-btn" onClick={this.onSavePassword}>{TextContents.SavePassword}</a>}
<div style={{width: "100%", textAlign: "right"}}>
<Button style={{marginLeft:"0px"}} bsPrefix="blue-btn-no-space" ref="#">{TextContents.SaveChanges}</Button>
</div>
</div>
</div>;
and css associated:
.form-label-settings {
font-family: Source Sans Pro;
font-size: 20px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.51;
letter-spacing: normal;
text-align: left;
color: #cecece;
margin-top: 10px;
margin-left: 20px;
}
.form-control-settings {
object-fit: contain;
border-radius: 20px;
background-color: #f4f7f8;
}
.form-form-settings {
margin-top: 40px;
margin-bottom: 20px;
margin-left: auto;
margin-right:auto;
width: 100%;
}
.settings-tab-right{
margin: 40px 40px 40px 40px;
}
Any idea, how to make sure that the field used all the width space ? I am not looking to have any margin

I think the problem with margin-left auto right auto maybe better try to center your element with flexbox and align the child element with align-self or align-content. and instead of using margin in form-form-settings you could write them in one line that's better I think.

Remove margin-left:auto; margin-right:auto; from class
form-form-settings

increasing the width of select dropdown for material ui

I am trying to increase the width of drop down to 400px.
so I gave inline styles but still its not changing.
when I debugged I found the width is coming from this class.
not sure how to overwrite.
can you tell me how to fix it.
providing my code snippet below.
https://stackblitz.com/edit/react-4xmiuz?file=demo.js
<div style={{ width: '400', border: '1px solid green' }}
className={classes.root}>
<FormControl style={{ width: '400', border: '1px solid green' }}
variant="outlined" className={classes.formControl}>
<InputLabel
ref={ref => {
this.InputLabelRef = ref;
}}
htmlFor="outlined-age-native-simple"
style={{ width: '400', border: '1px solid green' }}
>
Age
</InputLabel>
<Select
native
value={this.state.age}
onChange={this.handleChange('age')}
style={{ width: '400 !important', border: '1px solid red' }}
input={
<OutlinedInput
name="age"
labelWidth={this.state.labelWidth}
id="outlined-age-native-simple"
style={{ width: '400', border: '1px solid green' }}
/>
}
>
<option style={{ width: '400', border: '1px solid green' }}
value="" />
<option style={{ width: '400', border: '1px solid green' }}
value={10}>Ten</option>
<option style={{ width: '400', border: '1px solid green' }}
value={20}>Twenty</option>
<option style={{ width: '400', border: '1px solid green' }}
value={30}>Thirty</option>
</Select>
</FormControl>
</div>

I think it should be:
<Select
style={{ width: 400, border: '1px solid red' }}
...
/>
Result: