I'm creating a dashboard,and created sidebar menu using bootstrap grid.Now I want when I click any sidebar menu's routerLink. my objective is open that link in next column of the row,as usually happens in dashboards/admin panel.
But here in my case,when I click the link it goes to next page.
<div class="row">
<div class="col-sm-2">
<div class="list-group">
<a routerLink="dashboard" class="list-group-item active"> Dashboard</a>
<div>
<a class = "list-group-item" data-toggle="collapse"
href="#collapse1">Accessories</a>
<div id="collapse1" class="panel-collapse collapse bgColor">
<div class="list-group">
<a routerLink ="add-new" class="list-group-item">Add new Accessory</a>
<a routerLink ="view-accessories" class="list-group-item">View Accessories</a>
</div>
</div>
</div>
</div>
</div>
<div class="col">
</div>
</div>
I expect the output that link should be open in next column of row.
but here in my case it goes to next page. how to resove this.[enter image description here][1]
[1]: https://i.stack.imgur.com/DVyLQ.jpg
That it usually achieved by having a layout where constant elements (like dashboard) are outside the router outlet. Say, in your AppComponent:
<app-navbar></app-navbar>
<app-vertical-nav></app-vertical-nav>
<router-outlet></router-outlet>
<app-footer></app-footer>
Related
I have a pure CSS accordion, it works great, but an issue is handling click shifting the screen up to the anchor tag;
<div class="collapse-content">
<div class="collapse" id="instagram">
<a class="instagram" href="#instagram" onClick="return false;"><i class="fab fa-instagram"></i>Insta</a>
<div class="content">
<div class="inner-content">
Insta content
</div>
</div>
</div>
<div class="collapse" id="twitter">
<a class="twitter" href="#twitter"><i class="fab fa-twitter"></i>Twitter</a>
<div class="content">
<div class="inner-content">
Twitter content
</div>
</div>
</div>
<div class="collapse" id="dribbble">
<a class="dribbble" href="#dribbble"><i class="fab fa-dribbble"></i>Dribble</a>
<div class="content">
<div class="inner-content">
Dribble content
</div>
</div>
</div>
</div>
How can I suppress the browser scrolling the anchor to the top of the screen? I've tried adding a ? ! and 0 to the end of the anchor, but that breaks the link from working and as you can see above I've tried onClick="return false;" which stops the click. I'm guessing what I need is some sort of offset, as I don't want to suppress the click event just the scrolling too.
# the moment I'm avoiding using Jquery, ideally no JS but trying to keep it as simple as possible.
If these aren't links, then you shouldn't be using <a> tags. Links can:
link to another document
link to another part of the same document
In this case, clicking triggers an action, you should use a <button type="button"> tag.
I as trying to make a pointing drop down, and it is as Semantic UI's documentation says it should be, but it didn't open to the side when I click,I might be missing something, can you guys help me?
<pre>
<div class="ui vertical menu">
<div class="header item">
Exemplos
</div>
<div class="ui left pointing dropdown link item">
<i class="dropdown icon"></i>
Imagem
<div class="menu">
<div class="item" routerLink="images"
RouterLinkActive="active">Reconhecimento de Objetos</div>
<div class="item">Reconhecimento Facial</div>
</div>
</div>
</div>
</pre>
The Semantic UI dropdown module requires some JavaScript for it to work properly. To just get the menu to show, you can use angular to perform the necessary Javascript work.
<div class="ui vertical menu">
<div class="header item">
Exemplos
</div>
<div class="ui left pointing dropdown link item" ngClass="{'visible': showMenu, 'active': showMenu}">
<i class="dropdown icon" (click)="showMenu = !showMenu"></i>
Imagem
<div class="menu" ngClass="{'visible': showMenu, 'hidden': !showMenu}">
<div class="item" routerLink="images"
RouterLinkActive="active">Reconhecimento de Objetos</div>
<div class="item">Reconhecimento Facial</div>
</div>
</div>
</div>
This won't apply the classes with the proper timing though to do the animations that Semantic UI provides as well. To do that you will have to load the requisite js libraries(jQuery and semantics js files) and get them to play nicely with Typescript.
Here's a fiddle of the functionality that I'd like:
https://jsfiddle.net/jo6cfr7b/2/
I have three accordion panels. Two of them contain a submenu, one of them contains nothing but instead links elsewhere on click (using href).
When I try and link through href on my first accordion group, I lose the ability to collapse all panels on click. It just doesn't work anymore.
<div>
<div id="accordion"> <!-- accordion 1 -->
<div class="panel">
<a data-toggle="collapse" data-parent="#accordion" href="#accordionOne">
Need this to link outside
</a>
<div id="accordionOne">
</div>
</div>
<div class="panel"> <!-- accordion 2 -->
<a data-toggle="collapse" data-parent="#accordion" href="#accordionTwo">
Collapsible Accordion 2
</a>
<div id="accordionTwo" class="collapse">
<div class="panel-body">
Change does not roll in on the wheels of inevitability,
but comes through continuous struggle.
And so we must straighten our backs and work for
our freedom. A man can't ride you unless your back is bent.
</div>
</div>
</div>
<div class="panel"> <!-- accordion 3 -->
<a data-toggle="collapse" data-parent="#accordion" href="#accordionThree">
Collapsible Accordion 3
</a>
<div id="accordionThree" class="collapse">
<!-- panel body -->
<div class="panel-body">
You must take personal responsibility.
You cannot change the circumstances,
the seasons, or the wind, but you can change yourself.
That is something you have charge of.
</div>
</div>
</div>
</div>
TLDR; How can I maintain the collapse functionality when clicking any of the accordion group anchors, while being able to link externally on the first accordion panel?
You can use both data-target and href...
Just use data-target="" for the collapsing behavior, and href=".." for the external on the first collapse link.
<a data-toggle="collapse" data-parent="#accordion" data-target="#accordionOne" href="/">
Need this to link to another page (but collapse any currently open submenus)
</a>
Codeply Demo
I have the simple example with Bootstrap and toggling divs by click. Here is markup:
<div class="accordion-heading">
<a class="accordion-toggle"
data-toggle="collapse"
data-parent="#accordion2"
href="#collapseOne">Open!</a>
</div>
<div id="collapseOne" class="accordion-body">
<div class="span6">
<div class="well well-small">
<div class="accordion-toggle">
...some text...
</div>
</div>
</div>
<div class="span2"></div>
</div>
When user clixks link with title 'Open!' underlying div expands or collapses. Div is expanded initially and when user clicks first time it has no effect. Then if user clicks second time, div collapses.
In the original example div is collapsed initially but I would like it to be opened. How could I fix the problem?
Just add class 'collaspe in' to class="accordion-body".
Check example code at CODEPEN
HTML:
<div class="accordion-heading">
<a class="accordion-toggle"
data-toggle="collapse"
data-parent="#accordion2"
href="#collapseOne">Open!</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="span6">
<div class="well well-small">
<div class="accordion-toggle">
...some text...
</div>
</div>
</div>
<div class="span2"></div>
</div>
I hope this will fix your issue.
Enjoy :)
I had this problem, and in my case I had foolishly inserted two "class" attributes in the div I wanted to collapse like so:
<div class="something" id="mydiv" class="collapse in"> <div>
The browser seems to eliminate the second class attribute instead of merging them.
My problem was fixed by "merging" together the two class attributes:
<div id="mydiv" class="something collapse in"> <div>
<a class="btn btn-primary" data-toggle="collapse" href="#collapsePanel" role="button" aria-expanded="false" aria-controls="collapsePanel">Collapse</a>
<div id="collapsePanel" class="collapse show"><!-- Content Here --></div>
This will make it collapsible, but show the panel by default. When you click the Collapse button, it will collapse the panel on the first click.
I'm only adding this here for if anyone is looking to do it either way. I found this link when searching for its inverse. Hope it helps!
You should only call bootstrap.min.js one. Make sure that you're calling bootstrap files only once in the <head> section.
If you're using Bootstrap with Laravel or any kind of framework, keep in mind that npm run dev compiles bootstrap js files in app.js. That could be the case.
<div id="collapseOne" class="accordion-body collapse">
This will also make it close by default and open when clicked
I had this problem too. Set id and data-bs-parent
Basically Currently I have html code which builds a layout of panels and I want to basically expand and collapse these panels , for some reason when i load the assets and run my app , the panels appear collapsed but does not expand when i click the panel title the code is below , i am using angular js with html5 . if someone can help quick i would appreciate that.
<div class="row clearfix" >
<div ng-repeat="i in ctrl.coreControlpanelItems" class="col-md-12 column" >
<div ng-class="{'panel-primary': hover}" ng-mouseenter="hover = true" ng-mouseleave="hover = false" class="panel panel-default animated fadeInUp">
<div class="panel-heading">
<i class="pull-left {{i.icon}}"/>
<h5 class="panel-title">
<a href="#" ng-model="collapsed" ng-click="collapsed=!collapsed">
<a ui-sref="{{i.ref}}">{{i.group}}</a>
</a>
</h5>
</div>
<div ng-show="collapsed">
<div class="panel-body ">
<ul>
<li ng-repeat="s in i.items"><a ui-sref="{{s.ref}}">{{s.name}}<a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
First of all, you have nested a tags in your panel-title element. That's a no-no.
Second, you're can't put ng-model on an a tag.
Third, your panel-title is supposed to expand something but you also have a link inside of it which if clicked on would negate what you're trying to do with the expanding...