Issue with React-Bootstrap: Modal dialogClassName prop malfunctioning

I am having issues trying to adjust the width of a Modal using the dialogClassName prop. Despite applying CSS changes in style.css, the width remains unchanged. It's strange because all other classes are working fine.

I've checked out this solution on Stack Overflow here, but it didn't work for me. The documentation also proved unhelpful. Any assistance would be greatly appreciated!

This is how the render method looks like in modal.js:

render(){
    return (
        <div>
            <CardMain openModal={this.handleOpen}
                                {...this.props} />
            <Modal show={this.state.open}
                   onHide={this.handleClose}
                   dialogClassName="main-modal">
                <ModalMain tabKey={this.state.tabKey}
                                  {...this.props} />
                <FeedbackForm />
            </Modal>
        </div>
    );
}

style.css:

.main-modal {
    width: 90%;
}

Answer №1

Give it a shot

.primary-modal {
    minimum-width: 90%;
}

as an alternative.

Answer №2

One way to establish a specific className for the dialog component is by using the dialogClassName attribute. Another option is to include the dialogComponent property within the Modal component.

To learn more about dialogComponent and its usage, refer to the description provided in the Modal documentation.

Answer №3

In my experience, it appears that BS automatically assigns the class for the Modal.Dialog component as .modal-dialog. By accessing this through CSS chaining, I was able to make it work without needing to redefine all of BS' standard CSS attributes:

If you assign an id to the <Modal> tag, such as <Modal id="main-modal">

You can then define the CSS rule as

#main-modal .modal-dialog {width: 90%;}

I hope this explanation is helpful!

Answer №4

I encountered a similar issue and discovered a solution that worked for me.

This is my CSS:

.modal-80w {
  min-width:80%;
}

Here is the JSX code I used:

<div className="modal-80w">
  <Modal
    show={props.show}
    onHide={resetRatingsAndToggle}
    dialogClassName="modal-80w"
    >
  
  <!--MODAL CONTENT GOES HERE -->

  </Modal>
</div>

It appears that both the className for the wrapping DIV and the dialogClassName need to be set to the class selector specified in your CSS file.

Answer №5

To solve the issue, I made use of styled-components. Defined a new component called ModalStyled:

export const ModalStyled = styled(Modal)`
background-color: #555555;
color: #555555;
`;

To implement it in your code:

<ModalStyled 
    {...props}
    size="lg"
    aria-labelledby="contained-modal-title-vcenter"
    centered
  >

And voila, it works like a charm :)

Answer №6

To override the react-bootstrap css, simply append !important to your own CSS rules.

.modal-90w{
    width: 90vw !important; 
    max-width: 90vw !important;
}

I have specified my dialogClassName in a separate CSS file that I imported into my JavaScript code.

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: The 'window' object is undefined when using getServerSideProps in a Next.js application, and I am looking for a way to store a variable consistently within the getServerSideProps

Below is the getServerSideProps code: //@ts-ignore export async function getServerSideProps({ req, res, query }) { const { id } = query const cookies = Cookies(req, res) const jwt = cookies.get('lit-auth') if (!jwt) { return { p ...

Ensure that the floating divs are positioned at the bottom of their parent element

Encountering a common issue in a particular scenario... Attempting to automatically adjust the height of floating divs to ensure they reach the bottom of their parent. For instance: http://jsfiddle.net/k95nK/1/ The objective is for all floating columns to ...

What is the best way to dynamically adjust the width of a Material UI Dialog based on its evolving content?

I'm currently developing a dialogue using MUI that features three different types of content with varying widths. The first type involves uploading an image, the second requires cropping it, and the third entails adding a caption. How can I adjust the ...

What is the method for inserting a gap between Bootstrap card components?

Can someone help me figure out how to add space between the two card decks using Bootstrap 4 alpha 6? I've tried using mt-20 on the second card deck but it's not working. I also attempted to wrap them in rows, but that didn't work either: h ...

Creating a dynamic form in React

After creating a functional based component, I am checking the type in a switch case to determine which form to create. const component = (props) => { let renderObject = null let obj; const renderdata = () =>{ console.log(props); ...

Samsung devices exclusively showcase background in responsive design

I am encountering a major problem with my website design, specifically with its compatibility on mobile devices. To ensure its responsiveness, I have tested the design on my iPhone, iPad, and Windows Phone. Unfortunately, since I lack an Android device, I ...

Adjusting Images and Icons' Sizes Automatically on a Single Line

Imagine a row of social media icons/images (like Facebook, Twitter, LinkedIn) displayed together. How can I ensure that when I add more icons/images to this row, their sizes adjust automatically to stay on the same line instead of moving to the next one? I ...

Activating the CSS :active selector for elements other than anchor tags

How can I activate the :active state for non-anchor elements using JavaScript (jQuery)? After reading through Section 5.11.3 of the W3C CSS2 specification in relation to the :hover pseudo selector in hopes of triggering the activation of an element, I stu ...

Adaptive Layout - side menu is shifted to the side by the height of the image

I am currently facing an issue with my code involving a side menu and main content. In Desktop view, the side menu should be on the left and the company content on the right. However, when I added pictures to the content (which I have commented out for no ...

Struggling to integrate the navigation bar with Wordpress platform

For a while now, I have been facing challenges with the navigation bar on the WordPress theme I am currently creating. I am struggling to get the navigation bar to display correctly. Below is the code snippet from my header.php file: <body> &l ...

Activate the Bootstrap 5 responsive font sizing feature (RFS) for the base font elements

I'm attempting to utilize Bootstrap's RFS functionality in version 5.1.3 to apply font sizing globally. Within my SCSS file, I've defined some basic font sizes, imported the Bootstrap SCSS files, and configured the font size settings. Howev ...

How can CSS be used to prevent line breaks between elements in a web page?

div#banner>img { float: left; background-color: #4b634b; height: 265px; width: 80%; } ul { float: left; background-color: #769976; width: 162px; } <body> <div id="wrapper"> <header> <nav> <ul ...

Difficulties with integrating tooltips into SVGs

Being a minimalist, I am facing restrictions while working on a website. I desire interactive tooltips to appear when users hover over specific sections of my SVG. However, I also want to incorporate this interactivity within the SVG itself. The challenge ...

Dropdown submenu display issue with multiple selections

I've been working on a multi-level dropdown menu. It seems like there's a dropdown menu inside another dropdown menu. However, when I click on the inner dropdown menu, it doesn't open to the right as expected; instead, it opens below the men ...

Is it possible to leverage Create-React-App's npm start in conjunction with Node.js?

I've recently started diving into React and node.js. My goal is to have a node.js server that can serve up React.js pages/views. After running 'create-react-app' and then using 'npm start', I'm not sure if I also need to man ...

Error encountered while executing jest tests due to an unexpected import token

Despite trying numerous solutions and suggestions on Stack Overflow, I am still unable to resolve the issue at hand. I recently discovered jest and attempted to use it by following a tutorial on testing React components with jest from DZone. However, when ...

disabling tabs that are next to each other using react hooks

When the user clicks on item one button in the first tab, it should disable the next two tabs. If the user clicks it back, it should enable the other two tabs. The same functionality should apply to the other tabs as well. Currently, I have disabled the ...

Getting rid of excess space surrounding text

Within my div, I am attempting to create a 5px padding around the text; however, there seems to be additional spacing that is interfering with my desired layout. It almost feels as though my browser is mocking my efforts by refusing to cooperate. This is ...

How come the element is not appearing in the div even though it should be there?

The placement of the image and select menu within the same div element may be causing a display issue where only the first image is shown correctly and the select menu appears outside. Why does this occur? <body> <div style="height: 1080px; ...

IE compatibility with Bootstrap justified navigation behavior

While examining the example on http://getbootstrap.com/examples/justified-nav/, I noticed a discrepancy between how IE 11 and Chrome/Webkit/Firefox render the width of the li elements. In IE, the widths are justified and equal (around 190px), whereas in ot ...