materialize
materialize copied to clipboard
Dogfalo
Carousel set height to 0 if the image is cached.
Description
Carousel set height to 0 if the image is cached.
Repro Steps
- Create a html in local server
-
image.jpgshould be a local image, or a server support cache.
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="carousel carousel-slider">
<a class="carousel-item"><img src="image.jpg"></a>
<a class="carousel-item"><img src="image.jpg"></a>
<a class="carousel-item"><img src="image.jpg"></a>
<a class="carousel-item"><img src="image.jpg"></a>
</div>
<a class="waves-effect waves-light btn">Force Resize</a>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
<script>
$('.carousel.carousel-slider').carousel({fullWidth: true});
$('.btn').click(function () {
$('.carousel').height(400);
});
</script>
</body>
</html>
- Refresh the page
load event will not be trigger if a image cached, but I apply the fix, it also set the height to zero, refer to jQuery doc, it is bad to get a height of a hidden element.
I think the best way is only use CSS to maintain the layout, hard code $.height() is not a nice way, if only use CSS, it also has better result when resize window.
// Sorry for my bad english
I have tried this fix, but only 20% times work, the issue may be refer jQuery doc Additional Notes, load will trigger every time, but $(this).height() often return 0.
// carousel.js
if (firstImage.length) {
imageHeight = firstImage.on('load', function(){
view.css('height', $(this).height());
});
// Try to fix the height issue
if (firstImage.get(0).complete) {
firstImage.trigger('load');
}
} else {
imageHeight = view.find('.carousel-item').first().height();
view.css('height', imageHeight);
}
Could you guys checkout https://github.com/steelywing/materialize/tree/carousel-css ? that use CSS for layout, but not 100% done, just show it is possible, it is responsive, and auto adjust height.
Hi, I'm experimenting the same problem. You are right it looks like a cache thing since in my local dev is not working but just to change the url of the carousel to the demo url works.
Your css solution looks nice and is almost working for me, I'm not using the perspective effect and dealing with different height images, I need the images to show even if they are different heights, make the content move from image to image, as default carousel works.
Thanks @steelywing
I've managed to make this responsive and get around the height issue by adding height: 450px !important to .carousel-slider and then have used the following jQuery to automatically resize it when the screen width changes.
function carouselHeight() {
$('.carousel.carousel-slider').each(function() {
var newHeight = $(this).find('.carousel-item img').height();
var origStyle = $(this).attr('style');
$(this).attr('style', origStyle+'; height: '+newHeight+'px !important');
});
}
$(window).resize(function(){carouselHeight();});
carouselHeight() can also be called just after initialisation to fix the initial height issue.
First we have a problem in height that does not adjust and is caught. Then we can not put the carousel in the desired width. When resizing the canvas in portrait or landscape on mobile devices, the carousel completely exits the screen configuration. Finally, it is not responsive. Not a desirable plugin. Automatic translator of portuguese
Any progress on this issue? @steelywing Is the CSS fix you implemented merged?
I'm having the same, or almost the same issue. Is there anybody that can help?
@harri00413 This project isn't maintained any more it looks like. It's been abandoned. Head on over to: https://github.com/materializecss/materialize instead.