My aim is to replicate this specific styling:
https://i.stack.imgur.com/jz5lm.png
This type of table shown above is being dynamically imported via Redux:
class LocationList extends React.Component {
componentDidMount() {
this.props.fetchLocations();
}
renderLocation() {
return this.props.locations.map(location => {
return (
<div className="" key={location.id}>
<div className="location">
<h1>
{location.name}
{location.airport_code}
</h1>
<div className="location-secondary-info">
<span>
<MaterialIcon icon="airplanemode_active" />
{location.description}
</span>
</div>
</div>
</div>
);
});
}
render() {
return <div className="locations-container">{this.renderLocation()}</div>;
}
}
However, I am facing issues with getting the styling just right. The scrollable format you see above scrolls vertically.
I encountered difficulties implementing it correctly within JSX, so I turned to Codepen.io for assistance.
I struggled to achieve that table format and instead, it scrolled horizontally like one big row.
https://i.stack.imgur.com/4uXTR.png
.locations-container {
display: flex;
justify-content: center;
padding: 0 24px;
overflow-y: scroll;
}
.locations-container div {
display: flex;
flex: 0 1 1152px;
flex-flow: wrap;
}
.location {
border-left: 2px solid #49aaca;
padding: 14px;
margin: 12px 0;
flex: 1 1;
min-width: 275px;
max-width: 355px;
}
.location h1 {
padding: 0;
margin: 0;
font-family: sans-serif;
font-weight: 500;
font-size: 20px;
color: #454545;
text-transform: uppercase;
}
.location span {
font-family: "Roboto", sans-serif;
font-size: 12px;
color: #a3a3a3;
}
.location:hover {
background-color: #49aaca;
}
.location:hover h1 {
color: #fff;
}
.location:hover span {
color: #fff;
}<div class="locations-container">
<div>
<div class="location">
<h1>FlexBox</h1>
<div>
<span>this is the span element</span>
</div>
</div>
</div>
<div>
...
</div>Therefore, I have recreated it using pure HTML and CSS. Unfortunately, my knowledge in Flex is limited, preventing me from achieving this final design piece.