How can I display the ion-edit icon below the list names? The icons are currently appearing on the right side of each list name, but I want them to be aligned below with some spacing.
When clicking on "Data Source Connections," a sublist will be shown where the pencil icon needs to be aligned below each name.
Is there a CSS property that needs to be included?
$('.src-sub-menu').click(function() {
$(this).toggleClass('submenu-open').parent('li').siblings('li').children('h4.submenu-open').removeClass('submenu-open');
$(this).parent().toggleClass('submenu-opensubmenu-open').children('ul').slideToggle(500).end().siblings('.submenu-open').removeClass('submenu-open').children('ul').slideUp(500);
$('html, body').animate({
scrollTop: (0),
}, "fast"); /*this will scroll up to the top, not sure if I want to use this yet */
});.whole-dbsource {
height: 100%;
}
.db-pagerow {
margin-left: 12%;
justify-content: center;
height: 80%;
}
.source-container {
height: 300px; /* ED: Changed to see the dropdown */
border-radius: 10px;
background-color: white;
overflow: scroll;
position: relative;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26);
}
h5 {
padding: 10px;
margin: 0;
}
h5.submenu-open {
padding: 10px;
color: white;
background-color: #28be9a;
}
ul.src-main-menu {
position: relative;
list-style-type: none;
height: 12px;
}
ul.src-main-menu .src-main-sub {
margin: 20px 0;
}
ul.src-main-menu li.src-main-sub {
padding: 1px 0px;
cursor: pointer;
background-color: #e0e0e0;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
ul.src-main-menu li ul {
list-style-type: none;
color: black;
display: none;
position: relative;
max-height: 1000px;
/*fallback for FireFox */
height: 100%;
}
ul.src-main-menu li ul i {
display: inline-block;
}
.src-main-sub ul li {
border-bottom: 1px solid black;
margin: 20px 0;
}
.src-main-sub ul li:last-child {
border-bottom: none;
margin: 0;
}
ul.src-main-menu li ul.open {
display: block;
}
ul.src-main-menu .src-main-sub i {
transition: all 0.5s;
position: absolute;
right: 10px;
}
ul.src-main-menu li i.closed {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
ul.src-main-menu li i.open {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"/>
<div class="container-fluid whole-dbsource">
<div class="row db-pagerow">
<div class="col-sm-7 source-container">
<ul class="src-main-menu">
<li class="src-main-sub">
<h5 class="src-sub-menu">Data Source Connections<i class="ion-chevron-down closed"></i></h5>
<ul class="closed">
<li>Oracle 12c<i class="ion-edit"></i></li>
<li>PostgresSQL<i class="ion-edit"></i></li>
<li>MySql<i class="ion-edit"></i></li>
</ul>
</li>
</ul>
</div>
</div>
</div>