[BUGFIX] FlashMessages container interrupts the backend usage 07/34607/5
authorAndreas Fernandez <andreas.fernandez@aspedia.de>
Tue, 25 Nov 2014 14:06:55 +0000 (15:06 +0100)
committerFrank Nägler <typo3@naegler.net>
Wed, 26 Nov 2014 09:10:01 +0000 (10:10 +0100)
If flash messages are displayed, the underlaying elements in the
backend are not clickable anymore due to improper CSS.
This patch changes the positioning of the container that holds
the flash messages. Please see the screenshot in #63323 for
a visualization of the problem.

Resolves: #63323
Releases: master
Change-Id: I80b7debddd556bb3d2a0614049bc0c8137f3fd87
Reviewed-on: http://review.typo3.org/34607
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
Reviewed-by: Mathias Schreiber <mathias.schreiber@wmdb.de>
Tested-by: Mathias Schreiber <mathias.schreiber@wmdb.de>
Reviewed-by: Frank Nägler <typo3@naegler.net>
Tested-by: Frank Nägler <typo3@naegler.net>
typo3/sysext/backend/Resources/Public/JavaScript/FlashMessages.js
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_message.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css

index 9aae5ce..0dd3e72 100644 (file)
@@ -64,7 +64,7 @@ define('TYPO3/CMS/Backend/FlashMessages', ['jquery'], function ($) {
                }
                duration = duration || 5;
                if (!this.messageContainer) {
-                       this.messageContainer = $('<div id="msg-div" style="position:absolute;z-index:10000;width: 100%;"></div>').appendTo('body');
+                       this.messageContainer = $('<div id="alert-container"></div>').appendTo('body');
                }
                $box = $('<div class="alert alert-' + className + ' alert-dismissible fade in" role="alert">' +
                '<button type="button" class="close" data-dismiss="alert">' +
@@ -75,11 +75,6 @@ define('TYPO3/CMS/Backend/FlashMessages', ['jquery'], function ($) {
                '<p>' + message + '</p>' +
                '</div>');
                $box.appendTo(this.messageContainer);
-               $box.css({
-                       width: '400px',
-                       position: 'relative',
-                       margin: '0 auto 10px auto'
-               });
                $box.fadeIn().delay(duration * 1000).slideUp();
        };
 
index 123f57e..0bee7d3 100644 (file)
  * The TYPO3 project - inspiring people to share!
  */
 
+#alert-container {
+       width: 400px;
+       position: absolute;
+       left: 50%;
+       margin-left: -200px;
+       z-index: 10000;
+
+       .alert {
+               position: relative;
+               margin: 0 auto 10px;
+       }
+}
+
 .alert {
        border-top: 0;
        border-right: 0;
index 0f437df..395a998 100644 (file)
@@ -7225,6 +7225,17 @@ table#typo3-history-item img {
  *
  * The TYPO3 project - inspiring people to share!
  */
+#alert-container {
+  width: 400px;
+  position: absolute;
+  left: 50%;
+  margin-left: -200px;
+  z-index: 10000;
+}
+#alert-container .alert {
+  position: relative;
+  margin: 0 auto 10px;
+}
 .alert {
   border-top: 0;
   border-right: 0;