Materialize questions - Post ID 287020

User 2073960 Photo


Registered User
28 posts

I'm experimenting with the Materialize framework/theme and have a few questions..

If I create an image carousel it works fine but if I add the class carousel-slider to make it into a full width slider nothing changes when I preview.

I'm looking at the docs at https://materializecss.com/carousel.html

Also I tried to add tooltips as per https://materializecss.com/tooltips.html but couldn't get it to work either. In SD3 it has class called material-tooltip but in the docs it has a class called tooltipped. So not sure.

I'm not sure if I'm looking at the wrong docs, have bad understanding or if this stuff is not fully implemented yet.

User 122279 Photo


Senior Advisor
14,461 posts
Online Now

I'm not too much into Materialize yet, but my first 'excercise' with it was building a medium carousel. You can see it in my sharing folder (see URL in my signature), click on Galleries, and find the 'Roundabout'. I was using the code from materializecss.com, but I also compared with the theme CC had launched, and found that I had to add a class .medium-carousel both to the carousel container and to the picture links. I haven't tried the fullwidth one, but maybe you need to check what CC have specified in the css.

If you want me to take a look at your file, then zip it up and post it. That will be faster than for me to make a file myself. ;)

I have not tried tool tips yet, but if there is a class .tooltipped, but it is not included in SD3 or SD3.5, you can still use it. The browsers will know what to do with it.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2073960 Photo


Registered User
28 posts

I'm a noob to all the frameworks to be honest and just experimenting to see which would be best for me to use going forward.

I didn't save the file, it was just a new page with some quick experiments to see how things worked.

When I was doing it I did try manually applying the tooltipped class to see if it would work but I had no luck. Looking at the materialize css on your roundabout demo page it has the material-tooltip class which is what is in the editor but no tooltipped class in either. Maybe it's a different version of Materialize, no idea. It does have carousel-slider in there too but couldn't get it to work. Maybe I need to add some script to get it working.

I'm just experimenting with it at the moment, haven't commited to using any framework although it seems like some nice features to it.

User 122279 Photo


Senior Advisor
14,461 posts
Online Now

Later today I may get some time to play with it again. I'll post here, if I get something created ;)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2073960 Photo


Registered User
28 posts

I managed to get the full-width carousel to work by just copying the html code off the materializecss site and pasting it into a html element. Before I was creating divs and adding classes and images etc. and I think all the extra html that was exported this way just wouldn't work with it.

Also the bit of jquery code needs to be added into the footer page so it slides straight horizontal
<script> $('.carousel.carousel-slider').carousel({
fullWidth: true
});
</script>
User 2073960 Photo


Registered User
28 posts

And just to follow up - manually typing in class of tooltipped does seem to work. I must have been doing it wrong before. But I think they need to add that class name into the dropdown.
User 122279 Photo


Senior Advisor
14,461 posts
Online Now

I have just created a 'Suggestion' thread for SD and copied your suggestion for the html element to it. If you have other suggestions, please post them there, so that we have them in one place.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 442930 Photo


Registered User
21 posts

Hello Inger!
Once again you are a life saver for someone like me who has only basic knowledge. Copied your materialize carousel and it's working great.
Thanks again
Rob Thumath
User 122279 Photo


Senior Advisor
14,461 posts
Online Now

:) Glad to be of some use!
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.