Modal Box wider than normal?

Question

I'm developing a site at the moment, where the modal box is a lot wider with a bunch of white space than it usually is when I look at Sharepoint sites. I've even removed all of my bootstrap and custom CSS to see if that's what was giving this undesired result. As a front-end dev, I want to achieve the result similar to display: inline-block;. But, I'm sure there must be some embedded sharepoint classes to help me out with this, or else CSS with media queries would have to be written for every form, and I won't be supporting this site forever lol! So does anyone have a sharepoint way of helping this?

Ideally, I want all boxes to appear as it does when you create a sharepoint site as below.









But! at the moment, it looks like this. As you can see there's a pointless bunch of whitespace to the right.

Any help is appreciated :)

Answer 1

Your CSS is most likely the reason. There is a rule that is expanding the content when the dialog is created. SharePoint dialogs are calculating their size based on the content with JS and afterwards it's set via inline styles ( bad practise but its sharepoint..).

Try to remove your CSS and reload the page to validate if I'm right. If it's the issue you need to share your CSS.