I have a basic SpringBoot app., embedded Tomcat, Thymeleaf template engine, and package as an executable JAR file.
I have this piece of code in my HTML page, there is 1 Font Awesome icon that does not show up (the second: fa fa-podcast)
<!-- Start Menu -->
<ul class="pure-menu-list">
<li class="pure-menu-title">Start</li>
<li class="menu-principal pure-menu-item pure-menu-selected">
<a href="/tdk/deviceevent/list" class="pure-menu-link">
<i class="fa fa-mixcloud fa-lg fa-fw"></i> A
</a>
</li>
<li class="menu-principal pure-menu-item">
<a href="/tdk/device/list" class="pure-menu-link">
<i class="fa fa-podcast fa-lg fa-fw"></i> B
</a>
</li>
<li class="menu-principal pure-menu-item ">
<a href="#" class="pure-menu-link">
<i class="fa fa-truck fa-lg fa-fw"></i> C
</a>
</li>
<li class="menu-principal pure-menu-item">
<a href="/tdk/timeLapse/list" class="pure-menu-link">
<i class="fa fa-clock-o fa-lg fa-fw"></i> D
</a>
</li>
<li class="menu-principal pure-menu-item">
<a href="/tdk/alarmNotification/list" class="pure-menu-link">
<i class="fa fa-flag fa-lg fa-fw"></i> E
</a>
</li>
<li class="menu-principal pure-menu-item">
<a href="/tdk/guardian/list" class="pure-menu-link">
<i class="fa fa-shield fa-lg fa-fw"></i> F
</a>
</li>
<li class="menu-principal pure-menu-item">
<i class="fa fa-cogs fa-lg fa-fw"></i> G
</li>
<li class="menu-principal pure-menu-item"><i class="fa fa-user fa-lg fa-fw"></i> H</li>
<!-- <li class="menu-principal pure-menu-item">
<i class="fa fa-tv fa-lg fa-fw"></i> I
</li> -->
<li class="menu-principal pure-menu-item">
<i class="fa fa-question-circle fa-lg fa-fw"></i> Help
</li>
</ul>
what version of font-awesome library do you have ??
make sure you have the latest version downloaded and you will be fine
if you want to check if fa-podcast check the version it is introduced in
so you need to have font awesome version > 4.7
Related
I have a menu item, having submenus, which I want to put in another menu item. That is as multilevel sidebar items. But there is overlapping as seen on the following image. How can it be fixed?
I expect XYZ, A,B, and C. to shift toward bottom.
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<div id="theModal" class="modal fade text-center">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-swatchbook"></i>
<p>
Servis
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="serviceorder" class="nav-link">
<i class="nav-icon far fa-image"></i>
<p>
Q
</p>
</a>
</li>
<li class="nav-item">
<a href="vehicleinservice" class="nav-link">
<i class="nav-icon fas fa-edit"></i>
<p>
W
</p>
</a>
</li>
<li class="nav-item">
<a href="servicehistory" class="nav-link">
<i class="nav-icon far fa-image"></i>
<p>
P
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="vehicleinservice" class="nav-link" #onclick="OnVehicleInServiceClick">
<i class="nav-icon fas fa-edit"></i>
<p>
Has-a-submenu-list
<span class="badge badge-info right">#vehicleInServiceCount.VehicleInServiceCount</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="takingintoservice" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>111111111r</p>
<span class="badge badge-info right">#vehicleInServiceCount.TakingIntoServiceCount</span>
</a>
</li>
<li class="nav-item">
<a href="inmaintenance" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>222222222</p>
<span class="badge badge-info right">#vehicleInServiceCount.InMaintenanceCount</span>
</a>
</li>
<li class="nav-item">
<a href="waitingsparepart" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>3333333333</p>
<span class="badge badge-info right">#vehicleInServiceCount.WaitingSparePartCount</span>
</a>
</li>
<li class="nav-item">
<a href="readytodeliver" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>4444444</p>
<span class="badge badge-info right">#vehicleInServiceCount.ReadyToDeliveryCount</span>
</a>
</li>
<li class="nav-item">
<a href="delivered" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>55555555</p>
<span class="badge badge-info right">#vehicleInServiceCount.DeliveredCount</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a href="customercard" class="nav-link">
<i class="nav-icon fas fa-user-tie"></i>
<p>
XYZ
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="invoice" class="nav-link">
<i class="nav-icon fas fa-layer-group"></i>
<p>
A
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="stockcard" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>A1</p>
</a>
</li>
<li class="nav-item">
<a href="stocksale" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>A2</p>
</a>
</li>
<li class="nav-item">
<a href="stockpurchase" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>A3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="invoice" class="nav-link">
<i class="nav-icon fas fa-receipt"></i>
<p>
B
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="invoiceinbound" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>B1</p>
</a>
</li>
<li class="nav-item">
<a href="invoiceoutbound" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>B2</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-tools"></i>
<p>
C
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="safeaccount" class="nav-link">
<i class="fas fa-lira-sign nav-icon"></i>
<p>C1</p>
</a>
</li>
<li class="nav-item">
<a href="staff" class="nav-link">
<i class="fas fa-industry nav-icon"></i>
<p>C2</p>
</a>
</li>
<li class="nav-item">
<a href="users" class="nav-link">
<i class="fas fa-users nav-icon"></i>
<p>C3</p>
</a>
</li>
<li class="nav-item">
<a href="firminfo" class="nav-link">
<i class="fas fa-industry nav-icon"></i>
<p>C4</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
The overlap happens as the li elements you expand are taken out of the content/document flow, while the other lis A B C etc. are not.
Technically you are not expanding them rather show/hiding them.
Here is the MDN article:
Position
You either would've to "put them back" into the content flow by using position: relative, for example, or by shifting the other elements downwards with a padding-top. The second solution wouldn't be my first choice, though.
How to add active class in AdminLTE-2.4.5 sidebar on click
I my laravel app i added multilevel sidebar and i want to add active class when i click it but i do not have any idea to do that so how can i do that any body help thanks in advance
sidebar image
http://prntscr.com/n1g3kl
this is my html code
<ul class="sidebar-menu" data-widget="tree">
<li class="treeview">
<a href="#">
<i class="fa fa-share"></i> <span>sidebar Menus</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="treeview">
<a href="#"><i class="fa fa-tasks"></i> Operation
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="treeview">
<li><i class="fa fa-circle-o"></i>General Dashboard</li>
</li>
</ul>
</li>
<li class="treeview">
<a href="#"><i class="fa fa-building"></i> Department
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="treeview">
<a href="#"><i class="fa fa-circle-o"></i> Driver
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> All Driver</li>
<li><i class="fa fa-circle-o"></i> Pending Approval</li>
</ul>
</li>
</ul>
</li>
<li class="treeview">
<a href="#"><i class="fa fa-user"></i> Bd Partner
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> Bd List</li>
</ul>
</li>
</ul>
</li>
</ul>
I made a sidebar which contains a drop-down. And if the dropdown is open. I want the <li class="nav-item nav-item-sidebar"> (Which is at the top of the whole dropdown) to have a certain CSS style. Which is
border-left: 3px solid #1ABB9C;
padding: 8px 8px 8px 5px;
background-color: #222732;
How can I achieve that?
HTML
<li class="nav-item nav-item-sidebar">
<a class="nav-link" href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">
<i class="fal fa-thumbs-up fa-lg sidebar-icon"></i>
<span class="sidebar-link">Dropdown</span>
<span class="fal fa-angle-right fa-lg sidebar-arrow rotate-effect"></span>
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li class="nav-item">
<a href="#Bier1" class="nav-link sidebar-dropdown-nav-link">
<i class="fal fa-copy fa-lg sidebar-icon"></i>
<span class="sidebar-link">Files</span>
<span class="fal fa-angle-right fa-lg sidebar-arrow"></span>
</a>
</li>
<li class="nav-item">
<a href="#Bier2" class="nav-link sidebar-dropdown-nav-link">
<i class="fal fa-comments fa-lg sidebar-icon"></i>
<span class="sidebar-link">Comments</span>
<span class="fal fa-angle-right fa-lg sidebar-arrow"></span>
</a>
</li>
<li class="nav-item">
<a href="#Bier3" class="nav-link sidebar-dropdown-nav-link">
<i class="fal fa-image fa-lg sidebar-icon"></i>
<span class="sidebar-link">Pictures</span>
<span class="fal fa-angle-right fa-lg sidebar-arrow"></span>
</a>
</li>
</ul>
</li>
I guess it has something to do with a[aria-expanded="true"] but I'm not sure.
How can I achieve the above?
Here when the dropdown is called, collapse class will change the colour of the items. And btnBackground is called from a jquery, and it will apply the css. Try this out.
In the dropdown items, the effect is happening after loading the default css, but you can change it when the dropdown is loaded, this is to show how the colour changes from default to the css you added.
$(".dropdown-toggle").click(function() {
$(this).toggleClass("btnBackground");
});
.btnBackground {
border-left: 3px solid #1ABB9C;
padding: 8px 8px 8px 5px;
background-color: #222732;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<li class="nav-item nav-item-sidebar dropdown-toggle">
<a class="nav-link" href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">
<i class="fal fa-thumbs-up fa-lg sidebar-icon"></i>
<span class="sidebar-link">Dropdown</span>
<span class="fal fa-angle-right fa-lg sidebar-arrow rotate-effect"></span>
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li class="nav-item">
<a href="#Bier1" class="nav-link sidebar-dropdown-nav-link">
<i class="fal fa-copy fa-lg sidebar-icon"></i>
<span class="sidebar-link">Files</span>
<span class="fal fa-angle-right fa-lg sidebar-arrow"></span>
</a>
</li>
<li class="nav-item">
<a href="#Bier2" class="nav-link sidebar-dropdown-nav-link">
<i class="fal fa-comments fa-lg sidebar-icon"></i>
<span class="sidebar-link">Comments</span>
<span class="fal fa-angle-right fa-lg sidebar-arrow"></span>
</a>
</li>
<li class="nav-item">
<a href="#Bier3" class="nav-link sidebar-dropdown-nav-link">
<i class="fal fa-image fa-lg sidebar-icon"></i>
<span class="sidebar-link">Pictures</span>
<span class="fal fa-angle-right fa-lg sidebar-arrow"></span>
</a>
</li>
</ul>
</li>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
You cant access parent elements with css, as far as I know.
But here you have a pure css solution to archive you goal.
.nav-item.nav-item-sidebar a[aria-expanded="true"],
.nav-item.nav-item-sidebar a[aria-expanded="true"] + ul {
border-left: 3px solid #1ABB9C;
padding: 8px 8px 8px 5px;
background-color: #222732;
}
Here is the Fiddle
I'm trying to find a solution to right-align my content for my container which is holding an inline un-ordered list. The issue that I'm having is that my list contains mixed content (text, links and icons).
<!-- Header -->
<div class="container">
<div id="intro" class="text-right">
<ul class="list-inline">
<li>5420 Bond Road, Louisville, MS 39339</li>
<li><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-instagram fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus fa-lg" aria-hidden="true"></i></li>
</ul>
</div>
</div>
<!-- Nav Bar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">MCBC Louisville</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</nav>
Use this
<ul class="text-right list-inline">
You can use "pull-right" class. It's default class of bootstrap and by this you can pull the text or your content to the right side easily.
here is how you can add the class:
<div class="container">
<div id="intro" class="pull-right">
<ul class="list-inline">
<li>Address Goes Here</li>
<li><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-instagram fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus fa-lg" aria-hidden="true"></i></li>
</ul>
</div>
</div>
you need to add bootstrap class 'text-right' on "intro" div like below:
<div class="container">
<div id="intro" class="text-right">
<ul class="list-inline">
<li>Address Goes Here</li>
<li><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-instagram fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus fa-lg" aria-hidden="true"></i></li>
</ul>
</div>
</div>
**add inline style float:right**
<div class="container">
<div id="intro" class="text-right" style="float:right">
<ul class="list-inline">
<li>Address Goes Here</li>
<li><a href="#"><i class="fa fa-facebook fa-lg" aria-hidden="true"></i>
</a></li>
<li><i class="fa fa-twitter fa-lg" aria-hidden="true"></i>
</li>
<li><a href="#"><i class="fa fa-instagram fa-lg" aria-hidden="true"></i>
</a></li>
<li><a href="#"><i class="fa fa-google-plus fa-lg" aria-hidden="true"></i>
</a></li>
</ul>
</div>
</div>
So, the way I've addressed this issue is I just took the content from the "intro" id and simply placed it on the nav-bar right aligned that was a much easier solution. I would have preferred to have a container above the navbar with right-aligned content, but I tried everything that was suggested here to no avail. I appreciate everyone's responses, you folks are amazing.
**Try this**
<ul class="text-right list-inline d-block">
<li>5420 Bond Road, Louisville, MS 39339</li>
<li><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-instagram fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus fa-lg" aria-hidden="true"></i></li>
</ul>
I have a basic BootStrap 3 nav header. I would like to separate the existing header so that I have the single dropdown item on the far right, and the rest of the other main menu items to be on the far left. Not sure how to do this?
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Cost Tracking</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-left" style="margin-left:96px">
<button type="button" class="btn btn-primary btn-sm">Project Details</button>
<button type="button" class="btn btn-primary btn-sm">Cost Centre</button>
<button type="button" class="btn btn-primary btn-sm">Address Book</button>
<button type="button" class="btn btn-primary btn-sm">Time Tracking</button>
<button type="button" class="btn btn-primary btn-sm">Reports</button>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li class="background-color:#333">
<i class="fa fa-edit fa-fw"></i> Project Info
</li>
<li>
<i class="fa fa-user fa-fw"></i> Project Roles
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Rate Schedule Review
</li>
<li>
<i class="fa fa-bar-chart-o fa-fw"></i> Surcharges
</li>
<li>
<i class="fa fa-group fa-fw"></i> Project Crews
</li>
<li>
<i class="fa fa-user fa-fw"></i> Project Employees
</li>
</ul>
<!-- /#side-menu -->
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
According to the docs to have a navigation over to the right hand side of the navbar you need to place it in it's own <ul>:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
As a side note, the only direct child of a <ul> can be a <li>, so your <button>s need to be wrapped in list elements:
<li><button type="button" class="btn btn-primary btn-sm">Project Details</button></li>
Demo
If you don't want it in a separate list, then you'll have to override the float on the <ul> and then float the final <li> right. You'll also need the .dropdown-menu-right class on the dropdown <ul>.
...
<li><button type="button" class="btn btn-primary btn-sm">Reports</button></li>
<li class="dropdown pull-right">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-menu-right dropdown-user">
<li><i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
CSS
.navbar-nav {
float: none;
}
Demo