I am using a Bootstrap dropdown menu. The problem is that it never drops down upon the first click; I need to click 2 times for it to be toggled. I guess the click event is somehow getting stuck somewhere before propagating down...
Is there any way to fix that?
If someone is using angular with ui-bootstrap module along with normal bootstrap HTML dropdown definition, there are also two clicks needed.
<li class="dropdown">
Dropdown
[...]
</li>
=> Removing the data-toggle="dropdown" will fix the issue.
Opening the dropdown with one click will work after this.
Reference:
https://github.com/angular-ui/bootstrap/issues/2294
In Bootstrap 4, bootstrap.min.js and bootstrap.bundle.min.js now conflict in dropdown.
By removing bootstrap.min.js, the dropdown double click issue will resolved.
This may happen if somehow Bootstrap is included twice in your project.
If bootstrap.min.js and bootstrap.bundle.min.js(bootstrap and popper js) both included in project, it means redundant bootstrap js.
The js combination should be like this:
Either : bootstrap.bundle.min.js only
Or : bootstrap.min.js AND popper.min.js
For detailed information, visit https://getbootstrap.com/docs/4.1/getting-started/contents/
In BootStrap 4, One should not include both "bootstrap.bundle.min.js" and "bootstrap.min.js". This will cause the DropDown issue. Only Keep "bootstrap.bundle.min.js" as it will have all required code.
This happens because the Twitter Bootstrap syntax for their drop downs include a href tag. You will need to preventDefault and stopPropagation to prevent this from happening. Something like this will do the trick:
$('.dropdown-toggle').click(function(e) {
e.preventDefault();
e.stopPropagation();
return false;
});
Like #rajaneesh-singh told us above, this bug occurs when Bootstrap is included twice.
In my case, I had a duplicate with the offical bootstrap and with the twitter version:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.js"></script>
I just removed the twitter version and everything is working well now.
I had the same issue as jaybro in https://stackoverflow.com/a/27278529/1673289, however their solution didn't help.
The way to fix for both cases was to add:
data-disabled="true"
onto the element which has the data-toggle="dropdown" attribute.
I solved the issue by removing link to bootstrap.bundle.js and adding a link to popper.js
Before
<script src="bootstrap/jquery/jquery.js"></script>
<script src="bootstrap/js/bootstrap.bundle.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
After
<script src="bootstrap/jquery/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
Note that I downloaded the bootstrap files and stored them in a directory called 'bootstrap'. Inside it I had three different directories 'css', 'js', 'jquery'.
if use bootstrap4, remove bootstrap.bundle.min.js.
I had the same problem and it was fixed
In my case, the other answers don't work.
In application.js, I had:
//= require popper.min
//= require bootstrap-sprockets
Removing bootstrap-sprockets fixed the problem.
This may also happen if you have more than one bootstrap.js files! Check if you still have an older version and remove that script.
By looking within the source code of angular.ui.bootstrap and the native bootstrap.js they have both handlers for dropdowns.
Proposed Solution:
adjust angular.ui.bootstrap dropdownToggle directive restrict only to "A" attributes.
so by resolving this issue you need to modify dropdownToggle restrict "CA" into "A" this will hide Class looker from angular.ui.bootstrap which has been already handled by bootstrap.js
for the minified version of angular.ui.bootstrap look for this line
directive("dropdownToggle",function(){return{restrict:"CA",require:"?^dropdown",link:function(a,b,c,d){
replace "CA" with "A".
Cheers
I came across the same issue recently, i solved it by writing custom script:
<div class="filter-dropdown text-right">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Edit</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
$(".filter-dropdown").on("click", ".dropdown-toggle", function(e) {
e.preventDefault();
$(this).parent().addClass("show");
$(this).attr("aria-expanded", "true");
$(this).next().addClass("show");
});
I found that on some pages I would have to double click and other pages were single click.
Removing data-toggle="dropdown" made the double clicks into single and broke the singles.
I compared the html in the dev tool (because the same html is being served) and found on my double click pages the div with data-toggle looked like this:
<div id="notifications" data-toggle="dropdown" class="dropdown-toggle"
aria-haspopup="true" aria-expanded="false">
But the single click html looks like this:
<div id="notifications" data-toggle="dropdown" class="dropdown-toggle">
So, in the document ready, I used attr detection and the prevent default answer and it made my double click opens into single click opens:
if (!($('#notifications').attr('aria-haspopup') == undefined &&
$('#notifications').attr('aria-expanded') == undefined))
{
$('.dropdown-toggle').click(function (e) { return false; });
}
Related
I know it has been explained in many places here but I can't get it to work.
It concerns: how to use JavaScript which is in - under wwwroot created - folder in a *.js file.
What I am using:
Blazor Server App empty (VS2022, C#).
I only need/use Server App in VS2022 C# and empty - without any predefined navbars and other elements. So there are no any *.cshtml files except one which is automatically created while creating a "Blazor Server App Empty" in VS 2022 and that is "_Host.cshtml"
And I don't want to use any other template in VS 2022, only this one mentioned.
So, after creating a "page" using this in VS integrated template, I added following in MainLayout.razor (I am using *razor and only razor - no any cshtml):
// this was originally created as in the template in VS2022
#inherits LayoutComponentBase
//this one also:
<main> #Body </main>
// That is what I added here in MainLayout.razor, it's from this site: [http://jsfiddle.net/Ag47D/3/](https://www.stackoverflow.com/)
<div class="navbar">
<div class="navbar-fixed-top">
<div class="container" style="width: auto;">
<div class="nav-collapse" id="nav-collapse">
<ul class="nav" id="nav">
<li id="home">Home</li>
<li id="skill">Skill</li>
<li id="research">Research</li>
<li id="link">Link</li>
</ul>
</div>
</div>
</div>
</div>
And then I added the css part to the existing "site.css" in that simply VS 2022 project:
`.navbar #nav > .active > a {
color: red;
}`
And finally - and that is the big issue for me to understand WHRE/HOW to handle that . a simply JavaScript part (you can find that on the same site mentioned):
` $(function() {
$('#nav li a').click(function() {
$('#nav li').removeClass();
$($(this).attr('href')).addClass('active');
});
});`
I added that to a created folder in wwwroot, the flder is called: "js" and the file inside that folder is called: "setactivetab.js". In that file is the mentioned part of javascript.
In "_Host.cshtml" I added then that, here the part of that _Host.cshtml where you can see what I added:
`....
....
Reload
<a class="dismiss">🗙</a>
</div>
<script src="~js/setactivetab.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>`
So I tried with:
<script src="~js/setactivetab.js"></script>
and:
<script src="js/setactivetab.js"></script>
and:
<script src="~/js/setactivetab.js"></script>
But nothing worked. I mean: TABS are shown on the page - no question about that - but if I click on one of that TABs - nothing happens, the color isn't changed.
Somehow I am not able to understand how to use a self created/from google downloaded, JavaScript for simply changing of the color or to set a selected TAB as active/current or however we can use that.
I tried so many examples described on the web. I can't get that working - maybe I am missing/not understood some fundamental knowledge of using a JavaScript. I simply don't know the way how one can use that.
Can you please post me here a working example of a navigation TABS, ideally self created and simply? Important is: WHERE to put a javascript and how to access that properly so the clicking on a TAB wil lchange his color and stay so until I click on another TAB in a simply - if possible: horizontal, not vertical, navigation bar.
I have enough from searching/reading of many web sites descriptions as there works all and if I copy&paste some simply example, it doesn't work.
I'm using Angular2 with materializecss.
At the moment I'm trying to create modal dialogs which open on button click. There is also an example in the docs https://www.npmjs.com/package/angular2-materialize.
I also use a materilize-select which works perfectly fine, so I guess the installation, imports etc. are correct.
The problem is, when I click the modal-trigger the router resolves the new Route "localhost:4200/#modal1" and I'm redirected to my startpage.
I also tried to replace href with data-target="modal1" but that didn't work either.
Can I somehow disable the Hash-Links for the Router? My other routes are without hashes.
Heres the example from npm docs. I copied this part 1:1.
<!-- Modal Trigger -->
<a materialize="leanModal" [materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
Any help/hints are appreciated!
Edit: I changed the anchor to call a function on click
<a materialize="leanModal" [materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger" (click)="openModal()>Modal</a>
which triggers
$('#modal1').openModal()
But now I get an error:
j.velocity is not a function
Edit 2:
Got it to open the modals by using jQuery instead of $. I still get the error and the Application is stuck after opening the modal.
I found a solution. Was quite frustrating to get there but here it is:
I reinstalled everything that was related to materialize + angular-cli, being angular2-materialize, materialize-css, jquery and hammerjs (which does not need to be installed manually).
Then I followed the instruction from npmjs and removed the part which imports material-css in app.module.ts.
import "materialize-css";
And after that everything works just fine. No need to alter the webpack settings in angular2-materialize package or anything like that. My versions are:
angular-cli 1.0.0-beta.16
angular2-materialize 5.2.1
materialize-css 0.97.7
jquery 2.2.4
I hope that I can save other people some frustrating hours I had with that.
I might be late for this, but you put those two attributes in modal trigger <a> rather than the modal <div> itself.
I also did exactly same mistake as OP, but after reading the angular2-materialize page carefully, I corrected my code as mentioned below.
Instead of this
<!-- Modal Trigger -->
<a materialize="leanModal" [materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
You have to put like:
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal" materialize="leanModal" [materializeParams]="[{dismissible: false}]">
...
</div>
Three points to note here:
there are no special attributes in <a> i.e. the trigger
in place of materialize="leanModal", it is materialize="modal" in modal
didn't need to remove import "materialize-css"; in my case
You can try to use open\close programmatically by:
handle (click)="openModal()" on the href
$('#modal1').openModal(); inside the openModal() function
remove the href="#modal1"
having a closeModal() function with $('#modal1').closeModal();
see http://materializecss.com/modals.html when the doc says:
You can also open modals programatically, the below code will make your modal open on document ready:
Face same problem and above solutions not help me on this, so write a new answer
Just add $('.modal').modal(); in your components constructor.
import ... './stuff'
declare var $: any
#Component{...}
export class EditBlogComponent ...{
constructor(){
//Initialize modal here solve my
$('.modal').modal();
}
}
Having trouble with bootstraps collapse. I have 2 menu items, with a dropdown collapse. I'm trying to alternate/switch them so I DONT get to see both at the same time. I've tried using 'toggle:false' but that does't seem to be working with bootstrap.
Please see the codepen for a working demonstration. Currently am using data- tags to create the functionality.
I'm wondering whether the DOM treats the collapse functionality as 2 separate things and therefore doesn't correlate them together.
So I have
<div class="search-bar>...</div>
<div class="collapse" id="collapseExample">...</div>
<div class="collapse" id="collapseFilter">...</div>
Inside the search bar I have 2 anchor elements which trigger the collapse. And then a non-related drop-down.
<a id="search-button" data-toggle="collapse" href="#collapseExample">
<span class="icon-search"></span>Search
</a> <!--Simplified -->
So I'm not sure why BOTH dropdown collapse elements come down. I want it to work just like the accordion style
Thanks in advance.
You can force hiding other menu like this:
$("#search-button").click(function() {
$('#collapseFilter').collapse('hide');
});
$("#filter-button").click(function() {
$('#collapseExample').collapse('hide');
});
See JsFiddle of your demonstration. I hope it helps, Thanks
So I have a two elements that are rendered inside an ng-repeat, when I click a button that does a toggle, for a brief second both elements get shown.
I have tried various things, ngIf, ngShow, ngSwitch and ngCloak and nothing seems to work.
Here is a code sample:
<div data-ng-repeat="item in view.myModel.items">
<div class="row">
<a ng-hide="item.link" class="btn ng-cloak"
ng-click="view.getLink($index)">Get Link</a>
<a ng-show="item.link" class="btn ng-cloak"
data-ng-href="{{item.link}}" download>Download</a>
</div>
</div>
So here is the problem, on load I only see the 'Get Link' button which is fine.
As soon as I click it, it makes a http call and sets the 'items.link' value, which is where the problem happens. At that moment both buttons are shown together.
Then correctly just the download button shows.
Here is the http call if your interested:
/**
* Get a link
*/
function getLink(idx) {
Linker
.getLink(idx)
.then(onGotLink);
function onGotLink(link) {
myModel.items[idx].link = link.url;
}
}
Any ideas?
So credit to user1620220 who pointed it out. The issue is ng-animate is running that is causing the ng-hide-animate to trigger causing that slight flicker.
You can turn off ng-animate, or use CSS to turn of 'transition' if you only want to partially disable it is.
I have:
<div data-role="page" class="type-interior">
<div data-role="content" class="ui-body">
<a href="#transitionExample" data-role="button" data-rel="popup">
Pop Up
</a>
<div data-role="popup" id="transitionExample">This is a POP UP.</div>
<a href=# onClick="$('transitionExample').popup('open')"
data-rel="popup">OpenPopUp</a>
</div>
</div>
If I click on Button It Works, but if I use Javascript method .popup('open'), nothing happens. Popup is not showed.
What is happening?
I use, JqueryMobile 1.2.0 and JQuery 1.8.2.
$('transitionExample').popup('open')
should be
$('#transitionExample').popup('open')
for more info see: http://api.jquery.com/id-selector/
then you better bind your link in the .ready(), you should try to avoid Javascript code in the DOM for better maintainability.
OpenPopUp
and between your <script></script> tags
$(function () {
$("#myButton").click(function () {
$('#transitionExample').popup('open');
});
});
I ran into this thread whilst trying to find the reason for precisely the same behavior - clicking on a data-rel='popup' link was working but the popup() method was not showing anything. After much frustration I eventually discovered that the issue was down to the fact that I had coded
$('#popupid').popup(open)
NO QUOTES! No one complained - Chrome did not throw up an error but the popup call did nothing.
Hopefully, this will help someone else one day.