Tips for nesting a div within another div within a modal

Currently, I am in the process of developing a React application that includes a modal with props as a child component. The child component is intended to be rendered inside the modal as the modal body. However, I have encountered an issue where the modal body does not properly fit within the modal itself. Despite spending hours adjusting the CSS, I have yet to find a solution to resolve this problem. Below is the relevant code snippet:

Here is the modal component (focus on the structure of the modal body):

insert modified code here

This is the parent component responsible for calling the modal:

insert modified code here

And the corresponding CSS for the parent component:

insert modified code here

The current output can be viewed here.

If anyone has any suggestions on how to ensure the proper fitting of the body within the modal, your help would be greatly appreciated. Thank you!

cssreactjsreact-native

Answer №1

.content-box {
    background: #fff;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
    padding: 3px 10px;
    font-size: 12px;
    margin-bottom: 6px;
    border-radius: 3px;
    display:flex;
    flex-direction: column;
}

Answer №2

To fix the issue, simply remove the min-width and height properties from the modal_content CSS like shown below:

.modal_content{
        background-color: #ffffff;
        display: flex;
        flex-wrap: wrap;
        box-shadow: 1px 1px 10px 1px grey;
        display: flex;
        flex-direction: column;
      }

https://i.sstatic.net/B7c5y.png Thank you!

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

Experiencing an issue with react-bootstrap when running npm start

Recently, I encountered some issues while running a react-js app. However, there were no problems during the npm install process. Package Versions: react: "^16.10.2" react-bootstrap: "^1.0.0-beta.16" I attempted the following steps to resolve the issues ...

node.jsreactjsnpmpackage.jsonreact-bootstrap

Viewing PDFs in React Native using the PDF View

Hey there folks, I'm facing an issue with our project at the moment. I am looking to re-render a PDF with editable fields for text and a signature. Any suggestions or solutions on how to achieve this? Any guidance would be greatly appreciated. Cheer ...

androidpdfreactjsreact-native

How to successfully load the google-map-react library

After installing the google-map-react library locally in my app, I verified that it is listed in my package.json under dependencies. The corresponding folder also exists in the node_modules directory. However, when attempting to reference the component con ...

javascriptreactjsgoogle-mapsnpm

Tips for troubleshooting a sass file that is not displaying changes in the browser

Currently working on my portfolio website using bootstrap and sass along with a theme kit. Initially, I attempted to implement a grid column style for the intro-section but had a change of heart and deleted the style. Surprisingly, every time I refresh my ...

htmlcsssassbootstrap-5

Error: The function `map` is not available on the variable `filtredItems

Can anyone please help me out? I tried creating a simple code to filter items based on an input value, but I encountered an ERROR :( even though I am confident that I followed the tutorial steps correctly. You can find the tutorial here This is the compl ...

javascriptreactjsnext.js

Establishing the timing for setting React state to enable conditional rendering

At the moment, I am immersed in a basic React exercise. I am attempting to conditionally display a specific portion of the jsx based on a particular state. Essentially, my code is structured like this const ShopList = (props) => { const [isLoadin ...

reactjsreact-hooksuse-state

Unable to update to expo SDK version higher than 40 through the terminal

Currently, I am facing an issue while trying to submit my react native app using the eas/expo commands in the terminal. Despite multiple attempts of deleting and reinstalling node, npm, eas, and expo, I still encounter an error when running the "eas build" ...

iosreact-nativenpmexpoapp-store

Conceal the Ajax Div and display the Loader Div while waiting for the data to be

Trying to show a loader div until the Ajax-populated div is returned. Want to hide "responseDiv" until it's filled with Ajax data and display a loading div in the meantime. #loading { background: url('images/loading.gif') no-repeat cent ...

javascriptjquerycssajax

Utilize the express.static function to selectively deliver static files based on specific conditions

app.use(function (req) { if (myCondition(req)) { express.static(`${__dirname}/REACT_APP_1`); } else { express.static(`${__dirname}/REACT_APP_2`); } }); I am attempting to serve different builds based on a conditional statement, but it appear ...

node.jsreactjsexpress

The BorderWidth property is set to 2px, however, it is not visible on the

Struggling with adding a border to a div in my app built with react and material-ui. Here is the snippet of code I've been working with: <div className={classes.search}> ... </div> search: { ... borderWidth: '2px', borde ...

cssmaterial-ui

Using lambdas in JSX attributes is not allowed because it can negatively impact rendering performance

I encountered an error when using the following code:- <FieldArray name="amenities" render={arrayHelpers => ( <div> {values.amenitieslist && values.amenitieslist.length > 0 ? ( val ...

reactjstypescriptformik

Slate Map by Google Navigation

I have a situation here that is similar to the grey maps, except all the buttons are visible. Everything appears normal except for the Map tiles, which are all grey! It's strange because it loads nicely at zoom level 8 and then zooms in to the maximum ...

javascripthtmlcssgoogle-mapsgoogle-chrome

The offscreen div triggers the window to enlarge exclusively in the mobile browser

As I work on creating a website for an anti-bullying program at my school, I decided to add a fun and animated background. The idea of moving clouds caught my attention, so I incorporated them into the design. Initially, I encountered a bug where offscreen ...

phpjavascripthtmlcss

Using React JS to showcase the current state based on a linked element

I am looking to showcase state from a link in the following manner: <Link to={{ pathname: '/courses/product/productlist', state: { fromDashboard: true }}}> Food & Treats </Link> What is the best way to display this state within ...

reactjsreact-router-v4

Scrolling issue with ui-select-choices causing content to be cut off

I have exhausted all possible solutions that were previously provided for this similar issue, but I am still encountering the same problem. Any assistance would be greatly appreciated. <td style="width:20%"> <div class="form-gro ...

javascripthtmlcssangularjs

Creating a type definition for a TypeScript InfiniteScroll component in React

I am currently in the process of developing an InfiniteScroll component to be used like this: import { getData } from 'api'; import { InfiniteScroll } from 'components'; export const App = () => ( <InfiniteScroll fetcher={page ...

javascriptreactjstypescript

What is the proper method for implementing a scrollable effect to the <v-bottom-sheet> element within the Vuetify framework?

Within my Vue.js project, I am utilizing the v-bottom-sheet component from Vuetify framework (version 2.1.12). Upon reviewing my code, you can observe that the v-card is enclosed within the v-bottom-sheet. The issue arises with the scrollable parameter of ...

javascriptcssvue.jsvuejs2vuetify.js

Styling Email Tabs with CSS

I am currently working on designing an email template for my website. Within this template, I require CSS tabs that are functional even without the use of JavaScript. Here is the CSS styling for the tabs: #globalnav { position:relative; float:lef ...

csshtmlemail

What is the best way to extract a JSON array from a JSON object?

In my ReactJS project, I am receiving a JSON object from a GET request and I need to extract key-value pairs from it. {"return":"Success", "Items": [ {"Name":"centracore", "Type":"rollover" ,  "Os":"Windows",  "Level":"1", "Language_Used":"Assembly", ...

arraysjsonreactjsiterated-function

Exploring ways to incorporate the context value into my component's functionality

Hi, I'm new to TypeScript and I'm facing an issue when trying to use a value I created in my context API. I keep getting the error message "Property 'sidebar' does not exist on type 'IStateContext | null'", even though it exis ...

reactjstypescript