I'm trying to use Boostrap 4 in an Angulat 11 project.
In my asests/styles.scss I've added
#import "~bootstrap/scss/bootstrap.scss";
and in my angular.json I've added
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
Now I'm trying to make a dropdown in the nav bar
<ul *ngIf="isAuthenticated" class="navbar-nav nav nav-pills nav-fill">
<li class="nav-item dropdown" title="Manage system.">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" href='target="_self"'>><i class="fas fa-tools"></i> System</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" routerLink="/system"><i class="fas fa-tools"></i> System summary</a></li>
<li><a class="dropdown-item" routerLink="/system/users"><i class="fas fa-user"></i> Users</a></li>
<li><a class="dropdown-item" routerLink="/system/groups"><i class="fas fa-users"></i> API Groups</a></li>
<li><a class="dropdown-item" routerLink="/system/roles"><i class="fas fa-tasks"></i> API Roles</a></li>
</ul>
However, when I click the nav item the dropdown does not appear and indstead the browser navigates to /. Is it possible to get Boostrap to work with Angular?
I know it's possible to use Boostrap and Angular at the same time. But personnaly, I prefer to use ng-bootstrap which is designed for Angular system.
Ng-bootstrap isn't using the last version of bootstrap but a lot of content is available and it's easier to install.
Related
Short question: I have searched the internet for an answer but I can't seem to find one that fits my situation.
This is where I want to bind some asp-controllers and asp-actions:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="Account" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Inloggen</a>
<a class="dropdown-item" href="#">Kleding bekijken</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Uitloggen</a>
</div>
</li>
The dropdown item "Inloggen" should bind the asp-controller 'Account' and asp-action 'Inloggen'.
The dropdown item "Kleding bekijken" should bind the asp-controller 'Outfit' and asp-action 'OutfitsTonen'.
Looks like yours is the standard situation for Anchor Tag Helpers
<a class="dropdown-item"
asp-controller="Account"
asp-action="Inloggen">
Inloggen
</a>
I have a problem when I use the following code for adding and displaying:
<a href="javascript:void(0)" data-toggle="modal" data-target="#modalYear">
<span class="sub-item">Add year</span>
</a>
<a href="javascript:void(0)" data-toggle="modal" data-target="#ListYear">
<span class="sub-item">Listyear</span>
</a>
Nothing gets blocked but the problem comes when I want to use the edit option the admin menu stops scrolling, this is where the problem starts and also when I use this :
<a href="javascript:void(0)" wire:click="ShowReportModal('add')">
span class="sub-item">Add Year</span>
</a>
the modal will show up but when I close it the admin menu stops scrolling.
After so many tries I figured out that the problem is using wire:click to call the modal for adding, editing and displaying.
this is my component:
public function ShowReportModal($action)
{
if($action == 'add')
{
$this->dispatchBrowserEvent('ModalYearVisible') ;
}
else{
$this->dispatchBrowserEvent('ModalListVisible') ;
}
}
Here is the admin menu code:
<li class="nav-item">
<a data-toggle="collapse" href="#annee">
<i class="far fa-calendar-alt"></i>
<p>Scholar year</p>
<span class="caret"></span>
</a>
<div class="collapse" id="annee">
<ul class="nav nav-collapse">
<li>
<a href="javascript:void(0)" wire:click="ShowReportModal('add')">
<span class="sub-item">Add year</span>
</a>
</a>
</li>
<li>
<a href="javascript:void(0)" wire:click="ShowReportModal('list')">
<span class="sub-item">Years List</span>
</a>
</li>
</ul>
</div>
</li>
Any help would be appreciated and also why is this happening?
I am a beginner at laravel and I have Hidden sidebar menu from users it's successfully working but when logout from admin then I face error how to fix it thanks. please see error https://flareapp.io/share/NPL9bz7w
Html view
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview"
role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<!--Admin sidebar menu -->
#if(Auth::user()->type == "admin")
<li class="nav-item">
<a href="{{url('admin')}}" class="nav-link">
<i class="fas fa-comments"></i>
<p>Users Permission</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('manage_users')}}" class="nav-link">
<i class="fas fa-comments"></i>
<p>Manage Users</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('register')}}" class="nav-link">
<i class="fas fa-comments"></i>
<p> User Register</p>
</a>
</li>
<!-- end Admin sidebar menu -->
<!-- User sidebar menu -->
#else
<li class="nav-item">
<a href="{{url('viewprofile')}}" class="nav-link">
<i class="fas fa-user"> </i>
<p>View Profile</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('DashBoard')}}" class="nav-link">
<i class="fas fa-comments"></i>
<p>Chat Room</p>
</a>
</li>
#endif
</ul>
</nav>
<!-- /.sidebar-menu -->
The problem is, you are checking #if(Auth::user()->type == "admin") for check the logged in admin. If the admin is logged out then there is no Auth::user(). I think this is the problem you are facing. So change the condition like this
#if(Auth::check() && Auth::user()->type == "admin")
// Admin menu bar
#elseif (Auth::check())
// User menu bar
#endif
I think this will solve the issue.
Since the user is logged out, the Auth::user() is null.
Because of which, when you try to get its type, it is throwing
Trying to get property 'type' of non-object
You need to check whether the user is logged in, and then check its type.
#if(Auth::check() && Auth::user()->type == "admin")
Auth::check() will return true if the user is logged in
first check if user logged in then check that if user is admin or not:
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview"
role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<!--Admin sidebar menu -->
#auth
#if(Auth::user()->type == "admin")
<li class="nav-item">
<a href="{{url('admin')}}" class="nav-link">
<i class="fas fa-comments"></i>
<p>Users Permission</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('manage_users')}}" class="nav-link">
<i class="fas fa-comments"></i>
<p>Manage Users</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('register')}}" class="nav-link">
<i class="fas fa-comments"></i>
<p> User Register</p>
</a>
</li>
<!-- end Admin sidebar menu -->
<!-- User sidebar menu -->
#else
<li class="nav-item">
<a href="{{url('viewprofile')}}" class="nav-link">
<i class="fas fa-user"> </i>
<p>View Profile</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('DashBoard')}}" class="nav-link">
<i class="fas fa-comments"></i>
<p>Chat Room</p>
</a>
</li>
#endif
#endauth
</ul>
use isset method
#if(isset(Auth::user()->type) && Auth::user()->type== "admin")
you can also use Auth::check()
#if(Auth::check() && Auth::user()->type== "admin")
I am trying to implement the Bootstrap dropdown for a language selection menu. I thought I followed the format Bootstrap, and other tutorials, laid out but I just end up with a button and series of links next to or underneath the button.
Firstly, I have tried a the Bootstrap 4 documentation. I have tried all similar StackOverflow answers and the tutorials at https://www.w3schools.com/bootstrap4/bootstrap_dropdowns.asp as well as some Youtube videos. For whatever reason(I'm hoping someone can enlighten me) nothing has worked.
Here's a link to my fiddle for reference. https://jsfiddle.net/rescriba/9a7bmdkf/30/
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown button</button>
<div class="dropdown-menu" id="flagDiv" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" title="English" href="#">EN</a>
<a class="dropdown-item" title="Deutsch" href="#">DE</a>
<a class="dropdown-item" title="Française" href="#">FR</a>
<a class="dropdown-item" title="Italiano" href="#">IT</a>
<a class="dropdown-item" title="Español" href="#">ES</a>
<a class="dropdown-item" title="Português" href="#">BR</a>
<a class="dropdown-item" title="русский" href="#">RU</a>
<a class="dropdown-item" title="中国" href="#">SCN</a>
<a class="dropdown-item" title="日本" href="#">JP</a>
<a class="dropdown-item" title="한국의" href="#">KR</a>
</div>
</div>
You aren't including a bootstrap CSS theme in that JSFiddle. Is that your issue?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
Don't use W3 Schools, refer to the official Bootstrap docs. https://getbootstrap.com/docs/4.0/getting-started/download/
I read the question on how to get the dropdown to open on hover which was an excellent fix, however I would like to get the nav li to keep "open" class when going down into "dropdown-menu" ul. Here is a jsfiddle http://jsfiddle.net/someyoungideas/29txm/ for my problem.
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Help</a>
<ul class="dropdown-menu">
<li>New Item</li>
</ul>
</li>
</ul>
</div>
</div>
One way to address your concern is to make use of the twitter-bootstrap-hover-dropdown plugin found on github. The plugin is also one of the answers in the old question: https://stackoverflow.com/a/12851616/538962.
Note the use of data-hover="dropdown" to call the plugin.
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"
data-delay="1000" data-close-others="false">Help</a>
Here is a working sample:
http://jsbin.com/xuwokuva/1