I m trying to open sidebar option in right side using bootstrap4 Vue but it's not working
here is my HTML
<li class="nav-item nav-dropdown open" disabled="disabled">
<div class="nav-link nav-dropdown-toggle">
<i class="fa fa-cart-arrow-down"></i>Product
</div>
<ul class="nav-dropdown-items">
<li class="nav-item">
<div>
<a href="#/product/Addproduct" class="nav-link">
<i class="fa fa-circle-thin"></i>Addproduct</a>
</div>
</li>
<li class="nav-item">
<div>
<a href="#/product/Listproduct" class="nav-link">
<i class="fa fa-circle-thin"></i>Listproduct</a>
</div>
</li>
</ul>
</li>
i want Addproduct & listProduct in right side instead of down
I tried to use dropdown right but it stops working any ideas what i m doing wrong.
I don't know what version are you using but just check the docs for pull-right and replace your default classes with the classes for right side.
Related
I have to customize sidebar that is provided by COREUI 4.x theme. Below is the code for my sidebar
<div class="app-body">
<div class="sidebar">
<nav class="sidebar-nav">
<ul class="nav">
<li class="nav-item">
<a
class="nav-link"
routerLink="/dashboard"
[routerLinkActive]="['active']"
[routerLinkActiveOptions]="{ exact: true }"
>
<i class="icon-speedometer"></i> Dashboard
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#"
routerLink="/alerts-configuration"
[routerLinkActive]="['active']"
[routerLinkActiveOptions]="{ exact: true }"
>
<i class="icon-layers"></i> Alert Configuration
</a>
</li>
<li
class="nav-item nav-dropdown"
dropdown
[routerLinkActive]="['active']"
[routerLinkActiveOptions]="{ exact: true }"
>
<a class="nav-link nav-dropdown-toggle">
<i class="icon-puzzle"></i>Administration
</a>
<ul class="nav-dropdown-items">
<li class="nav-item">
<a
class="nav-link"
routerLink="/device-management/devices"
[routerLinkActive]="['active']"
[routerLinkActiveOptions]="{ exact: true }"
>
<i class=""></i>Devices Management
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
routerLink="/sites"
[routerLinkActive]="['active']"
[routerLinkActiveOptions]="{ exact: true }"
>
<i class="icon-settings"></i>Sites Management
</a>
</li>
</ul>
</li>
</ul>
</nav>
<button class="sidebar-minimizer brand-minimizer" type="button"></button>
</div>
</div>
Now when I try to click on Administration, it wont open the dropdown and also when I try to minimize from the arrow on the bottom, this wont work as well. Please help!
I was having this issue also. I figured out that if the JavaScript files that control sidebar animation are added before the page is generated the sidebar doesn't work.
The solution:
Add the CORE UI JavaScript files at the end.
Looks a little like this:
<html>
<body>
{the entire html page}
<script src="https://coreui.io/demo/free/3.4.0/js/main.js" async defer></script>
</body>
</html>
"async defer" may or may not be necessary.
With coreui 4.x and BS 5 you should add data-coreui="navigation" to the sidebar-nav element and it will start working correctly.
Please find below my code that is working.
<li class="nav-item nav-dropdown " [appIsAuthorized]="roleconst.ProductAdminAbove" (click)="status=!status"
[ngClass]="status ? 'open' : ''">
<a class="nav-link nav-dropdown-toggle ">
<i class="nav-icon icon-puzzle"></i> Management
</a>
This question already has answers here:
v4 bootstrap full height sidebar
(4 answers)
How to create a fixed sidebar layout with Bootstrap 4?
(5 answers)
Closed 3 years ago.
I'm trying to make a typical sidebar at the left of my template. I'm using bootstrap 4.
This is the code:
<nav class="team-left-column col-12 col-md-4 col-lg-2" style="background-color:#6c757d;">
<div class="dashboard-sidebar js-sticky top-0 px-3 px-md-4 px-lg-4 overflow-auto">
<ul class="sidebar navbar-nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<span data-feather="home"></span>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span>
Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users"></span>
Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2"></span>
Reports
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span>
Integrations
</a>
</li>
</ul>
</div>
</nav>
Why is it not showing properly the Y size? I want it to be responsive, please do not e.g. style="height:1280px;". I just want it to be displayed from the navbar to the very bottom of the screen. I'm copying examples from bootstrap but it is not working. What am I doing wrong?
try some css on that component so it will always have the height of the view
.dashboard-sidebar {
height: 100%;
}
The solution:
<nav class="team-left-column col-md-4 col-lg-2 position-fixed" style="background-color:#6c757d;height:100vh;margin-top: 58px;">
I had to use height:100vh and margin-top. Also I made it position-fixed in order to not to get scrolled content of the sidebar when I'm scrolling the main container.
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.
How do I set the default tab to be 'active' or 'viewed'?
As far as I understand the code below should set the 'add user' as the active tab and display the content in #addUser upon page load but not in my case. The add user tab is not displayed and I have to click on the other tabs and back at the add user tab again to see the content. Am I missing something? Most of my research returns me to set a class as active but still isn't working for me.
<li role="presentation" class="active">
<a href="#addUser" role="tab" data-toggle="tab">
<i class="fa fa-plus"></i> Add User
</a>
</li>
Here's the code for the creation of the tabview.
<div class="content-body">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#addUser" role="tab" data-toggle="tab">
<i class="fa fa-plus"></i> Add User
</a>
</li>
<li role="presentation">
<a href="#rUser" role="tablist" data-toggle="tab">
<i class="fa fa-minus"></i> Remove User
</a>
</li>
<li role="presentation">
<a href="#eUser" role="tab" data-toggle="tab">
<i class="fa fa-pencil-square-o"></i> Edit User
</a>
</li>
</div>
based on this the only thing i see is that you forgot to close your ul tag at the end.
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.