For reference:
The tool I'm using: https://materializecss.com/
The outcome I have: https://imgur.com/a/3s7ekTS
The outcome I want: https://imgur.com/a/8BJExER
I have a dropdown on the navbar of my webpage. Before adding the class
.sidenav-trigger
To the following :
<li><i class="material-icons">settings</i>Settings</li>
Which is sat inside of the following <ul>:
<ul id='dropdown1' class='dropdown-content'>
<li>
<i class="material-icons">search</i>Search
</li>
<li>
<i class="material-icons">person</i>Profile
</li>
<li>
<i class="material-icons">public</i>Explore
</li>
<li>
<i class="material-icons">settings</i>Settings
</li>
<li>
<i class="material-icons">arrow_back</i>Logout
</li>
</ul>
The dropdown looks as intended.
Simply removing this class won't work as I need it in order to have a pullout sidebar.
How can I resolve the alignment of the text in the dropdown?
Try setting the height to auto !important as following:
<li>
<a href="" data-target="slide-out-settings" class="sidenav-trigger" style="color: black; height: auto !important;">
<i class="material-icons">settings</i>
Settings
</a>
</li>
Related
I bought a webpage ( files ) and on some website hosting providers it works, on others it doesn't.
And was wondering if any of you can point me in the right direction on how to change the index.html content to display the correct background image.
The webpage is static, divided into sections, having the below structure for the sidebar which hides/shows different section, with different background image.
<div class="inner">
<nav id="tmMainNav" class="tm-main-nav">
<ul>
<li>
<a href="#intro" id="tmNavLink1" class="scrolly active" data-bg-img="images/Homepage.png" data-page="#tm-section-1">
<i class="fas fa-home tm-nav-fa-icon"></i>
<span>Introduction</span>
</a>
</li>
<li>
<a href="#products" id="tmNavLink2" class="scrolly" data-bg-img="images/Portofolio.jpg" data-page="#tm-section-2" data-page-type="carousel">
<i class="fas fa-map tm-nav-fa-icon"></i>
<span>Projects</span>
</a>
</li>
<li>
<a href="#company" id="tmNavLink3" class="scrolly" data-bg-img="images/Projects.png" data-page="#tm-section-3">
<i class="fas fa-users tm-nav-fa-icon"></i>
<span>Qualifications</span>
</a>
</li>
<li>
<a href="#contact" id="tmNavLink4" class="scrolly" data-bg-img="images/Contact.jpg" data-page="#tm-section-4">
<i class="fas fa-comments tm-nav-fa-icon"></i>
<span>Contact</span>
</a>
</li>
</ul>
</nav>
</div>
How should I change "data-bg-img="images/Homepage.png" " to actually render background-image ?
I think if it was possible, would have been awesome, to put into the CSS at the top of the page, in the style, all the background images, and somehow to trigger the one for which the section is currently viewed.
The sections are called from this:
<!-- section 1 -->
<section id="tm-section-1" class="tm-section">
<div class="ml-auto">
<div class="myDiv">
<header class="mb-4"><h1 class="tm-text-shadow"><strong> greetings </strong></h1></header>
Continue
<!-- data-nav-link holds the ID of nav item, which means this link should behave the same as that nav item -->
</div>
</div>
</section>
In Hyper from Bootstrap, the following HTML creates a left navigation menu:
<ul class="metismenu side-nav mm-show">
<li class="side-nav-item mm-active">
<a href="javascript: void(0);" class="side-nav-link active">
<i class="uil-home-alt"></i>
<span class="badge badge-success float-right">4</span>
<span> Dashboards </span>
</a>
<ul class="side-nav-second-level mm-collapse mm-show" aria-expanded="false">
<li>
Analytics
</li>
<li>
CRM
</li>
<li class="mm-active">
Ecommerce
</li>
<li>
Projects
</li>
</ul>
</li>
</ul>
My only problem is that by default, it is Hover to open each item up, but what I want is for it to be on click.
How can I do this?
More specifically, the important classes here are the metismenu, side-nav, side-nav-item, and side-nav-link classes. If there's anything I can do or a class I can add to change it from hover to click, that's what I am looking for. Our entire website is built upon Hyper.
I am using materialize collapsible for my navigation. Everything works fine except when I reload the page. The collapsible gets closed and I have to manually make it active again. How do I make the collapsible remain active on page reload?
Here's my code:
<ul id="slide-out" class="side-nav fixed leftside-navigation">
<ul class="collapsible" data-collapsible="expandable">
<li>
<a class="collapsible-header">
<i class="material-icons">home</i> Home
</a>
<div class="collapsible-body">
<ul>
<li ui-sref-active="active">
<a ui-sref="protect" ui-sref-opts="{reload: true}">
<i class="material-icons">dashboard</i> Dashboard
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="store" ui-sref-opts="{reload: true}">
<i class="material-icons">cloud_done</i> Storage
</a>
</li>
</ul>
</div>
</li>
<li>
<a class="collapsible-header">
<i class="material-icons">event_available</i>Manage
</a>
<div class="collapsible-body">
<ul>
<li ui-sref-active="active">
<a ui-sref="manage" ui-sref-opts="{reload: true}">
<i class="material-icons">storage</i> Manage Storage
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="enroll" ui-sref-opts="{reload: true}">
<i class="material-icons">file_download</i> Enroll
</a>
</li>
</ul>
</div>
</li>
</ul>
</ul>
What you want to do concerns program state, hence there's no way for you to do that unless you save the name or id of the active accordion. which can easily be done using browser local storage.
I am trying to add a user's profile picture to a dropdown menu using Bootstrap 3.
Here is a code snippet of the dropdown menu currently in my code:
<ul class="nav navbar-right top-nav">
<li class="dropdown">
<i class="fa fa-user"></i>Administrator <b class="caret"></b>
<ul class="dropdown-menu">
<img class="thumbnail" style="height:100px; float-left; margin:10px" src="default.jpg">
<li>
<i class="fa fa-fw fa-user"></i> Profile
</li>
<li>
<i class="fa fa-fw fa-envelope-o"></i>Send email report
</li>
<li>
<i class="fa fa-fw fa-gear"></i> Settings
</li>
<li class="divider"></li>
<li>
<i class="fa fa-fw fa-power-off"></i> Log Out
</li>
</ul>
</li>
</ul>
This is what it currently looks like:
I have tried putting the unordered list inside of a div and gave the div the dropdown class, but this broke the nice style of the links in this menu. Also it would require a lot more formatting to move the list next to the picture.
Is there any way to create a dropdown menu with a picture floated to the left of the list items??
Thank you in advance for any help with this problem.
I'm a bit stumped with a problem with the bootstrap.ui module for AngularJS.
This is my HTML:
<nav id="sidebar">
<ul id="main-nav" class="open-active">
<li ng-controller="CollapseCtrl" class="dropdown">
<a ng-click="isCollapsed = !isCollapsed" href="javascript:;">
<i class="fa fa-wrench"></i>
Verktøy
<span class="caret"></span>
</a>
<ul ng-show="isCollapsed" class="sub-nav">
<li>
<a href="#/vernerunde">
<i class="fa fa-th-list"></i>
Ny Vernerunde
</a>
</li>
<li>
<a href="#/interaksjon">
<i class="fa fa-gears"></i>
Ny Interaksjon
</a>
</li>
<li>
<a href="#/brukerstyring">
<i class="fa fa-user"></i>
Brukerstyring
</a>
</li>
</ul>
</li>
<li ng-controller="CollapseCtrl" class="dropdown">
<a ng-click="isCollapsed = !isCollapsed" href="javascript:;">
<i class="fa fa-search"></i>
Lister
<span class="caret"></span>
</a>
<ul ng-show="isCollapsed" class="sub-nav">
<li>
<a href="#/list">
<i class="fa fa-desktop"></i>
Alle
</a>
</li>
</ul>
</li>
</ul>
</nav>
And this is the controller responsible for the isCollapsed model:
controllers.controller('CollapseCtrl', function ($scope) {
$scope.isCollapsed = false;
});
I've also made a small gif which I'm going to throw in that shows my actual problem. Now, I'm not too sure whether or not it's present in the gif, but it seems if I click the first element in the list, it works. Then when that first element has been toggled, and I click the element underneath, it totally breaks apart.
EDIT1:
Okay, I changed the directive from ng-show="" to collapse="", still using "isCollapsed". Now it's working, but the height of the box that's collapsed is too small.
Though I don't have much insight into the problem I strongly suspect that the issue is in here:
<a ng-click="isCollapsed = !isCollapsed" href="javascript:;">
<i class="fa fa-wrench"></i>
Verktøy
<span class="caret"></span>
</a>
Mind that the ng-click is executed once , but once a variable changes, the scope lifecycle will recalculate the scope several times. And once a variable which depends on isCollapsed will change, the scope is re-calculated again, and so forth. This might explain the unusual openings and closings of the title panes. Although I don't see exactly why isCollapse is recalculated.
Solution: Move it as a method inside the controller.