I have added a side-nav version of Materialize with icons in my page. But when I click to expand and show the side-nav, the icons are stacking diagonally. I can't figure out why.
Here is the code I'm using for this.
<div class="navbar-fixed">
<nav class="headerRow">
<div id="adminMenu" class="nav-wrapper">
BASTAS
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>
<i class="medium material-icons">home</i>
</li>
<li>
<i class="medium material-icons">card_giftcard</i>
</li>
<li>
<i class="material-icons">dashboard</i>
</li>
<li>
<i class="material-icons">group</i>
</li>
<li>
<i class="material-icons">groupadd</i>
</li>
<li>
<i class="material-icons">system_update_alt</i>
</li>
<li>
<i class="material-icons">email</i>
</li>
<li>
<i class="material-icons">settings</i>
</li>
</ul>
<ul class="side-nav" id="narrower">
<li>
<i class="material-icons">home</i>Home
</li>
<li>
<i class="small material-icons">card_giftcard</i>Give
</li>
<li>
<i class="small material-icons">dashboard</i>Dash
</li>
<li>
<i class="small material-icons">group</i>Recipients
</li>
<li>
<i class="material-icons">groupadd</i>Add Recipients
</li>
<li>
<i class="material-icons">system_update_alt</i>Import
</li>
<li>
<i class="material-icons">email</i>Send Reminder
</li>
<li>
<i class="material-icons">settings</i>Settings
</li>
</ul>
</div>
</nav>
Any help with this would be greatly appreciated. I've searched around, and not come across this issue with other posts.
You probably tried changing li height. I've done this before and someone on materialize chatter helped me, I don't remember his name. I know it is old, but it could help someone else:
.side-nav li>a,.side-nav li>a>i.material-icons {
height: 42px;
line-height: 42px;
}
Related
I have this code in bootstrap 5 and it works as expected.
when clicking the tag the appropriate divs collapsed/hiden.
However i want to prevent the closing of other divs when you open the other one, how to prevent this in bootstrap 5?
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" role="button" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
<i class="icon-layout menu-icon"></i>
<span class="menu-title">Listing Management</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-basic">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> 1<li>
<li class="nav-item"> 2<li>
<li class="nav-item"> 3<li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" role="button" href="#ui-enquiries" aria-expanded="false" aria-controls="ui-enquiries">
<i class="icon-grid-2 menu-icon"></i>
<span class="menu-title">Inquiries</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-enquiries">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> 1<li>
<li class="nav-item"> 2<li>
<li class="nav-item"> 3<li>
</ul>
</div>
</li>
I am using a sidebar using HTMLTemplateProcessor
<nav id="sidebar">
<h1>Side</h1>
<ul class="list-unstyled components mb-5">
<li class="active">
<span class="fa fa-home"></span> Home
</li>
<li>
<span class="fa fa-user"></span>
{%IWFrameRegion_FRAME_Menu.lnkBF_FRAME_Menu%}
</li>
<li>
<span class="fa fa-sticky-note"></span> Reports
</li>
<li>
<span class="fa fa-cogs"></span> Tools
</li>
<li>
<span class="fa fa-paper-plane"></span> Contacts
</li>
</ul>
</nav>
The {%IWFrameRegion_FRAME_Menu.lnkBF_FRAME_Menu%} is the TIWLink reference part, but how do I put the span class (for the logo of link) correctly like the sidebar template.
Now it look something like this because can't put the span class into the rendered <a> tag for {%IWFrameRegion_FRAME_Menu.lnkBF_FRAME_Menu%}.
I'm wondering how do I implement a star rating system in ASP .NET MVC when the stars are encapsulated in a Ul, li.
I'm using https://htmlstream.com/preview/unify-v2.5.1/e-commerce/page-single-product-2.html as a layout.
The code below is within my form post method
#using (Html.BeginForm("Index", "Drink", FormMethod.Post))
{
....
<!-- Rating -->
<div class="col-5 col-sm-4 col-md-3">
<h3 class="h6 mb-1">Rate:</h3>
<ul class="js-rating u-rating-v1 g-font-size-20 g-color-gray-light-v3 mb-0" data-hover-classes="g-color-primary">
<li class="g-color-primary g-line-height-1_4 click">
<i class="fa fa-star"></i>
</li>
<li class="g-color-primary g-line-height-1_4 click">
<i class="fa fa-star"></i>
</li>
<li class="g-color-primary g-line-height-1_4 click">
<i class="fa fa-star"></i>
</li>
<li class="g-color-primary g-line-height-1_4 click">
<i class="fa fa-star"></i>
</li>
<li class="g-line-height-1_4">
<i class="fa fa-star"></i>
</li>
</ul>
<!-- End Rating -->
</div>
....
}
I'm wondering how do I let my controller know what the selected rating is?
I have a portion of code for Navigation Bar in the header of the website.
I repeat it within of several views.
The code is almost equal for all views, change just for setting css class "active" for setting the background color of <li> TAG.
Partial Views
#Model String
<nav class="navbar">
<div class="container">
<ul class="nav nav-pills nav-justified">
<li>
<a href="MainPage">
<span class="glyphicon glyphicon-dashboard" aria-hidden="true"> </span>
MainPage
</a>
</li>
<li class="active">
<a href="SectionSummary">
<span class="glyphicon glyphicon-stats" aria-hidden="true"> </span>
Summary
</a>
</li>
<li>
<a href="Check">
<span class="glyphicon glyphicon-check" aria-hidden="true"> </span>
Check
</a>
</li>
<li class="(#Model=="Print")?"active":"">
<a href="Print">
<span class="glyphicon glyphicon-print" aria-hidden="true"> </span>
Print
</a>
</li>
</ul>
</div>
</nav>
I call it in the views in this way:
#Html.Partial("~/Views/Shared/PSANavigationBar.cshtml")
I would to pass a parameter to #Html.Partial and then in the PartialView to test a value and flagging class="active" when occurs a condition!
For example:
#Html.Partial("~/Views/Shared/PSANavigationBar.cshtml", "Print")
in the view, something like this:
</li>
<li class="(#Model=="Check")?"active":"">
<a href="Check">
<span class="glyphicon glyphicon-check" aria-hidden="true"> </span>
Check
</a>
</li>
<li class="(#Model=="Print")?"active":"">
<a href="Print">
<span class="glyphicon glyphicon-print" aria-hidden="true"> </span>
but it doesn't work!
How can I do?
Many thanks to all.
The way you are calling the partial view looks okay, you just need to change the way you choose your class:
<li class="#(Model == "Check" ? "active":"")">
the Model is how you receive your parameter, and this is a way you can choose a class within a razor condition. You can see another example of how too choose your class within a condition with asp mvc razor.
You should have something like this:
#model String
<nav class="navbar">
<div class="container">
<ul class="nav nav-pills nav-justified">
<li>
<a href="MainPage">
<span class="glyphicon glyphicon-dashboard" aria-hidden="true"> </span>
MainPage
</a>
</li>
<li class="active">
<a href="SectionSummary">
<span class="glyphicon glyphicon-stats" aria-hidden="true"> </span>
Summary
</a>
</li>
<li>
<a href="Check">
<span class="glyphicon glyphicon-check" aria-hidden="true"> </span>
Check
</a>
</li>
<li class="#(Model=="Print"?"active":"")">
<a href="Print">
<span class="glyphicon glyphicon-print" aria-hidden="true"> </span>
Print
</a>
</li>
</ul>
</div>
</nav>
Please notice that # is before the parenthesis ( not after it in class.
I am rendering this partial in adminlte.html.erb file but it is not loading properly. I tried to put this code inside the admin file itself which is rendering this partial but it is still not loading properly.I also checked in other browsers.When I inspect the element,the sidebar suddenly loads by itself.
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<%= image_tag("user2-160x160.jpg", class: 'img-circle')%>
<!-- <img src="images/user2-160x160.jpg" class="img-circle" alt="User Image" />-->
</div>
<div class="pull-left info">
<p>abcd</p>
<i class="fa fa-circle text-success"></i> Online
</div>
</div>
<!-- search form -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search..."/>
<span class="input-group-btn">
<button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
</span>
</div>
</form>
<!-- /.search form -->
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<!--Dashboard-->
<li class="active treeview">
<a href="/">
<i class="fa fa-dashboard"></i> <span>Dashboard</span> <i class="fa fa-circle-o pull-right"></i>
</a>
</li>
<!-- Dashboard END -->
<!--USER-->
<li class="treeview">
<a href="#">
<i class="fa fa-user"></i> <span>Manage User</span> <i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li class="active"></i> Create User</li>
<li><i class="fa fa-circle-o"></i> List User</li>
</ul>
</li>
<!-- USER END -->
<!--MY_PROJECT -->
<li class="treeview">
<a href="#">
<i class="fa fa-sitemap"></i>
<span>My Project</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> Active</li>
<li><i class="fa fa-circle-o"></i> Completed</li>
<li><i class="fa fa-circle-o"></i> Hold</li>
</ul>
</li>
<!--END MYPROJECT-->
<!--FOLLOW UPS -->
<li>
<a href="pages/mailbox/mailbox.html">
<i class="fa fa-envelope"></i> <span>Followups</span>
<small class="label pull-right bg-yellow">12</small>
</a>
</li>
<!--END FOLLOW UPS -->
<!--FOLLOW UPS -->
<li>
<a href="pages/mailbox/mailbox.html">
<i class="fa fa-laptop"></i> <span>Manage RMs</span>
</a>
</li>
<!--END FOLLOW UPS -->
<!-- CALLS -->
<li class="treeview">
<a href="call_records/">
<i class="fa fa-mobile"></i>
<span>Calls</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> Open</li>
<li><i class="fa fa-circle-o"></i> All</li>
<li><i class="fa fa-circle-o"></i> Rejected</li>
</ul>
</li>
<!--END CALLS -->
<!-- CONTACTS -->
<li class="treeview">
<a href="#">
<i class="fa fa-file-audio-o"></i>
<span>Contacts</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> +New Contact</li>
<li><i class="fa fa-circle-o"></i> Assigned</li>
<li><i class="fa fa-circle-o"></i> Open</li>
<li><i class="fa fa-circle-o"></i> All</li>
<li><i class="fa fa-circle-o"></i> Rejected</li>
</ul>
</li>
<!--END CONTACTS -->
<!-- ACTIONS -->
<li class="treeview">
<a href="#">
<i class="fa fa-files-o"></i>
<span>Actions</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> Top Navigation</li>
<li><i class="fa fa-circle-o"></i> Boxed</li>
<li><i class="fa fa-circle-o"></i> Fixed</li>
<li><i class="fa fa-circle-o"></i> Collapsed Sidebar</li>
</ul>
</li>
<!--END ACTIONS -->
</ul>
</section>
<!-- /.sidebar -->
</aside>
I'm rendering this partial like
<html>
<body>
<%= render partial: 'layouts/admin_lte_2_sidebar' %>
</body>
</html>
Please help me out to solve the issue. Thanks in advance.
This is because of the height value in slimScrollDiv
<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 480px;">
What you can do from here on is to modify your css into
.slimScrollDiv{height: auto !important;}
This will not limit the height of the div