trying to independenly restyle the navigationWidget

application/views/lehre/lehrauftrag/approveLehrauftrag.php

@@ -6,10 +6,12 @@ $this->load->view(
         'jquery3' => true,
         'jqueryui1' => true,
         'jquerycheckboxes1' => true,
-        'bootstrap3' => true,
+        'bootstrap5' => true,
         'fontawesome4' => true,
         'sbadmintemplate3' => true,
-        'tabulator4' => true,
+        'tabulator5' => true,
+        'tabulator5JQuery' => true,
+        'cis'=>true,
         'momentjs2' => true,
         'ajaxlib' => true,
         'dialoglib' => true,
@@ -88,9 +90,13 @@ $this->load->view(
             )
         ),
         'customJSs' => array(
-                'public/js/bootstrapper.js',
+               
                 'public/js/lehre/lehrauftrag/approveLehrauftrag.js'
-        )
+        ),
+        'customCSSs' => array(
+               
+            'public/css/navbar.css'
+    )
     )
 );
 ?>

application/views/lehre/lehrauftrag/approveLehrauftragData.php

@@ -346,7 +346,6 @@ $filterWidgetArray = array(
 		layout: "fitColumns",			// fit columns to width of table
 		layoutColumnsOnNewData: true,	// ajust column widths to the data each time TableWidget is loaded
 		autoResize: false, 				// prevent auto resizing of table (false to allow adapting table size when cols are (de-)activated
-	    headerFilterPlaceholder: " ",
 	    groupBy:"lehrveranstaltung_id",
 	    groupToggleElement:"header",	//toggle group on click anywhere in the group header
 	    groupHeader: function(value, count, data, group){
@@ -361,22 +360,16 @@ $filterWidgetArray = array(
             return func_selectableCheck(row);
         },
         initialFilter: func_initialFilter(),
-        rowUpdated:function(row){
-             func_rowUpdated(row);
-        },
         rowFormatter:function(row)
         {
             func_rowFormatter(row);
-        },
-        renderStarted:function(){
-            func_renderStarted(this);
-        },
-        tableBuilt: function(){
-            func_tableBuilt(this);
         },
 		tableWidgetFooter: {
 			selectButtons: true
-		}
+		},
+        columnDefaults:{
+            headerFilterPlaceholder: " ",
+        }
     }', // tabulator properties
     'datasetRepFieldsDefs' => '{
         // column status is built dynamically in funcTableBuilt(),

application/views/widgets/navigation.php

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
+<nav class="fhc-navbar fhc-navbar-default fhc-navbar-static-top" role="navigation" style="margin-bottom: 0">
 	<?php
 		// Header
 		echo $this->widgetlib->widget('NavigationHeaderWidget');

application/views/widgets/navigationMenu.php

@@ -1,6 +1,6 @@
-<div class="navbar-default sidebar" role="navigation">
+<div class="fhc-navbar-default sidebar" role="navigation">
 	<div class="sidebar-nav navbar-collapse">
-		<ul class="nav" id="side-menu"></ul>
+		<ul class="fhc-nav" id="side-menu"></ul>
 	</div>
 	<i id="collapseinicon" title="show Menu" class="fa fa-angle-double-right fa-fw"></i>
 </div>

public/css/navbar.css

@@ -0,0 +1,122 @@
+
+nav {
+    display: block;
+  }
+
+  .fhc-navbar {
+    position: relative;
+    min-height: 50px;
+    margin-bottom: 20px;
+    border: 1px solid transparent;
+      border-top-color: transparent;
+      border-top-width: 1px;
+      border-right-color: transparent;
+      border-right-width: 1px;
+      border-bottom-color: transparent;
+      border-bottom-width: 1px;
+      border-left-color: transparent;
+      border-left-width: 1px;
+  }
+
+  
+
+  @media (min-width: 768px){
+    .fhc-navbar {
+        border-radius: 4px;
+      }
+    }
+
+
+
+  .fhc-navbar-static-top {
+    z-index: 1000;
+    border-width: 0 0 1px;
+  }
+
+  @media (min-width: 768px){
+    .fhc-navbar-static-top {
+      border-radius: 0;
+    }
+    
+  }
+
+  .fhc-navbar-default {
+    background-color: #f8f8f8;
+    border-color: #e7e7e7;
+  }
+
+  @media (min-width: 768px){
+  .navbar-header {
+    float: left;
+  }
+}
+
+.fhc-navbar-default .navbar-collapse, .fhc-navbar-default .fhc-navbar-form {
+    border-color: #e7e7e7;
+  }
+
+  ol, ul {
+    margin-top: 0;
+    margin-bottom: 10px;
+  }
+
+  .fhc-nav {
+    padding-left: 0;
+    margin-bottom: 0;
+    list-style: none;
+  }
+
+  .fhc-nav > li {
+    position: relative;
+    display: block;
+  }
+
+  .fhc-nav > li > a {
+    position: relative;
+    display: block;
+    padding: 10px 15px;
+  }
+
+  .text-right {
+    text-align: right;
+  }
+
+  .dropdown-toggle::after {
+    content:none;
+  }
+
+.fhc-nav li a {
+    text-decoration: none;
+   
+}
+
+
+
+.dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    display: none;
+    float: left;
+    min-width: 160px;
+    padding: 5px 0;
+    margin: 2px 0 0;
+    font-size: 14px;
+    text-align: left;
+    list-style: none;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ccc;
+    border: 1px solid rgba(0,0,0,.15);
+    border-radius: 4px;
+    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
+    box-shadow: 0 6px 12px rgba(0,0,0,.175);
+  }
+
+
+  .open > .dropdown-menu {
+    display: block;
+  }
+
+

public/js/lehre/lehrauftrag/approveLehrauftrag.js

@@ -225,7 +225,7 @@ function func_selectableCheck(row){
 // Adds column status
 function func_tableBuilt(table) {
     // Add status column to table
-    table.addColumn(
+    table.tabulator("addColumn",
         {
             title: "<i class='fa fa-user-o'></i>",
             field: "status",
@@ -498,6 +498,18 @@ $(function() {
         $('#tableWidgetTabulator').tabulator('redraw', true);
     });
 
+    // tableInit is called in the jquery_wrapper when the tableBuilt event was finished
+    $(document).on("tableInit", function(event,tabulatorInstance) {
+     
+        func_tableBuilt($("#tableWidgetTabulator"))
+        
+        // event renderStarted needs to be attached as a callback to the tableBuilt event in tabulator5
+        $("#tableWidgetTabulator").tabulator("on","renderStarted",()=>{func_renderStarted(tabulatorInstance)});
+        // event renderStarted needs to be attached as a callback to the tableBuilt event in tabulator5
+        $("#tableWidgetTabulator").tabulator("on","rowUpdated",(row)=>{func_rowUpdated(row)});
+       
+    });
+
     // Show all rows
     $("#show-all").click(function(){
         $('#tableWidgetTabulator').tabulator('clearFilter');

public/js/navbar.js

@@ -0,0 +1,32 @@
+function(t) {
+    var e = a(this);
+    if (!e.is(".disabled, :disabled")) {
+      var i = l(e),
+        o = i.hasClass("open");
+      if (s(), !o) {
+        "ontouchstart" in document.documentElement && !i.closest(".navbar-nav").length && a(document.createElement("div")).addClass("dropdown-backdrop").insertAfter(a(this)).on("click", s);
+        var n = {
+          relatedTarget: this
+        };
+        if (i.trigger(t = a.Event("show.bs.dropdown", n)), t.isDefaultPrevented()) return;
+        e.trigger("focus").attr("aria-expanded", "true"), i.toggleClass("open").trigger(a.Event("shown.bs.dropdown", n))
+      }
+      return !1
+    }
+  },
+
+  function(t) {
+    if (/(38|40|27|32)/.test(t.which) && !/input|textarea/i.test(t.target.tagName)) {
+      var e = a(this);
+      if (t.preventDefault(), t.stopPropagation(), !e.is(".disabled, :disabled")) {
+        var i = l(e),
+          o = i.hasClass("open");
+        if (!o && 27 != t.which || o && 27 == t.which) return 27 == t.which && i.find(r).trigger("focus"), e.trigger("click");
+        var n = i.find(".dropdown-menu li:not(.disabled):visible a");
+        if (n.length) {
+          var s = n.index(t.target);
+          38 == t.which && 0 < s && s--, 40 == t.which && s < n.length - 1 && s++, ~s || (s = 0), n.eq(s).trigger("focus")
+        }
+      }
+    }
+  }