La barre de message devient scrollable

diff --git a/Web/templates/base.html b/Web/templates/base.html
index eb6deed56b98278a808fd5234fad27a6888bbf41..98f6a7a54720aedcff52d69bdad682c0bd61aa51 100644 (file)
--- a/Web/templates/base.html
+++ b/Web/templates/base.html
@@ -131,7 +131,8 @@
 
     <!-- html body div.container-fluid div.row nav.navbar.flex-column.flex-md-row.affix -->
     <!-- row.nav + row.nav div.row:nth-child(2) > nav:nth-child(1) -->
-    <style>
+  <style>
+    
       #row-main_menu {
       top: 0;
       width: 100%;
@@ -162,6 +163,16 @@
       #row-tree1-messages nav, #tree1-messages {
       margin-bottom: 0px;
       }
+
+      #row-tree1-messages {
+         overflow-y: scroll;
+         height: 50px;
+      }
+      
+      /* #tree1-messages nav { */
+      /*         margin-right: -15px; */
+      /*         margin-left: -15px; */
+      /* } */
       
       #file_management {
       z-index: 8500;

diff --git a/Web/templates/commandes_2.html b/Web/templates/commandes_2.html
index 4c27a79d487fdc48be36acd663e7f93b0bfb7f18..5188ecc39c52dfa603a5d505560b69f782fa9e82 100644 (file)
--- a/Web/templates/commandes_2.html
+++ b/Web/templates/commandes_2.html
@@ -90,19 +90,13 @@
     
 <div class="row" data-spy="affix" id="row-tree1-messages">
 
-    <!-- <footer class="footer"> -->
     <nav class="navbar" >
-    <!--   <div class="container-fluid"> -->
-    <!-- <div class="navbar-header" > -->
-    <!--   <a class="navbar-brand" href="#">Messages</a> -->
-    <!-- </div> -->
-    <!-- <h2>Messages</h2> -->
-    <!-- <span id="tree1-messages" class="nav navbar-nav col-sm-12 navbar-right alert alert-success"  >....</span> -->
-    <footer class="footer alert alert-success" id="tree1-messages">No message.</footer>
-    <!-- alert alert-success alert-info alert-warning alert-danger -->
-    <!--   </div> -->
+      <!-- <span id="tree1-messages" class="nav navbar-nav col-sm-12 navbar-right alert alert-success"  >....</span> -->
+      <!-- <footer class="footer alert alert-success" id="tree1-messages" >No message.</footer> -->
+      <div id="tree1-messages" >
+       <nav class="nav-bar alert alert-success">No message.</nav>
+      </div>
     </nav>
-    <!-- </footer> -->
 
 </div> <!-- row -->
 
@@ -243,8 +237,10 @@ let treeMessage=function(msgCssSelStr,messageClass,message) {
     'use strict';
     const messageClasses = new Set(["alert-success","alert-info","alert-warning","alert-danger"]);
     if (messageClasses.has(messageClass)) {
+       
        $(msgCssSelStr).removeClass("alert-success alert-info alert-warning alert-danger");
-        $(msgCssSelStr).addClass(messageClass);
+        // $(msgCssSelStr).addClass(messageClass);
+       
        if ( messageClass == "alert-danger" ) {
            $.ui.fancytree.error(message);    // debugLevel >= 1
            // alert(message); // Activer lorsque la mise au point sera achevée.
@@ -256,7 +252,10 @@ let treeMessage=function(msgCssSelStr,messageClass,message) {
             console.debug(message);           // debugLevel >= 4
            $.ui.fancytree.debug(message);    // debugLevel >= 4
        };
-        $(msgCssSelStr).text(message);
+        $(msgCssSelStr).html('<nav class="nav-bar alert">'+message+'</nav>'+$(msgCssSelStr).html());
+        //$("#row-tree1-messages > nav nav:first-child").addClass(messageClass);
+       $(msgCssSelStr+" > nav:first-child").addClass(messageClass);
+        //$(msgCssSelStr).text(message);
     } else {
        alert("The messageClass : |"+messageClass+"| is not in "+messageClasses); //TODO afficher la chaine messageClasses
     };