Fixed #46. add css rule to set the overlay always on top.

bueltge · Sep 19, 2017 · 778e10b · 778e10b
1 parent 8201995
commit 778e10b
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,9 @@
 # Change Log
 All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 1.5.1
+* Fixed overlay on menu. #46
+
 ## [1.5.0](https://github.com/bueltge/wordpress-admin-style/compare/1.4.2...1.5.0) - 2017-05-24
 * Added accessibility improvements on h1, in core since WP 4.8, [see make post](https://make.wordpress.org/core/2017/05/17/cleaner-headings-in-the-admin-screens/)
 * Small Cleanup source formatting, class name PSR rule.

diff --git a/WpAdminStyle.php b/WpAdminStyle.php
@@ -7,7 +7,7 @@
  * Domain Path:   /languages
  * Description:   Shows the WordPress admin styles on one page to help you to develop WordPress compliant
  * Author:        Frank Bültge
- * Version:       1.5.0
+ * Version:       1.5.1
  * Licence:       GPLv3+
  * Author URI:    https://bueltge.de
  * Last Change:   2017-05-24

diff --git a/css/jquery-ui-fresh.css b/css/jquery-ui-fresh.css
@@ -438,7 +438,7 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad
 .ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative;  }
 .ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } 
 .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
-.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
+.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 0 0 0 .5px; position: absolute; top: 0; left: 0; }
 .ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
 .ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
 .ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
@@ -572,4 +572,4 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad
 	background-image: -moz-linear-gradient(bottom, rgb(114,167,207) 0%, rgb(144,197,238) 100%);
 	background-image: -webkit-linear-gradient(bottom, rgb(114,167,207) 0%, rgb(144,197,238) 100%);
 	background-image: -ms-linear-gradient(bottom, rgb(114,167,207) 0%, rgb(144,197,238) 100%);
-}
+}
diff --git a/inc/WpAdminJqueryUi.php b/inc/WpAdminJqueryUi.php
@@ -169,7 +169,7 @@ class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>
 			                                               'WpAdminStyle' ); ?></a><br class="clear" /></p>
 
 			<h2 id="overlay_shadow">Overlay and Shadow Classes <em>(not currently used in UI widgets)</em></h2>
-			<div style="position: relative; width: 30%; height: 200px; padding:1% 4%; overflow:hidden;"
+			<div style="position: relative; width: 90%; height: 200px; padding:1% 4%; overflow:hidden;"
 				class="fakewindowcontain">
 				<p>Lorem ipsum dolor sit amet, Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p>
 				<p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. </p>

diff --git a/js/jquery-ui-demo.js b/js/jquery-ui-demo.js
@@ -28,6 +28,7 @@ jQuery(document).ready(function($) {
                 // Make the overlay fill the whole screen
                 $('.ui-widget-overlay').width($(document).width());
                 $('.ui-widget-overlay').height($(document).height());
+                $('.ui-dialog').css('z-index', '9999');
 		return false;
 	});
 
@@ -88,4 +89,4 @@ jQuery(document).ready(function($) {
 		close: function() { $(this).removeClass('open'); }
 	});
 
-});
+});