I have an accordion with links in the header. It is in such a way that the accordion can be opened when clicked anywhere on the header. Because of this when clicked on the link, instead of going to that link (href) the accordion is opened.
Desired behaviour:
I want the accodion to be opened when clicked anywhere in the header except the link. (i.e when clicked on the link, the user must be redirected and accordion must not be opened)
<div>
<accordion close-others="false">
<accordion-group is-open="isopen" ng-repeat="ele in arr">
<accordion-heading>
<div>
<i class="pull-right glyphicon"
ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>
<div style="width: 50%; float: left; padding-left: 6cm;">{{ele.a}}
<span >
link
</span>
</div>
<div style="text-align: center;">
<span>{{ele.b}}</span>
</div>
</div>
</accordion-heading>
</accordion-group>
</accordion>
</div>
Plnkr
You need to call $event.stopPropagation(); in your ng-click -> ng-click="$event.stopPropagation(); fn1();"
The trick is to call Event.stopPropagation() inside ng-click handler of anchor:
link
Here's an updated plunker.
use
ng-click="$event.stopPropagation()"//this will not apply accordion click event on this link tag
instead of
ng-click="fn1()"
This Might not work on plunk try it in your code.
When using accordion-heading, everything in it will be turned into an <a> tag.
Your code will be rendered in brower
<h4 class="panel-title">
<a class="accordion-toggle ng-binding" ng-click="isOpen = !isOpen" accordion-transclude="heading">
<div class="ng-scope">
<i class="pull-right glyphicon glyphicon-chevron-right" ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>
<div style="width: 50%; float: left; padding-left: 6cm;" class="ng-binding">1
<span>
link
</span>
</div>
<div style="text-align: center;">
<span class="ng-binding">2</span>
</div>
</div>
</a>
</h4>
This is solution https://stackoverflow.com/a/14202514/3901308
Related
I have this html
<body aurelia-app="main">
<section class="section is-small">
<nav-bar class="au-target" au-target-id="5">
<div class="container">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item au-target" route-href="route: home" au-target-id="1" href="#/">
<span class="icon is-medium">
<i class="fas fa-lg fa-home" aria-hidden="true"></i>
</span>
</a>
<a role="button" click.delegate="burgerClicked()" aria-label="menu" aria-expanded="false" data-target="myNavBar" class="au-target navbar-burger burger" au-target-id="2">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="myNavBar" class="au-target navbar-menu" au-target-id="3">
<div class="navbar-start">
<div class="navbar-item">
<a route-href="route: games" class="au-target" au-target-id="4" href="#/games">My Games</a>
</div>
</div>
</div>
</nav>
</div>
</nav-bar>
<router-view name="main" class="container au-target" au-target-id="6">
<available-games games.bind="games" class="au-target" au-target-id="11" bindable="games">
<div class="columns">
<ul class="column level">
<li class="level-item">
<game-button game.bind="game" is-available.call="isAvailable( $game )" class="au-target container" au-target-id="9" bindable="game,isAvailable">
<button class="button is-fullwidth is-success au-target" click.delegate="addToMyGames()" disabled.bind="!available" au-target-id="7">
Warhammer 40k
</button>
</game-button>
</li><li class="level-item">
<game-button game.bind="game" is-available.call="isAvailable( $game )" class="au-target container" au-target-id="9" bindable="game,isAvailable">
<button class="button is-fullwidth is-success au-target" click.delegate="addToMyGames()" disabled.bind="!available" au-target-id="7">
Age of Sigmar
</button>
</game-button>
</li><!--anchor-->
</ul>
</div>
</available-games>
</router-view>
</section>
</body>
it looks fine, until I expand it all the way, and then there is no space (height wise) between the full width buttons. I presume, I'm misunderstanding something about how I should be using bulma.
good
bad
note: this is the extent of my scss
#import "~bulma";
#import "~#fortawesome/fontawesome-free/scss/fontawesome.scss";
$fa-font-path: "~#fortawesome/fontawesome-free/webfonts";
#import "~#fortawesome/fontawesome-free/scss/regular.scss";
#import "~#fortawesome/fontawesome-free/scss/solid.scss";
First off, a tip: fix formatting a bit to make it more consistent to readers - more clarity to the HTML hierarchy.
Possible steps:
1) It looks like you might need some padding between each <button> element inside some <style> tags or in your scss file that target the specific class attribute/element you need.
2) I'm confused about your <game-button> element. Is it a custom element you created? If it's not, see the MDN Web Docs for examples of how to create custom HMTL elements if you need it.
3) If <game-button> is not a custom element you created, see Bulma's documentation for buttons because Bulma only requires a <button> element to work (and spacing wouldn't be an issue).
4) Check out this GitHub post regarding spacing between buttons. Although their implementation is different, you may still need to wrap your buttons in a <div class="buttons"></div> element. If there are issues after with inconsistent vertical alignment, I'd suggest using CSS display: flex;, align-items: center, and justify-content: center for centered alignment.
I have a group of accordion cards that collapse on my page, and an example of one is:
<div class="card" style="display:none" >
<div class="card-header" role="tab" id="mainHeading">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#linkTarget" aria-expanded="false" aria-controls="linkTarget">
</a>
</h5>
</div>
<div id="linkTarget" class="collapse" role="tabpanel" aria-labelledby="mainHeading" data-parent="#accordion">
<div class="card-body">
<a id="fileLink" href="https://downloads/testFile.pdf" download="filename">Test File</a>
</div>
</div>
<script type="text/javascript">
if(window.location.href == "/FAQ/fileLink") {
document.getElementById('fileLink').click()
}
</script>
I currently have it hidden because I don't want it showing but I do want to be able to give someone a URL like
www.testSite/FAQ#linkTarget/filename
or something like that so that if I give someone the link and they click it or go to it, it acts exactly the same as if they collapsed it and clicked on the download link.
Is there a way I can do that
Yes, you can test the window href before any javascript code
if(window.location.href == "www.testSite/FAQ#linkTarget/filename") {
document.getElementsByClassName('CLASS').click();
}
Change the url to be the one you wanted, and change "CLASS" as the class of the element you want to click when it's the chosen url
I have the following code:
#foreach(var data in Model.test){
<div style="margin: 3% 0 3% 2%;">
<button type="button"
class="btn btn-warning"
style="display:block; width:40%;overflow-wrap:normal;white-space:normal;padding:.5%;"
data-toggle="collapse" data-target="##data.option">
#data.Name
</button>
<div id="#data.option" class="collapse" style="width:40%;float:right;white-space:normal; overflow:scroll;">
<br />
<div>
<a>
Title: #data.Name<br />
#foreach (var item in data.Documents)
{
<p>Related Document: #item.Name</p>
}
</a>
</div>
</div>
</div>
}
When I tried general example from bootstrap site it works fine.. but when I plug in the values etc I want it fails.. what am I missing? This is in a view of an MVC web app.
I changed the id to be an incremental counter.. so now it works. As pointed out I may have had a duplicate somewhere there.
There were spaces and special chars which was causing this issue. After removing them all it worked.
So I'm making a website (suprise, suprise) and I have a button on the top of the page, and when I click it, it does nothing. I am wondering how to fix it.
The button
<button class="Learn-Link" href="#VideoSlide">Learn How
<div class="Learn-Triangle"></div>
</button>
And the part I want to travel to
<div class="Slide" id="VideoSlide">
<!--More code here, but not relevant-->
</div>
button doesn't have an href attribute you need to add an a tag inside your button
#VideoSlide{
position: relative;
top:1000px;
height: 100px;
background: pink
}
<button class="Learn-Link" >Learn How
<div class="Learn-Triangle"></div>
</button>
<div class="Slide" id="VideoSlide">
<!--More code here, but not relevant-->
</div>
You can trigger button by using javascript
Eg:-
<button type="button" onclick="alert('Hello world!')">Click Me!</button>
Ive got the following for the parent div:
#parent {
overflow: hidden;
}
And the following for the inner div which is a drop down div. When click to show, a part of the drop down which goes below the parent div, is not displayed (only half displayed).
#dropDown {
display: none;
position: absolute;
}
and here is my HTML code:
<div id='parent'>
<ul>
<li id="exportWrapper">
<button onclick="return false" id="triggerDropDown">trigger </button>
<div id="dropDown">
<span class="one"> link one</span><br>
<span class="two"> link two</span>
</div>
</li>
</ul>
</div>
I didn't see anything that called the #dropDown css. I changed the div#exportDivContent to div#dropDown and it hides the two . Is that you are trying to do?
<ul>
<li id="exportWrapper">
<button onclick="return false" id="triggerDropDown">trigger </button>
<div id="dropDown">
<span class="one"> link one</span><br>
<span class="two"> link two</span>
</div>
</li>
</ul>
Well, I think the problem here is you setting overflow: hidden to the parent div. So, at first there is no overflow and the button is displayed properly. Then, when you click on the button, the height of it increases since there is a drop down list and hence, it shows only half of the list.
Try removing overflow: hidden [Edit] : or this:
<button onclick="a_function()" id="triggerDropDown">trigger </button>
<div id="dropDown">
<span class="one"> link one</span><br>
<span class="two"> link two</span>
</div>
<script>
function a_function(){
document.getElementById("parent").style.height = "60px";
}
</script>