Highlighted

jQuery UI modal width issue

LEGEND ,
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,

 

^ _ ^

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

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

324

Likes

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

jQuery UI modal width issue

LEGEND ,
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,

 

^ _ ^

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

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

325

Likes

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
LEGEND ,
Nov 25, 2019

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
Resources
Learn Resources
Add a group