Check out my new app made with Materialize CSS---> https://smartlist.ga/
Check out the dashboard -->
1 reply
I mean lorempixel is down
and images are not loading
Try this:
<!DOCTYPE html>
<html>
<head>
<title>Loader Modal</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<style>
.modal_bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
opacity:0;
transform: scale(2);
transition: all .2s;
}
.modal_content {
position: fixed;
top: 50%;
transition: all .2s;
left: 50%;
width: 80px;
height: 80px;
background: white;
border-radius: 2px;
padding: 15px;
transform: translate(-50%, -50%)
}
</style>
</head>
<body onload='load()'>
<div class="modal_bg" id="modal">
<div class="modal_content">
<div class="preloader-wrapper active">
<div class="spinner-layer spinner-red-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>
<div class="container"><br>
<img src="https://dynamic-media-cdn.tripadvisor.com/media/photo-o/15/33/f9/c0/big-sur.jpg?w=1100&h=600&s=1" width="100%">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
// The setTimeout is used for demo purposes only. Please remove this, as it will slow your page down!
function load() {
var e = document.getElementById("modal");
e.style.transform = 'scale(1)';
e.style.opacity = '1';
setTimeout(function(){
e.style.transform = 'scale(2)';
e.style.opacity = '0';
setTimeout(function(){
e.style.display = 'none';
}, 0200);
}, 3000);
}
</script>
</body>
</html>Remove the setTimeout function (ONLY the one here:
}, 3000);
Hi,
Does anyone know of a way to make the datepicker (https://materializecss.com/pickers.html) inline, so it shows on a page without having to trigger it to open?
Similar to this - https://jqueryui.com/datepicker/#inline
<a class='dropdown-trigger btn' data-target='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider" tabindex="-1"></li>
<li><a href="#!">three</a></li>
<li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
<li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
</ul>
HI, some how my drop down doesn't work!
I've already included the js trigger at the top
<!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
<li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
<li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
</ul>
Hey! How would I go about hiding a materialize element and making sure that it doesn't take any space? Usually I'd do
style.display = 'none'; but that doesn't seem to work for materialize buttons
I can do this with a normal HTML element but it doesn't work for materialize: https://stackoverflow.com/questions/2928688/how-to-hide-elements-without-having-them-take-space-on-the-page
And it seems adding the
.hide class doesn't prevent it from taking up space either
Guys, I've been working on React and built a Instagram clone. Checkout the demo here - https://instagram-clone-a159b.web.app/
If you have any suggestions or you liked it or want to contribute then checkout the GitHub repo here - https://github.com/gauravgupta98/instagram-clone
Don't be lazy to give a star on the repo ;)
If you have any suggestions or you liked it or want to contribute then checkout the GitHub repo here - https://github.com/gauravgupta98/instagram-clone
Don't be lazy to give a star on the repo ;)
Figured it out! As I suspected, the column was taking up space. I just needed to deal with that. Thank you! @doughballs
hey all, hoping someone can come up with an inspiring idea. Got a set of tabs appearing on the home page. Works fine on a monitor or decent size device but as you can see in the image posted .... the truncation of the tab titles isn't a good look. I almost think it would be better to hide the tab headers and then display each tab one underneath each other on a mobile device. Anyone got any idea on how I might be able to disable the materialize tabs if on a mobile device? Or should I just use custom CSS to hide the tab headers and manipulate the display of the tab content? Appreciate anyone's thoughts on this.
@Dogfalo pls help me about multiple date picker
Hi Folks ! i'm kind of new using materializecss and i have an issue that i cannot understand, when i deploy the app in Google Application Engine, it looks bigger than if i run the same code locally in my pc. Does anyone have any idea to point me in the right direction to find out why is it happening ? Thanks in advance !
Hello there ! I've put up a website to compile a starting theme, just wanted to share in case someone finds it useful. Glad to see the project is still active !
Materialize Online
Materialize Online
I need help as I'm new to materialize, I've got a website build with materialize but how do I edit the site. as the person who build it is unavailable
please i am finding it difficult to reduce the size of icon i used from Materialize, is it possible? if yes, how can i go about reducing it? i am a beginner. thanks
3 utility classes that can be added to the icon
Hey all,
I am facing an issue with Collapsibles in Materialize, I use the proper initialization method found in the Docs, but the Collapsibles are still opening without the Accordion behavior, even when I explicitly pass an Options object with accordion key set to true, and according to what I read in the Docs it should have the Accordion behavior by default without me passing it through an Options object, so can anyone help with that? (I also used both Vanilla and JQuery to initialize the Collapsibles)
I am facing an issue with Collapsibles in Materialize, I use the proper initialization method found in the Docs, but the Collapsibles are still opening without the Accordion behavior, even when I explicitly pass an Options object with accordion key set to true, and according to what I read in the Docs it should have the Accordion behavior by default without me passing it through an Options object, so can anyone help with that? (I also used both Vanilla and JQuery to initialize the Collapsibles)