• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

jQuery UI modal width issue

LEGEND ,
Nov 25, 2019 Nov 25, 2019

Copy link to clipboard

Copied

Hello, all,

 

I'm attempting to add a pop-up modal that alerts users that they are accessing a US Govt system (site) with a close button.  So far, it's functional as it should be.  The issue is the width of the modal.  I've tried setting the width to many different values, all of which appear to be ignored.  If anyone could point out where I am missing something, please let me know.  Code, below:

 

#container, #dod-dialog {
	display: none;
	min-width: 1200px;
	width: 1200px;
	overflow-x: visible;
}
<div id="dod-dialog">
	<div id="container">
		<header> <img src="images/warning_popup-xxxxx.jpg" width="68" height="68" alt="USTC Warning Popup" /> <span>United States Transportation Command</span> </header>
			<section>redacted</section>
			<footer>
				<p>redacted:</p>
				<p>redacted</p>
				<p>redacted</p>
				<p>redacted</p>
				<p>redacted
				<p>redacted</p>
				<p>redacted</p>
				<div id="agree">
					<button type="button" id="agreeBtn" title="Continue">Continue</button>
				</div>
			</footer>
		</div>	
		
	</div>
	<script type="text/javascript">
			document.getElementById("container").style.display = "inline-block";
    $(function() {
        $("#dod-dialog").dialog({
            minWidth: 1200,
            closeText: "",
            closeOnEscape: false,
            draggable: false,
            resizable: false
        });
        $("#container button").click(function() {
            $("#dod-dialog").dialog('close');
        });
      });
    </script>

 

So, I'm attempting to get the modal to be 1200px wide; but the modal containing the divs is sticking to ~300px wide.  Please advise.

 

V/r,

 

^ _ ^

TOPICS
Bootstrap , Browser , Code , Download install and licensing , Error , Extensions , How to , Import and export , Interface , Other , Performance , Preview , Product issue , Publish , Server side applications

Views

899

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Nov 25, 2019 Nov 25, 2019

nm.. found it.. one of the parameters in .dialog() must be 'width', not just minwidth.

Votes

Translate

Translate
LEGEND ,
Nov 25, 2019 Nov 25, 2019

Copy link to clipboard

Copied

LATEST

nm.. found it.. one of the parameters in .dialog() must be 'width', not just minwidth.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines