From da48c6c3604817774ca3673a64c264466a9c9ed5 Mon Sep 17 00:00:00 2001
From: Andreas Fernandez <andreas.fernandez@aspedia.de>
Date: Tue, 25 Nov 2014 15:06:55 +0100
Subject: [PATCH] [BUGFIX] FlashMessages container interrupts the backend usage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
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>
---
.../Resources/Public/JavaScript/FlashMessages.js | 7 +------
.../Private/Styles/TYPO3/_element_message.less | 13 +++++++++++++
.../t3skin/Resources/Public/Css/visual/t3skin.css | 11 +++++++++++
3 files changed, 25 insertions(+), 6 deletions(-)
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/FlashMessages.js b/typo3/sysext/backend/Resources/Public/JavaScript/FlashMessages.js
index 9aae5ce26e41..0dd3e722becb 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/FlashMessages.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/FlashMessages.js
@@ -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();
};
diff --git a/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_message.less b/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_message.less
index 123f57e63c55..0bee7d374a6c 100644
--- a/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_message.less
+++ b/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_message.less
@@ -11,6 +11,19 @@
* 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;
diff --git a/typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css b/typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css
index 0f437df0ceb4..395a99894de6 100644
--- a/typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css
+++ b/typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css
@@ -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;
--
GitLab