Is there a way to display these panels in a scrollable table layout?

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.

javascripthtmlcssreactjsflexbox

Answer №1

To ensure that your items are displayed correctly, make sure to include flex-wrap: wrap in the container(.locations-container). This will override the default value of nowrap. If you intend to use overflow-y: scroll, be sure to define the height as well, for example: height:200px;

If you want only 3 items per row, consider replacing flex: 1 0 1152px;. Using a percentage like flex: 1 0 30%; is recommended over specifying pixel values without specific reasoning.

By setting flex-grow: 1, the need for flex-basis to be 33% is eliminated, which could result in fewer items per row due to margins and padding considerations.

The purpose of flex-basis with flex-grow defined lies in enforcing a wrap when necessary. With flex-basis: 30%, there is ample space for margins while preventing overcrowding. Keep in mind that without enough space available, considering the min-width, achieving 3 items per row may not be possible.

For responsive design issues, utilize media queries. An example would be using width:952px; within the media query.

.locations-container {
  display: flex;
  /*justify-content: center;
  padding: 0 24px;*/
  overflow-y: scroll; /*if you set overflow-y: scroll, you need to define the height.example:*/
  height:200px;
  width: 952px; /*demo purpose since you had min-width*/
  flex-wrap: wrap; /*flex-wrap: wrap on the container. Is necessary, because it overrides the default value, which is nowrap*/
}

@media (min-width: 952px){
  .locations-container{
    width: 100%;
  }
}

.locations-container div {
  display: flex;
  /*flex: 1 0 1152px;*//*I'm not sure why you use 1152px, but % should be preferable*/
  flex: 1 0 30%;
  /*flex-flow: wrap;*//*doesn't seem to do anything*/
}

.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 class="location">
      <h1>FlexBox</h1>
      <div>
        <span>this is the span element</span>
      </div>
    </div>
  </div>
  <div>
    <div class="location">
      <h1>FlexBox</h1>
      <div>
        <span>this is the span element</span>
      </div>
    </div>
  </div>
  <div>
    <div class="location">
      <h1>FlexBox</h1>
      <div>
        <span>this is the span element</span>
      </div>
    </div>
  </div>
  <div>
    <div class="location">
      <h1>FlexBox</h1>
      <div>
        <span>this is the span element</span>
      </div>
    </div>
  </div>
  <div>
    <div class="location">
      <h1>FlexBox</h1>
      <div>
        <span>this is the span element</span>
      </div>
    </div>
  </div>
  <div>
    <div class="location">
      <h1>FlexBox</h1>
      <div>
        <span>this is the span element</span>
      </div>
    </div>
  </div>
  <div>
    <div class="location">
      <h1>FlexBox</h1>
      <div>
        <span>this is the span element</span>
      </div>
    </div>
  </div>
  <div>
    <div class="location">
      <h1>FlexBox</h1>
      <div>
        <span>this is the span element</span>
      </div>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The issue with React Testing using Jest: The domain option is necessary

I've recently developed a React app that implements Auth0 for Authentication. Right now, I'm working on setting up a test suite using Jest to test a specific function within a component. The function I want to test is createProject() in a React ...

javascriptreactjsunit-testingjestjsauth0

Are there any disadvantages to utilizing bindActionCreators within the constructor of a React component when using Redux?

I have come across numerous instances where the bindActionCreators function is used within the mapDispatchToProps function as shown below: ... const mapDispatchToProps = (dispatch, props) => ({ actions: bindActionCreators({ doSomething: som ...

javascriptreactjsredux

Add drop caps to every individual word within a hyperlink

Is there a way to recreate the menu effect similar to using CSS fonts and drop caps for each word? I'm aware of the CSS code: p.introduction:first-letter { font-size : 300%; } that enlarges the first character of the first word, but I want this ef ...

javascripthtmlcsscapitalization

Tips for eliminating unnecessary or duplicate dependencies in package.json files

While I am aware that this question has been asked previously on Stack Overflow, I have found that depcheck does not work effectively for me. It provides numerous false alerts and requires specific configuration for libraries like babel, eslint, etc. How ...

javascriptnode.jsreactjsnpmyarnpkg

Issue with ReactJS toggling radio button states not functioning as expected

I've encountered an issue with my code below where the radio buttons are not checking or unchecking when clicked. const Radio = props => { const { name } = props; return ( <div> <input id={name} type="radio" ...

reactjs

Sending form data via Ajax for a specific field ID

When sending data to an ajax script, I usually create a form tag and assign it an id like this: <form id="myForm"> Then, in the ajax script, I include the following code: data: $('#myForm').serialize(), This sends all the form data. How ...

javascriptphpjqueryajaxforms

Spin and flip user-submitted images with the power of HTML5 canvas!

I am currently working on a profile upload system where we are implementing image rotation using the HTML5 canvas object with JavaScript. Although the uploaded image is rotating, we are facing issues where parts of the image are being cut off randomly. So ...

javascriptjqueryhtmlhtml5-canvas

Determine if the user's request to my website is made through a URL visit or a script src/link href request

Presently, I am working on developing a custom tool similar to Rawgit, as a backup in case Rawgit goes down. Below is the PHP code I have created: <?php $urlquery = $_SERVER['QUERY_STRING']; $fullurl = 'http://' . $_SERVER['SE ...

javascriptphpjqueryhtml

Having difficulty passing a variable between two different PHP files

When attempting to modify data in the database for a specific user column, I encountered an issue. The code that I created only alters the data for the last user in the database, rather than the current user. For instance: Let's say I am logged in as ...

phphtmlmysqldatabase

Updating items within an array in a MongoDB collection

I am facing a challenge where I have to pass an array of objects along with their IDs from the client-side code using JSON to an API endpoint handled by ExpressJS. My next task is to update existing database records with all the fields from these objects. ...

javascriptarraysnode.jsmongodbexpress

Is it possible to define key strings as immutable variables in JavaScript/Node.js?

Having transitioned from the world of Java to working with Node.js + AngularJS for my current project, I have encountered a dilemma. There are certain "key Strings" that are used frequently in both client and server-side code. In Java, it is common practi ...

javascriptangularjsnode.js

Ensuring Package Security in NodeJS and NPM

Given the immense popularity of NodeJS and how NPM operates, what measures can be taken to prevent the installation of insecure or malware-laden packages? Relying solely on user feedback from sources like StackOverflow or personal blogs seems to leave a si ...

javascriptnode.jssecuritynpm

Adjusting the properties of a <span> tag when hovering over a different element

Query: I am trying to dynamically change the color of the span element with classes glyphicon and glyphicon-play when the user hovers over the entire element. How can I achieve this? Recommendation: .whole:hover > span.glyphicon.glyphicon-play { c ...

csshover

When I remove a user as admin, I am unable to retrieve all users to update the data table

I am currently working on an Admin Dashboard that includes a section for users. This section features a simple table displaying all the users in the MongoDB database along with some information. Additionally, there are functionalities to add a new user and ...

javascriptreactjsmongodbmaterial-ui

Encountered an unhandled promise rejection: TypeError - The Form is undefined in Angular 6 error

Whenever I attempt to call one .ts file from another using .Form, I encounter the following error: Uncaught (in promise): TypeError: this.Form is undefined The file that contains the error has imported the .ts file which I intend to pass values to. ...

javascriptangularangular6angular7

Generate a random word using Typed.js

Can Typed.js generate a random word for output? $(function(){ $(".element").typed({ strings: ["Lorem", "Ipsum", "Dolor"], typeSpeed: 0 }); }); The output should be one of the following words. (Lorem / Ipsum / Dolor) ...

javascriptjqueryhtmlrandomtyped.js

Use the inline IF statement to adjust the icon class depending on the Flask variable

Is it feasible to achieve this using the inline if function? Alternatively, I could use JavaScript. While I've come across some similar posts here, the solutions provided were not exactly what I expected or were implemented in PHP. <i class="f ...

javascriptpythonhtmlflaskjinja2

How do I create two distinct select fields in MaterialUI, using the same menu items, but have them function differently upon selection?

I am currently facing an issue with my 2 SelectFields where they both seem to be linked together. When I select an option in the first SelectField, the same option is automatically chosen in the second SelectField. How can I ensure that each SelectField ...

reactjsmaterial-ui

Do you think it is beneficial to have multiple forms utilizing the same actions, reducer, and API endpoint?

Currently, I am working with two forms that are nearly identical except for one field. Instead of storing the submitted data in a database, it is sent to an email address. Given that most of my actions and server-side handling are similar for both forms, ...

reactjsredux

What causes the slight shifting of on-screen elements when the doctype is removed from an HTML document?

During the process of converting from HTML4 to HTML5, I compared my html4 and html5 pages and noticed that removing deprecated elements after the doctype declaration was causing slight movements in on-screen elements. For example, in the code snippet below ...

csshtmldoctype