Disregard the CSS styling within the modal window

Question

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>
)

css reactjs antd

Answer 1

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

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 3

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

Answer 4

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

Disregard the CSS styling within the modal window

Answer №1

Answer №2

Similar questions

What is the best way to display a placeholder image in a React project when the image URL is

Having trouble with create-react-app? Seeking assistance from the community! Your help would be greatly

What steps should be taken to ensure that the onmouseover and onmouseout settings function correctly?

Expanding rows on a Sortable Table Material UI table in React upon clicking

text box with an immobile header

What is the reason for choosing to use the render method outside of components instead of within

Clicking will cause my background content to blur

Utilize the Autocomplete feature from Material UI to dynamically generate tags based on user input

Automatic completion of absolute paths in VS Code with the ability to click and view definitions through the configuration file js/tsconfig.json

Sustaining component state in NextJS applications

Searching dynamically using class names with JQuery

Ways to expand the width of mat-dialog-actions component in Angular 8

List that spans the entire width of the browser, with text limited to a maximum width

Efficient Django Template: Accurate Conversion of Values through Dictionary Searching

npm script for quickly generating React components

Make sure to employ Bootstrap's justify-content-between and stack-to-horizontal col correctly

[Babel]: The option foreign.Children is not recognized

Is there a way to trigger a revalidation of a specific page from a client component in NextJS?

What are some ways to customize the styles of @devexpress/dx-react-grid-material-ui?

Issue with responsive design: Media queries not applying max-width