Disregard the CSS styling within the modal window

Currently, I am working with ReactJS and ANTD. My modal has been adjusted with paddings to center-align the text, but now I want to enhance the design. Here is the desired look: https://i.stack.imgur.com/qef7n.png

This is how it appears at the moment: https://i.stack.imgur.com/5QsAv.png

CSS:

modalStyle {
   padding: 100px 50px
}

index.js

const styling ={
design:{
        background: "#FFFFFF",
        width: "400px",
        height: "30px",
        margin: "40px 50px 40px 0px !important"
    }
}

const Modal = props => {
return (

        <Modal
            className={"modalStyle"}

        > 
            <div style={styling.design}> </div>
        </Modal>
)
cssreactjsantd

Answer №1

To offset the padding from the modal container, consider incorporating a negative left margin in your inner div.

const styling ={
design:{
        ...otherStyles,
        margin: "40px 50px 40px -50px !important"
    }
}

By applying this adjustment, the contents will extend all the way to the left edge. If you prefer the text to be positioned further in, you can also include padding on the div.

const styling ={
design:{
        ...otherStyles,
        margin: "40px 50px 40px -50px !important",
        padding: 100px 50px,
    }
}

For reference, here is a demonstration of an inner div exceeding the margins of a modal https://codesandbox.io/s/counter-act-padding-in-child-o5y7z

In my opinion, utilizing `:before` and `:after` pseudo elements would be the optimal approach for achieving this effect. I can provide an example showcasing that method as well.

Answer №2

If you're looking to achieve this, I suggest utilizing flexbox,

//Component

<div className="modal">
    <div className="modal-bar" />
    <div className="modal-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam.
    </div>
    <div className="modal-bar" />
  </div>

//CSS

   .modal {
      width: 80%;
      height: 50vh;
      display: flex;
      flex-flow: column;
      margin: auto;
      background: #0075cb;
      border: 1px solid #0075cb;
      border-radius: 50px;
      padding: 50px 0;
      justify-content: space-between;
    }
    .modal-bar {
      height: 50px;
      width: 100%;
      background: white;
    }

    .modal-text {
      padding: 50px;
      text-align: left;
    }

I've set up a sandbox with the same demo, here

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

Proper Alignment of Div Elements

Just starting out with coding and currently practicing display and positioning. I've created a webpage with multiple divs containing the same content, displayed in a vertical scroll order. Now, I'm looking to position these divs side by side in r ...

htmlcss

Access denied to files uploaded to S3

Recently, I was working on developing a nodejs api to upload files to my AWS s3 bucket. I followed some online tutorials and used the code snippet provided below. Surprisingly, when I tried to open the uploaded files (images/word/pdf), they either did not ...

node.jsreactjsamazon-web-servicesamazon-s3multer

ReactStrap: Transparency issue with DropDown items on mobile devices

I've encountered an issue with my dropdown menu that works perfectly on desktop: https://i.sstatic.net/73Z0X.png However, on mobile devices, it appears to be transparent for some reason: https://i.sstatic.net/dhtOw.png Here is the code snippet ...

htmlcssreactjsbootstrap-4reactstrap

Hexagonal Shape with Rotating Border Gradient in CSS

Looking to create a hexagon shape with a rotating gradient border. Here's an example GIF for reference: https://i.stack.imgur.com/Ah1AO.gif I attempted using CSS only but the use of :after and :before tags proved limiting since they rely on border s ...

htmlcsssvg

Ensure that all Woocommerce products have consistent height while allowing for variations in width

I am struggling with achieving consistent height for all the products on my website, while allowing for variable widths. I attempted to resolve this using UI, but unfortunately it was unsuccessful. Does anyone have suggestions on how to accomplish this u ...

htmlcsswordpresswoocommerce

Can you help me streamline the code for the Sign Up Form app using React and jQuery?

Hi everyone, this marks my debut post on StackOverflow as I embark on the journey to become a full stack developer. To enhance my skills, I've been using FrontEnd Mentor for practice and managed to solve a challenge with the code provided below. Any s ...

javascriptjqueryreactjs

Issue with defining Zoom SDK in Next.js and React as self is not defined

Experimenting with Next.js and attempting to integrate the Zoom SDK Error: ReferenceError: self is not defined Encountering a ReferenceError: self is not defined while trying to incorporate the Zoom SDK into Next.js. Here is a snippet of my code that&apo ...

reactjsgithubnext.jszoom-sdk

Encountering a mysterious error while attempting to access and modify a value stored in a useState hook using the keydown

I've been attempting to create a simple animation on canvas using React.js, but I'm facing an issue with integrating my Keydown function with my useState. It seems that my useState value is not being defined properly, preventing me from changing ...

javascriptreactjsreact-hookshtml5-canvaskeydown

Are the Material UI API documentation in need of an update?

Do you think the Material UI API documentation may be outdated? Is there another resource where we can find information on element preferences? For example, MenuList https://material-ui.com/api/menu-list/ includes a property called disablePadding to remov ...

reactjsmaterial-designmaterial-uimaterialize

How can you trigger CSS transitions to happen multiple times?

Currently, I have a basic circular logo that rotates 360 degrees when certain ajax functions are triggered. While this works as intended, the rotation only occurs once after the function is triggered, and I need to reload the page for it to happen again. ...

jquerycsstransformcss-transitions

What is the best way to implement useAsync (from the react-async-hook library) using TypeScript?

Currently, I am utilizing react-async-hook to retrieve API data within a React component. const popularProducts = useAsync(fetchPopularProducts, []); The fetchPopularProducts() function is an asynchronous method used to make API calls using fetch: export ...

reactjstypescriptreact-async

React: The peculiar contradiction of useEffect with eventHandler props

Having trouble with this specific example. The issue arises with an Input component that includes an onChange prop to manage internal data changes. Under normal circumstances, if the value is updated externally, the onChange prop does not trigger since t ...

javascriptreactjsreact-hooksuse-effect

Guide to grouping polygon shapes using react-leaflet?

I'm currently exploring options for clustering polygons with react-leaflet v4 and react-leaflet-markercluster. Despite my efforts, I have been unable to locate recent examples showcasing how this can be accomplished. Therefore, I am seeking assistance ...

reactjsleafletreact-leafletleaflet.markercluster

Seeking help with a problem regarding the Tooltip Effect not displaying over a button

I'm currently struggling with implementing a tooltip for the "Back-end" button on my webpage. Despite my efforts, the tooltip effect fails to display over the button, and I'm at a loss as to why. Below is the code snippet I am working with: < ...

htmlcsstooltipeffect

What is the best way to prematurely exit from the useEffect hook?

The documentation states that hooks should only be called at the top level of components. With the useEffect API already reserving return for cleanup, I was left wondering how to prematurely exit a useEffect hook to avoid deep nesting of if statements. // ...

reactjsreact-hooks

Issue with next-intl plugin when choosing enum-based values is not functioning correctly

For my next.js project (version 13.4), I was in need of next-intl translation support. I followed the official example provided at The example mentioned to define the following code in the 'en.json' file: "message": "{gender, sele ...

reactjsnext.jsinternationalizationnext-intl

Using React Quill JS and looking to log to the console when a change handler is triggered?

As I dive into the world of web development, I am currently working on crafting a blog dashboard. For the text editor, I've opted to use React Quill. While following the documentation, I came across a tutorial that includes an 'on change' ha ...

javascriptreactjsreact-quill

The importance of scope in ng-style

I am attempting to dynamically change the font color in an input field based on the value entered into that field. However, I have encountered an issue with using ng-style as it is not recognizing the value of the scope and therefore the color does not upd ...

cssangularjs

Unable to decrease the width of a div element in Vuetify and Nuxt

As I work on creating a dynamic form with fields that need to occupy only 50% of the size of a regular field, I encounter different components based on data provided by Vuex. The use of v-for in Vue.js helps me loop through form objects and render the app ...

javascripthtmlcssvue.jsvuetify.js

Struggling with combining CSS stylesheets?

I am looking to incorporate the vertical timeline feature from CodyHouse into a project utilizing a Bootstrap template hosted on Github. I have successfully transferred the HTML content, however, there are some complications with the CSS files. The issues ...

csstwitter-bootstrapbootstrap-4