Fix css competency popup

js/matrix.js

@@ -57,11 +57,15 @@ jQuery(document).ready(function($){
 			branch.on('click', function (e) {
 				if (this == e.target) {
 					var icon = $(this).children('i:first');
+
+			
+					console.log($(this).children("ul").children())
+
 					icon.toggleClass(openedClass + " " + closedClass);
-					$(this).children().children().toggle();
+					$(this).children("ul").children().toggle();
 				}
 			})
-			branch.children().children().toggle();
+			branch.children("ul").children().toggle();
 		});
 //fire event from the dynamically added icon
 		tree.find('.branch .indicator').each(function(){

styles.css

@@ -13,7 +13,9 @@
 .iena-cpt-sel-tree .tree ul {
     margin: 0;
     padding: 0;
-    list-style: none
+    list-style: none;
+      display: block;
+  text-align: left;
 }
 
 .iena-cpt-sel-tree .tree, 
@@ -25,11 +27,13 @@
 
 .iena-cpt-sel-tree .tree ul {
     margin-left: 1em;
-    position: relative
+    position: relative;
+    width: 100%;
 }
 
 .iena-cpt-sel-tree .tree ul ul {
-    margin-left: .5em
+    margin-left: .5em;
+    flex-basis: 100%;
 }
 
 .iena-cpt-sel-tree .tree ul:before {
@@ -40,7 +44,9 @@
     top: 0;
     bottom: 0;
     left: 0;
-    border-left: 1px solid
+    border-left: 1px solid;
+    outline: none;
+  height: auto;
 }
 
 .iena-cpt-sel-tree .tree li {
@@ -49,9 +55,17 @@
     line-height: 1.7em;
     color: #369;
     font-weight: 700;
-    position: relative
+    position: relative;
+    display: flex;
+  align-items: baseline;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 100%;
 }
 
+.iena-cpt-sel-tree .tree li i{
+    flex-basis: 2%;
+}
 .iena-cpt-sel-tree .tree ul li:before {
     content: "";
     display: block;
@@ -61,14 +75,16 @@
     margin-top: -1px;
     position: absolute;
     top: 1em;
-    left: 0
+    left: 0;
+    outline: none;
 }
 
 .iena-cpt-sel-tree .tree ul li:last-child:before {
     background: #fff;
     height: auto;
     top: 1em;
-    bottom: 0
+    bottom: 0;
+    outline:none;
 }
 
 /* Page compétences d'un utilisateurs */
@@ -424,4 +440,10 @@ table.dataTable{
 
 .linked .list-group-item{
     padding: 0.5rem 0.5rem;
+}
+
+.fram-iena-wrapper{
+    display: flex;
+    align-items: baseline;
+    flex-basis: 97%;
 }
\ No newline at end of file

templates/modal_competencies.mustache

@@ -43,22 +43,25 @@
 									<li class='fram-iena'>
 									{{#ordered_competencies}}
 										<li class="fram-iena fram-{{frameworkid}}">
-											<input class="iena-checkbox-cpt" onclick="selectCompetency(this)" type="checkbox" id="{{competency.shortname}}" value="{{competency.id}}"><a>{{competency.shortname}}</a>
+											<div class="fram-iena-wrapper">
+											<input class="iena-checkbox-cpt" onclick="selectCompetency(this)" type="checkbox" id="{{competency.shortname}}" value="{{competency.id}}">
+											<a>{{competency.shortname}}</a>
+											</div>
 											{{#has_children}}
 												<ul>
 													{{#children}}
 														<li> 
-															<input class="iena-checkbox-cpt" onclick="selectCompetency(this)" type="checkbox" id="{{competency.shortname}}" value="{{competency.id}}"><a>{{competency.shortname}}</a>
+															<div class="fram-iena-wrapper"><input class="iena-checkbox-cpt" onclick="selectCompetency(this)" type="checkbox" id="{{competency.shortname}}" value="{{competency.id}}"><a>{{competency.shortname}}</a></div>
 														{{#has_children}}
 															<ul>
 																{{#children}}
 																	<li> 
-																		<input class="iena-checkbox-cpt" onclick="selectCompetency(this)" type="checkbox" id="{{competency.shortname}}" value="{{competency.id}}"><a>{{competency.shortname}}</a>
+																		<div class="fram-iena-wrapper"><input class="iena-checkbox-cpt" onclick="selectCompetency(this)" type="checkbox" id="{{competency.shortname}}" value="{{competency.id}}"><a>{{competency.shortname}}</a></div>
 																	{{#has_children}}
 																		<ul>
 																			{{#children}}
 																				<li> 
-																					<input class="iena-checkbox-cpt" onclick="selectCompetency(this)" type="checkbox" id="{{competency.shortname}}" value="{{competency.id}}"><a href='#'>{{competency.shortname}}</a></li>
+																					<div class="fram-iena-wrapper"><input class="iena-checkbox-cpt" onclick="selectCompetency(this)" type="checkbox" id="{{competency.shortname}}" value="{{competency.id}}"><a href='#'>{{competency.shortname}}</a></div></li>
 																			{{/children}}
 																		</ul>
 																	{{/has_children}}