Enable Component to Exceed to the Following Line

I'm having trouble getting a map of a component to move to the next line (as indicated by the yellow arrow). Currently, instead of moving below, it is squeezing the Component (the Cards). I've added background colors for clarity. Any advice would be greatly appreciated!

https://i.sstatic.net/KKE78.png


<div className="border-2 h-screen bg-pink-300">
    <div className="flex justify-end px-10">
        <button className="border-2 border-secondary p-2 rounded-lg hover:border-opacity-20">Add Item +</button>
    </div>
           
    <div className="flex overflow-x-auto bg-green-500">
        {data.map((data) => (
            <MenuCard title={data.title} ingredients={data.ingredients} 
                      category={data.category} onSpecial={data.onSpecial} />
        ))}
    </div>
            
</div>
cssreactjsnext.jstailwind-css

Answer №1

Make sure to include the flex-wrap class within the parent div of MenuCard. Additionally, remove the overflow-x-auto class to prevent vertical scrolling of the container.

Your code should resemble this:

<div className="flex flex-wrap bg-green-500 ">
  {data.map((data) => (
    <MenuCard title={data.title} ingredients={data.ingredients} 
    category={data.category} onSpecial={data.onSpecial} />
  ))}
</div>

If any MenuCard instances attempt to shrink, remember to include the flex-shrink-0 class.

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

Error encountered while handling document events during server-side rendering in ReactJS

I am currently developing a React.js application that requires keyboard navigation for a horizontal scrolling carousel of items. In the existing version, only the left and right arrows are used for navigation, with Enter being used to make selections. I ha ...

javascriptreactjsexpress

The app I uploaded onto Heroku.com is experiencing technical difficulties and is currently not functioning

After deploying an application on Heroku.com for CI/CD in June, I encountered issues with the link becoming inactive. Click here for image description Despite purchasing a monthly Heroku subscription yesterday, I am still unable to access my application. ...

node.jsreactjsherokureact-router

Difficulty encountered when positioning a container using BootStrap 4

As a newcomer to the world of web development, I encountered an issue while trying to align a container on my webpage. Despite my efforts to center the container using (line 30), the page seems to update but there is no visible change. Can anyone help me ...

javascripthtmlcssbootstrap-4visual-web-developer

Tips for implementing a search feature in UI development?

I attempted to utilize the search functionality from , but encountered an issue where it does not overlay the text. https://i.sstatic.net/Me7if.png As shown in the image, the dropdown does not overlap with the text here. I simply want to have a dropdown l ...

next.js

Can additional scopes be added to the NextAuth provider while a session is active?

I am currently integrating NextAuth into my application for user authentication. I would like to enhance the functionality by adding more scopes to access the Google Fit API while the user is already logged in. Despite exploring the NextAuth documentation ...

next.jsgoogle-apigoogle-oauthgoogle-fitnext-auth

How can the Redux action success & error callback be used to activate a handler function in a React component?

I have implemented a registration feature that will display either a success or fail modal based on the API call response in a Redux action. My approach involves utilizing component-level state within the register component to handle the showing and hiding ...

reactjsreact-redux

How can Components be implemented across various Routes in React applications?

How can I implement Components on different routes in React? I attempted to achieve this with the following code, but I encountered an error: <Router> <App> <Route exact path='/signup' component={SignUp}/> ...

reactjsreact-router

In my upcoming Next.js project, it is essential for me to incorporate security headers

Recently, I encountered a problem with my Next.js application as I needed to incorporate security headers in the next.config.js file. Here is the snippet of my current code: // eslint-disable-next-line @typescript-eslint/no-var-requires const semi = requ ...

securitynext.jsfrontendresponse-headers

Tips for managing the error message "The key 'myOptionalKey' is optional in the 'myObject' type but necessary in the '{...}' type"

Issue I'm currently working on making a sortable table using a sample table component from Material-UI. I encountered an error when I included an optional key in the Data object. It seems that the type definition in the getComparator function does no ...

reactjstypescriptmaterial-ui

Repeatedly utilizing a drop-down menu

Can a <select> menu be written and utilized in multiple locations on a webpage? For instance: <select id="dm"> <option value="">Select Quantity</option> <option value="less ">50 - 60</option> <option value="me ...

javascriptjqueryhtmlcss

Using Slick Slider and Bootstrap CSS to display text on top of images

Currently, I am utilizing the slick slider from and I want to overlay text on top of the image. I tried using bootstrap carousel-caption, which works well with any image. However, with slick slider, it seems like the text is not at the highest level as I ...

javascriptcss

Tips for personalizing react-show-more text length with Material-UI Icons

In my SharePoint Framework webpart using React, I am currently utilizing the show more text controller. However, I am interested in replacing the "Show More" and "Show Less" string links with the ExpandMore and ExpandLess Material UI icons. Is there a way ...

javascripthtmlcssreactjsmaterial-ui

"TailwindCSS opts for the inclusion of prefexied utilities instead of relying

Trying to set the height of the div to h-2, with a class that includes height animation on medium devices. The issue is that even though h-2 should be used on mobile, tailwindcss still uses h-20 instead. Any thoughts on why this may be happening? Here i ...

cssreactjsnext.jstailwind-css

Encountering a TypeError stating that searchField.toLowerCase is not a function while employing hooks and redux in the

I've been working on a project to dive deeper into react. Recently, I made the switch to using hooks and attempted to integrate redux into it. However, I encountered an error that says: TypeError: searchField.toLowerCase is not a function After consu ...

javascriptreactjsreduxreact-hooks

When attempting to change an image using JavaScript, the image fails to load

I am having trouble understanding what is wrong with my code. <html> <body> <script type="text/javascript"> function changeImage() { var image = document.getElementById('myImage'); if (image.src.match("bulbon")) { ...

javascriptjquerycsshtml

Is the issue of Padding Overlap with Sidebar Item List getting in the way?

I am currently new to coding in HTML and CSS, so please bear with me if my code seems outdated or unconventional. I am working on creating a basic test website with a sidebar, but I'm encountering an issue where the items in my list are overlapping du ...

htmlcss

Display a delete icon when hovering over a Chip component from Material-ui

Recently, I've been exploring ways to implement the on-hover functionality for a chip. What I'm looking for is when I hover over a chip in an array of chips, it should display a delete icon. Below is the code snippet I've been working on: ...

javascriptreactjsmaterial-ui

When using the .concat method on an array, props may display as unidentified

When I log the items array in my props, it contains items. However, when I try to add to the array using .concat, I encounter an error stating Cannot read property 'concat' of undefined export default (props) => { const { items } = props; ...

reactjstypescript

Is there a way to end my session in nextAuth on NextJS 14?

Recently, I've started using Typscript with a NextJS14 project that utilizes NextAuth for authentication. While there weren't any errors in the JavaScript version of my code, I encountered an error when working with TypeScript. This is a snippet ...

typescriptnext.jsnext-auth

Disable Autocomplete Chip functionality when only one can be selected

When multiple is set to true, I prefer the Chip option. Is there a way to enable the Chip functionality even when multiple is set to false? <Autocomplete className={classes.search} options={top100Films} ge ...

javascriptreactjsmaterial-ui