I have some problems integrating my materialize carousel-slider in a modal. I can't find the issue and I cant't find a possible solution through google or the materializecss website. So here is my question:
I created a gallery where you click on a image you open a modal with a integrated fullWidth-slider. Opening the modal works fine but I can't see my images inside the modal at all. Only if i resize the browser the images appears.
I'm working with angular5 and I use materializecss for my page design.
(I know there exits a #angular/material and ng2-materialize npm package that are much more better approach, but I just began developing with angular5 and so I thought learn just one new framework (angular5) and use for all other things the frameworks you already know (materializecss))
First I thought it is a problem with my angular5 app, so I tried to create a modal with a carouse-slider inside in the native way (means without angular5). As you can see in my JSFiddel (https://jsfiddle.net/davetwog/vfkbzu5m/) I face the same problem.
<button data-target="img-modal" class="btn modal-trigger" onClick="$('.carousel').carousel('set', 2);">Modal</button>
<div id="img-modal" class="modal">
<div class="modal-content">
<div class="carousel carousel-slider center">
<a class="carousel-item responsive-img"><img src="http://www.freeimageslive.com/galleries/objects/general/pics/objects00290.jpg"></a>
<a class="carousel-item responsive-img"><img src="http://www.freeimageslive.com/galleries/objects/general/pics/objects00383.jpg"></a>
<a class="carousel-item responsive-img"><img src="http://www.freeimageslive.com/galleries/objects/general/pics/objects00445.jpg"></a>
<a class="carousel-item responsive-img"><img src="http://www.freeimageslive.com/galleries/objects/general/pics/objects00448.jpg"></a>
<a class="carousel-item responsive-img"><img src="http://www.freeimageslive.com/galleries/objects/general/pics/objects00453.jpg"></a>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.modal').modal();
$('.carousel').carousel({
fullWidth: true
});
});
</script>
Anyone has a clue what I'm doing wrong? Or is this a known issue in the materializecss framework?
Updated JSFiddel
The height of the carousel was getting calculated as 0px because the modal was hidden. Thus the carousel had zero height.
I forked your example and updated the JS to use the Materialize init functions. When initializing the modal, I used the onOpenEnd option to specify a function that will initialize the carousel once the modal is opened resulting in a carousel that has height.
$(document).ready(function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems, {
'onOpenEnd': initCarouselModal
});
function initCarouselModal() {
var elems = document.querySelectorAll('.carousel');
var instances = M.Carousel.init(elems, {'fullWidth': true});
instances[0].set(2);
}
});
Hope that is helpful.
Another solution with Jquery 3.3.1 and Materialize 1.0.0 :
$('.modal').modal({
'onOpenEnd': initCarousel
});
function initCarousel() {
$('.carousel').carousel()
}
Related
I use materializecss to create a slider.
However the image is full width, but not full height(its more than full height, so i get scrollbars). What do i need to change to make the slider fill out my screen with no scrollbars? I also use $('.slider').slider({full_width: true});
<div class="navbar-fixed">
<!-- some stuff-->
</div>
<div class="container-fluid">
<div class="carousel carousel-slider center">
<a class="carousel-item"><img class="responsive-img" src="http://lorempixel.com/800/400/food/1"></a>
</div>
</div>
If you just want to hide scrollbars then add
overflow: hidden;
To container which is having the scroll
Are you using the correct JavaScript?
On Materialize's site (I've used Materialize before, and thought something looked off about your code) it has this as the way to initialize a slider as "full_width:"
$('.carousel.carousel-slider').carousel({full_width: true});
In fact, your slider doesn't even have the .slider class; it only has .carousel-slider and .carousel.
I'm thinking if you use the above JavaScript you should be alright.
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();
}
}
I'm using the AdminLTE Skin from https://almsaeedstudio.com/
I want to load the page content dynamically when clicking on the menu on the left side. I made this via jQuery:
<li><i class="fa fa-circle-o"></i>Test</li>
But when in Test.php is a collapsable box like this:
<div class="box box-primary">
<div class="box-header with-border">
<i class="fa fa-medkit"></i>
<h3 class="box-title">Test Box</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
</div>
</div>
<div class="box-body">TestContent</div>
</div>
The box is not collapsable when I click on the button nothing happens.
When I don't load the Content dynamically the button is usable. What is the matter here?
Thanks for your help.
I'm facing the same situation.
When I was looking for a workaround I've managed to discover what seems to be the real problem.
If you take a good look at app.js you'll see that there are many activate methods that scan the page to find out if a component is been used and then transforms or injects the behavior for the component.
That seems to be the case to boxes (Collapsable and closeable ones at least).
If you reload the script ($.getScript(app.js)) the box will work, but unfortunately other components will stop working (sidebar and control-sidebar).
If you want just the boxes to work inside de content-wrapper, one way is to call:
$.AdminLTE.boxWidget.activate();
You can do this on the $(document).ready() function of your content.
I'm still finding a better way to do this, but as far as boxes go, this should do the work.
Regards,
Jonatan Neves
I ran into the same issue, and ended up changing app.js so that the box widget listeners are on the document instead of the actual elements found when activate() is called. This guarantees dynamically added elements will be found:
$.AdminLTE.boxWidget = {
selectors: $.AdminLTE.options.boxWidgetOptions.boxWidgetSelectors,
icons: $.AdminLTE.options.boxWidgetOptions.boxWidgetIcons,
activate: function () {
var _this = this;
//Listen for collapse event triggers
$(document).on('click', _this.selectors.collapse, function (e) {
e.preventDefault();
_this.collapse($(this));
});
//Listen for remove event triggers
$(document).on('click', _this.selectors.remove, function (e) {
e.preventDefault();
_this.remove($(this));
});
},
//...
}
Getting weird problem on mobile (Chrome and Safari).
I have a modal say with id xyzModal with me. I have a link which opens this modal.On desktop link appears on hover only.
So on the mobile to overcome hover effect what I have done is display the link always and oveeride the hover method
$('#link').hover(function(ev){
ev.preventDefault();
$('#xyzModal').modal()
});
Problem with this is modal comes and disappears immediately in fraction of second.
Strange part is its working fine if I do $('#xyzModal').modal() directly on the console. Moreover to the amazement modal working fine on the long press of the link also. Has anybody come across this behaviour.Its working fine in mobile firefox though.Cannot create a fiddle as fiddle will override my current library setup. Just tell me in which direction I need to search. Getting pretty clueless over here.
Thanks for your help in advance.
The easiest way to do this is to use Bootstrap's good ol' query classes (show/hide elements responsively) to swap between two modals in desktop and mobile and placing two buttons under query classes too.
Something like this:
HTML:
<!--BUTTONS-->
<div class="hidden-xs" id="link1">Open Modal</div>
<div class="visible-xs" id="link2">Open Modal</div>
<!--MODALS-->
<div id="xyzModal1" class="hidden-xs">
<!--modal codes here-->
</div>
<div id="xyzModal2" class="visible-xs">
<!--modal codes here-->
</div>
JS:
$('#link1').hover(function(){
// place modal xyzModal1 code here
});
$("#link2").click(function() {
// place modal xyzModal2 code here
});
Is it possible to run a Zurb TwentyTwenty (before and after slider view) plugin inside a Foundation Reveal Modal? I can get the modal to fire and the Header is shown, but not the plugin. The plugin does work on the page in a standard column and I even tried commenting it out to see if that was it. Here is the code I set for the modal:
<!-- Modal Box -->
<div id="myModal2" class="reveal-modal">
<h3><font color="red">See the difference we can make</h3></font></hr>
<div class="twentytwenty-container">
<img src="img/rjh_before.jpg" />
<img src="img/rjh_after.jpg" />
</div>
<a class="close-reveal-modal">×</a>
</div>
<!-- Modal Box end -->
And here is the trigger link:
Modal Version of the 20/20 slider
This is the first project I have done with Foundation and though I am learning fast, this one has me stumped. Any help would be greatly appreciated!
I found the answer myself; it's a bug in Reveal. Found on GitHub here:
Squashed picture when using Orbit in a Reveal - Issue #2809
Added this code before the script for reveal:
var resize_window = function(e) {
$(window).trigger('resize');
}
$(document).foundation('reveal', {'opened' : resize_window});
<!-- Not used in my case, but additionally for running Orbit -->
$(document).foundation('orbit')
Works a treat!