My page is scrolling every time I update part of my model that is bound to my view. I think when the view updates, the page scrolls. How do I eliminate this behavior?
Here is an example of a drop down. Every time an item on the dropdown is selected, I update the model. Then, the page scrolls:
<div class="header_item btn-group" dropdown is-open="dd8.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
<span>{{a.Summaries[a.summaryIdShown].AgeSpecified}}</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu accordion_item" role="menu">
<li>Adult</li>
<li>Pediatric</li>
<li>Both</li>
</ul>
</div>
Thanks in advance.
This is what makes the page scrolling: href="#" . The pawn symbol in href attribute means: scroll to the top. To fix that, just set to href="javascript:void(0)".
In Angular, href="#" does not prevent the default click action because is a directive which is what is causing the reload for you <a href=''..> should solve your problem. The docs for the anchor tag directive can be found here
Related
I have the following code where I use an Anchor tag instead of a button in my Bootstrap dropdown. The problem is that, despite what is said here, when I click on the Anchor tag (labeled Action) the browser opens the Anchor tag instead of just opening the menu. In other words, the default behavior of the Anchor tag is not prevented.
We use Bootstrap v3 and this does not happen in all the environments, only in prod for now and sometimes on my local machines. This happens accross all the known browsers i.e. Chrome, IE, FF for the desktop version, the non-desktop version does not have this functionality, so we did not test it there.
<div class="dropdown btn-group">
<a class="btn dropdown-toggle" role="button" data-toggle="dropdown" href="#">
Action <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Foo</li>
<li>Bar</li>
</ul>
Finally we used the following line of code to cancel out the default behaviour, but we never figured out the root cause of this happening only in one environment not in others:
$(".btn .dropdown-toggle").click(function(event){ event.preventDefault();})
Why do you need href="#"?
Use href="" instead of href="#".
Try removing from the code
role="button"
why is it an anchor?
you've missed out the data-target attribute as shown in the bootstrap documentation
https://getbootstrap.com/docs/3.3/javascript/#dropdowns
I have the following CSS code that when the .dashboard-actions class is clicked opens up a dropdown menu. Once clicked the 2nd div in the tree .dropdown changes to class="dropdown open" (indicates the dropdown menu is open/visible), once the user clicks off the open class is removed and the dropdown menu disappears (as expected).
I want to be able using some form of javascript (AngularJS 1.3 or jQuery) be able to do some logic to recognise when the dropdown is 'open' - if so, if a user clicks anywhere else on the screen, for instance the href below the div it will open 'close' the dropdown by removing the 'open' class rather than doing that default action, how could I best approach this?
<div class="dashboard-actions ellipsis">
<div class="dropdown" stop-event>
<div class="dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="material-icons">more_vert</span>
</div>
<ul class="dropdown-menu" aria-labelledby="dropdown1">
<div>
<div ng-include src="'templates/menu.html'" ng-repeat="x in item.x"></div>
</div>
</ul>
</div>
</div>
<div class="interaction-body">
<a href="https://somecdn.com/t51.2885-15/aaa.jpg" ng-href="https://somecdn.com/t51.2885-15/aaa.jpg" target="_blank" stop-event="">
<img ng-src="https://somecdn.com/t51.2885-15/aaa.jpg" src="https://somecdn.com/t51.2885-15/aaa.jpg"></a>
</div>
Hope you are searching for this
//Some code
$('.dropdown-menu').each({
if($(this).hasClass('open')){
// Do something
// $(this).removeClass('open');
}
});
//More code
I am handling user management module where particular parts of web page have permissions to assigned users. So, I have to check if the logged in user has access to div or not based on the div id.
<div class="col-md-4">
<h4> I want to: </h4>
<a class="btn btn-large btn-primary dropdown-toggle"
href="#"
id="dropdownMenuLink"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Select the action and get information
</a>
</div>
As i have several divs on each page , it is not viable to query for the element and then set the display style using jquery.
So, my requirement is to call a java script function which returns a Boolean value based on which a div can be displayed or not displayed. How can I achieve this?
<div class="dropdown" style="position:fixed">
<span class="icon dropdown-toggle" data-toggle="dropdown"></span>
</div>
<ul class="dropdown-menu" style="position:abosolute">
<li id="1"></li>
<li id="2"></li>
</ul>
I need to do something like this. That is icon in one div(fixed) and ul outside the div(absolute position) to make scrollable in page ? If I give within the same div both taking fixed position and dropdown becomes un-scrollable This is not working. How can I achieve this ?
I think the only way to get this working is by creating a Button linked with your Dropdown menu. Almost like in this Bootstrap Example.
I have a twitter bootsrap dropdown ,
<button class="dropdown-toggle" data-toggle="dropdown" >
<span>Select</span>
<span class="pull-right" ng-click="showpopup();">Show popup</span>
</button>
<ul class="dropdown-menu">
...drop down.....
My issue is that clicking on showpopup function also dropdown will dsiplay .( i know it is because of part of drop down).I cannot move showpopup span outside of dropdown.
Clicking on showpopup function should not open drop-down.
Is there any way to achieve this .
Please suggest
You can try to stop propagation after your ng-click function being executed.
Like this:
<span class="pull-right" ng-click="showpopup(); $event.stopPropagation();">Show popup</span>
This prevents the event from being propagated to the outer DOM elements.