Materialize collapsible inside modal doesn't remain open - javascript

I'm facing an issue with my collapsible, that make the collapsible-body to open/close several times very fast when I click on a collapsible-header element.
Here is the modal trigger:
<a class="btn modal-trigger" href="#myModal">Trigger</a>
Here is my modal structure: (note the use of ng-repeat, not sure if it might be linked)
<div id="myModal" class="modal">
<div class="modal-content" >
<ul class="collapsible" data-collapsible='accordion' watch>
<li>
<div class="collapsible-header">FOO</div>
<div class="collapsible-body">foo</div>
</li>
<li>
<div class="collapsible-header">BAR</div>
<div class="collapsible-body">bar</div>
</li>
</ul>
</div>
</div>
The script ending my HTML:
<script>
$(document).ready(function(){
$('.modal-trigger').leanModal({
ready: function(){
$('.collapsible').collapsible()
}
});
});
</script>
I've been browsing around without finding any related issue. Any help will be much appreciated (do not hesitate to ask for clarification).

Thanks Allan for your answer, Although it is not related to the height:
The modal automatically vertical-expands itselfs when item is opening.
Setting a large min-height doesn't solve my issue.

Related

Issue closing menu on scroll with jQuery

I am trying to close the nav dropdown menu on scroll but I don't think I am targeting the class on the button correctly with jQuery as it is not working.
I am trying to target the .nav-menu-list class.
main.js and index.html
$(window).on('scroll', function() {
$('.nav-menu-list').prev().dropdown("toggle");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header" class="navbar-toggleable-md sticky clearfix fixed ">
<header id="topNav">
<div class="container">
<div class="row">
<nav>
<ul class="desktop-nav-links ">
<li class="list-group-item" >
Home
</li>
<li class="list-group-item">
<button class="dropdown-toggle nav-menu-list" type="button" id="" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu " aria-labelledby="content"> Content </div>
</li>
</ul>
At first I tried using $('.dropdown-toggle').prev().dropdown("toggle"); which worked and closed the menu on scroll. The issue this gave me though was that it also targeted all of the dropdown-toggles on the page causing things to break.
Any suggestions will be really appreciated, thank you.
Update
After trying a few different ways of targeting the open dropdown menu to close on scroll, I found the best way for me was to explicitly target the class when the menu dropdown is open using -
$('li.show .nav-menu-list').dropdown("toggle");
So it is going to target the dropdown that is open.
Thank you everyone for helping me with this issue.
To target a class in jQuery, you must specify a class selector:
$('.nav-menu-list').prev().dropdown("toggle");
Note the leading . in front of nav-menu-list, which you were missing.
Thank you everyone for helping me with this issue.
After trying a few different ways of targeting the open dropdown menu to close on scroll, I found the best way for me was to explicitly target the class when the menu dropdown is open with
$('li.show .nav-menu-list').dropdown("toggle");
So it is only going to be on the dropdown that is open.
I will add as an update to my question.
I hope this may also help anyone else with similar issues

Materialize css modal open on page load with fixed nav - not working

I am using Materialize CSS and have several modals on my site. Some of them I want to open on loading a particular new page. Everything was working and then I switched to a fixed nav and all of a sudden the open commands aren't working.
It seems that the function is working but it is not changing the modal to display: block so it acts as if it is open, but nothing is visible and the body overlay has been turned on so that you can not scroll.
I have tried numerous different ways to implement the modal.open(); and from what I can tell it is that something is getting in the way of the function and overriding some of the styles.
I'm at a loss. Any help is appreciated.
<body>
<!-- NAVIGATION --->
<header>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<div class="row">
<div class="col s7 m2 valign-wrapper">
<a class="modal-trigger" href="#login"><img src="/images/Logo.png" alt="" class="loginLogo"></a>
</div>
<div class="col s5 m3 offset-m7 valign-wrapper">
<ul>
<li><button id="successBtn" data-target="signUpSuccess" class="btn btn-signUp btn-success modal-trigger">Sign up</button></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<!-- Modal Structure -->
<div id="signUpSuccess" class="modal">
<div class="modal-content">
<div class="row">
<div class="col s12">
<h4>You're signed up!</h4>
<p>We will notify you soon.</p>
</div>
</div>
</div>
</div>
Javascript:
$(document).ready(function(){
$('.modal').modal();
});
$(document).ready(function(){
$("#signUpSuccess").modal();
$("#signUpSuccess").modal("open");
});
To reiterate - The modals are still working when clicked but the #signUpSuccess modal is not opening on load and it was working prior to changing to navbar-fixed.
Materialize CSS: https://materializecss.com/modals.html
I hope this makes sense.
This can be done with instance.open().
<script>
document.addEventListener('DOMContentLoaded', function () {
var Modalelem = document.querySelector('.modal');
var instance = M.Modal.init(Modalelem);
instance.open();
});
</script>
Check documentation Materialize Modals, there are many options available for animations. You should also try using vanilla JS because jQuery is no longer a dependency.

materialize modal not showing up

I dont understand why modal is not working:
<a class="modal-trigger" href="#modal1"><i class="material-icons icn_profile waves-effect">person</i>
</a>
<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>
I try many solution like put the modal div outside the header section, and vary jquery script like:
$(document).ready(function(){
// the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
$(document).ready(function(){
// the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
$('#modal1').modal('open');
});
and more..
I can not be able to reach the solution here on stack overflow. I have also loaded jquery library before materialize.js at the end of the body section. The js console doesn't show any error.
thanks
There could be an error with the sequence of the scripts that you are bringing to your HTML.
NOTE: Since I don't know the relative paths of your css and js files, I gave them myself. Make sure to give them the correct path. Make sure that they are loaded on correctly to your DOM.
See if the following works for you.
<html>
<head>
<link rel="stylesheet" href="css/materialize.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<a class="modal-trigger" href="#modal1"><i class="material-icons icn_profile waves-effect">person</i></a>
<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>
<script type="text/javascript" src="jquery.js"></script>
<script src="materialize.min.js"></script>
<script>
$(document).ready(function(){
// the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
</script>
</body>
Please follow the order. Jquery must come before materialize.js . Otherwise your code seems to work fine.
If the error persists, please tell me.
Also, I would like to add that the following piece of code:
$(document).ready(function(){
// the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
$('#modal1').modal('open');
});
will open the modal as soon as the page opens. Do you really want that behavior? The code I posted above works fine; when you click on the person icon the modal opens. That's the intended behavior desired usually. But otherwise also, if you want the modal to open as soon as the page loads, that will work fine as well.
Hope this helps. Thanks.
I kept trying until I got it. I don't know if this is what you want, but it works for me:
I have this in the header
declare let $: any;
after
openit(){
$('#modal1').modal('open');
}
and in my html
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" data-target="modal1" (click)="openit()">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal"materialize="modal" >
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a class="modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
Try adding this in your .js file:
//Modal trigger
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
});

My Bootstrap Modal ANCHOR is not working from within a line item of a menu (navbar)

This is my navbar code:
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav" id="menu">
<li>ex</li>
<li>Another Link here</li>
</ul>
</div>
This is my modal code from my "modalexample.html" page
<div class="modal fade text-center" id="theModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button class="close" data-dismiss="modal">X</button>
<h1>Modal Example</h1>
</div>
<div class="modal-body"> Modal Information Here </div>
<div class="modal-footer"> Footer Stuff Here </div>
</div>
</div>
</div>
For some reason unknown to me, I can't get my modal to appear after clicking the link to the page (/modalexample.html#theModal).
Is there a reason why my anchor will not work from within a navbar?
Is there another way that I can write this to make my modal appear?
Notes: In both pages, I have included jquery-2.1.4.min.js and bootstrap.min.js (the jquery script is placed before the bootstrap script).
Also, I have included the link to bootstrap.css stylesheet at the beginning of both pages.
If more of my code is needed, please let me know.
Its not possible to fire an modal in another page via href anchor.
you can put a javascript code in modalexample.html to fire the modal when the page is loaded:
<script type="text/javascript">
$(window).load(function(){
$('#theModal').modal('show');
});
</script>

Bootstrap links in tabs not working

I have tabs set up on my website and they all seem to be working fine except that the links inside the tabs do not work. It works if I right-click and say open in new tab, but otherwise nothing happens. I think the issue is with bootstrap.js and something that I'm doing, but I can't figure out what.
Here is the site: http://www.rightcall.co/features. Look at the links in the last 3 tabs
Here is a simple version of my code:
<div class="tabbable features tabs-left row-fluid">
<ul class="nav nav-tabs span3 uppercase">
<li class="active">Overview</li>
<li>What you get</li>
<li>Our Process</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="l1">
<h3>Overview</h3>
<a href="/anotherpage">
</div>
<div class="tab-pane" id="l2">
<h3>What You Get</h3>
<a href="/anotherpage">
</div>
<div class="tab-pane" id="l3">
<h3>Our Process</h3>
<a href="/anotherpage">
</div>
</div>
</div>
</div>
Thank you in advance for any advice you have. I'm pretty new to Bootstrap, so I'm kinda at a loss.
In your javascript you select all '.tabbable a''s with jquery and prevent the default click action:
$('.tabbable a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
You should make it:
$('.tabbable .nav-tabs a').click( //etc..
This way no other a's are selected by jQuery..
Also I should point out that linking your site in StackOverflow to let people look into your bug/problem is against the rules. Only post the code (HTML/CSS/JS) so that others finding the question can solve their problems with it too.

Categories

Resources