Dogfalo/materialize

Materialize, a CSS Framework based on Material Design

Sean Doherty

@doughballs

@alexchervet not out of the box; the component is as simple as it seems. But I’m sure you can adjust autocomplete.js (or possibly dropdown.js, seeing as that’s what is used) to do what you need. In the past I’ve passed an ID as the img-src, and amended the component to load data-src instead of src, and then hidden the image. It was an easy way to store some data using the component as is (I didn’t need the image part of the function)

I do think another user did something similar, but not sure what their solution was. In any case this should be requested as an enhancement because it’s come up numerous times. I’d maybe request it on the fork, because that is moving forward...

Alex Chervet

@alexchervet

@doughballs I think it's better to wait for the enhancement than to modify the Materialize.js files. I don't want to start creating my own set of future incompatibilities. In the real application image names are not as simple as "lab.png". By modifying other areas of the code I can encode the Employee ID in the src URL. I'll then reference the element's src field to extract the id. I was just hoping for a simpler approach. Thanks for the answer.

Thibaud Marazano

@ThibaudMZN

Hi everyone ! I'm trying to implement a nested Dropdown menu, and found a good example online, but for some reason I'm having a strange behavior :

If I define the overflow-y directly inside HTML's style tag, it's working
If I do it on a separate stylesheet, it doesn't work

As an example you can see a live demo here : https://jsfiddle.net/ThibaudMZN/nrqbs0mv/35/
Try commenting / uncommenting the HTML's style tags and see the difference

Any idea why this is happening would be greatly appreciated !

Thanks !

Hmm... Apparently I just needed to add the !important tag to make it work..

Alex Rock

@Pierstoval

I tested your fiddle @ThibaudMZN , and the "!important" that makes it work is a neat idea, but you should replace it with a better selector instead :wink:

However, depending on the cases (fiddling with the menu) I can have some slight glitches, but I can't really find how to reproduce:

another attempt to reproduce

quite hard to reproduce though, it appears either when I click the menu button, or sometimes randomly

Somehow just clicking on it kinda works:

(works = reproduces the bug :sweat_smile: )

Alex Chervet

@alexchervet

I am able to consistently reproduce by clicking on the main menu and quickly moving the mouse down and to the right. It seems like it might be something related to the event for the sub menu firing before the event for the first menu. I have not dug into Materialize code. To reproduce I moved all code into a single file and ran locally using Node.js + express.

MenuFail.mp4

Here's the page running on local host that produces the failure:

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Example nested dropdown</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<style>
.container {
background: #eee;
border-radius: 8px;
}

.dropdown-content .dropdown-content {
left: -100%;
}

.dropdown-nested {
overflow-y: visible;
}

.dropdown-nested {
overflow-y: visible;
}
</style>
</head>

<body>
<div class="container">

<a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Menu</a>

<ul id='dropdown1' class='dropdown-content dropdown-nested'>

<li><a href="#!">uno</a></li>
<li><a class='dropdown-trigger sub' href='#' data-target='dropdown2'>uno</a></li>
<li><a href="#!">uno</a></li>
</ul>

<ul id='dropdown2' class='dropdown-content dropdown-nested'>
<li><a href="#!">dos</a></li>
<li><a href="#!">dos</a></li>
<li><a href="#!">dos</a></li>
<li><a href="#!">dos</a></li>
<li><a class='dropdown-trigger sub' href="#" data-target="dropdown3">dos</a></li>
</ul>

<ul id='dropdown3' class='dropdown-content'>
<li><a href="#!">tres</a></li>
<li><a href="#!">tres</a></li>
<li><a href="#!">tres</a></li>
<li><a href="#!">tres</a></li>
</ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(function ()
{
$('.dropdown-trigger').dropdown();
$('.sub').dropdown({
hover: true
}
);
});
</script>

</body>

</html>

Hope this helps.

Alex Chervet

@alexchervet

Video was done with Chrome / win10 btw

Alex Rock

@Pierstoval

interesting

I had the same error, kinda

AlphaX2018

@AlphaX2018

Hi, could someone help me to use the collapsable menu?

Sean Doherty

@doughballs

@AlphaX2018 what’s the issue?

AlphaX2018

@AlphaX2018

Hi Sean, thank you for asking. I have copied the 2 cdn links in my <head> section and also copied jquery cdn into my <head>. I have then copied the HTML code from the collapsible page , but its not working. There is no functionality to it. Is there anything else that needs to be done?

I have this in my head:

and this in my body:

<ul class="collapsible">
<li>
<div class="collapsible-header">First</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header">Second</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header">Third</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
</ul>

Sean Doherty

@doughballs

You need to initialise collapsible, along with any other js component - check the section called initialisation on each component page. Also js scripts should go at the end of the body, before the closing body tag.

AlphaX2018

@AlphaX2018

Could you kindly elaborate further on the initialisation where i have to copy this to?

Thanks - will copy the js script just before body tag

I have just copied the initialisation within <script> tags just before the /body tag and it works now

thanks a lot for the quick help!

Sean Doherty

@doughballs

After Materialize you should link to your own custom js file. Call it init.js maybe - and put it in a folder called js. In this script you need a single document.ready (see the docs page for each component) and then inside this you put the line or lines for each initialisation as stated in the docs. Word of warning - if using the vanilla Js init, take out the options variable if you are not setting any options.

Alex Rock

@Pierstoval

by the way, initializing without jquery is recommended

Alex Chervet

@alexchervet

Does anyone know why when entering data for an input field using text that the browser has previously cached Materialize assigns a blue background; and how to prevent that?

<div class="row">
<label >
<h6>First Name</h6>
</label>
<input id="inputFirstName" type="text" name="firstName" class="validate"/>
</div>
...

Entering data via the keyboard (not using the browser cache) works fine

Alex Rock

@Pierstoval

I think this is a browser feature, not a Materialize one

what browser do you use?

Majd Haj Yehia - BestDr

@BestDr

guys, why is the picture higher than the textarea? the img has "col s1" classes and the textarea is inside an "input-field" div, which is also inside a row (and it's the parent of the image too), in addition, the textarea has "col s11" classes, so I think they both should be on the same line, what am I missing?

Anthony House

@tuffant21

Try putting the left class on the image

Majd Haj Yehia - BestDr

@BestDr

doesn't help, the issue is with the sizes and not the placement, or the display property

Anthony House

@tuffant21

I think the best you can do it give the image a margin top then. Try to just align it as close as possible with the text input

Alex Chervet

@alexchervet

@Pierstoval Ah, you may be correct! The blue background appears on Chrome, but not Firefox. Thanks.

Vlad

@vzelenko

What's the correct way to import materialize SASS into your site's SCSS file?
I'm using the following line: @import '~materialize-css/sass/materialize';
and when compiled with webpack, I get the error:

== External:     SassError: Invalid CSS after ".blue": expected selector, was ".#007bff"
== External:             on line 14 of node_modules/materialize-css/sass/components/_color-classes.scss
== External:             from line 5 of node_modules/materialize-css/sass/materialize.scss
== External:             from line 9 of assets/stylesheets/_materialize_custom.scss
== External:             from line 4 of /Users/vzelenko/work/Docker/rdadvisors/assets/stylesheets/index.scss
== External:     >> 
== External:        ------^

Where communities thrive

People

Repo info

Activity