make icon appear below li name - html

Question

How can I make the icon ion-edit appear below the list name .
for ex icon should appear below the names Oracl,PostgresSql,Mysql and then the border bottom line should come.
In my case its appearing at the right side of each list names.I want it below the list names with some gap.
on click of Data Source Connections the sublist will be shown there the pencil icon has to be aligned below each name.
Is there any css property 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 upto 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>

Answer 1

$('.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 upto 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%;
margin:0;
padding:0;
}
ul.src-main-menu li ul i {
display: inline-block;
}
.src-main-sub ul li {
border-bottom: 1px solid black;
margin: 20px 0;
padding:0 5px;
}
.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;
}
ul.src-main-menu .src-main-sub i.ion-chevron-down {
transition: all 0.5s;
position: static;
left: 0;
}
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 float-right"></i></h5>
<ul class="closed">
<li><span class='d-block'>Oracle 12c</span><i class="ion-edit d-block mt-2"></i></li>
<li><span class='d-block'>PostgresSQL</span><i class="ion-edit d-block mt-2"></i></li>
<li><span class='d-block'>MySql</span><i class="ion-edit d-block mt-2"></i></li>
</ul>
</li>
</ul>
</div>
</div>
</div>

Answer 2

This part of your code is what is aligning your icons to the right, remove it and see the effect.
ul.src-main-menu .src-main-sub i {
transition: all 0.5s;
position: absolute;
right: 10px;
}
The code below will give your what you want
.closed li{
display: flex;
justify-content: center; // remove this if you don't want them centered
align-items: center;
flex-direction: column;
}