Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Mar 04 00:18
    jshster commented #6628
  • Mar 04 00:14
    nh916 commented #6628
  • Mar 04 00:06
    jshster commented #6628
  • Mar 03 23:55
    nh916 commented #6628
  • Mar 02 12:56
    ArtyPrince-01 commented #5346
  • Mar 02 12:55
    ArtyPrince-01 commented #5346
  • Mar 01 12:33
    L1ghtn1ng closed #6241
  • Feb 28 08:32
    jshster commented #6628
  • Feb 28 08:24
    nh916 edited #6629
  • Feb 28 08:23
    nh916 opened #6629
  • Feb 28 08:12
    nh916 opened #6628
  • Feb 27 04:12
    WeebHiroyuki commented #6542
  • Feb 26 19:54
    Oyshoboy closed #6028
  • Feb 25 16:11
    bitdom8 closed #6627
  • Feb 25 16:11
    bitdom8 commented #6627
  • Feb 23 23:30
    Cherrg commented #3096
  • Feb 23 00:51
    Cherrg commented #3096
  • Feb 23 00:42
    Cherrg commented #3096
  • Feb 21 15:42
    bitdom8 commented #6627
  • Feb 21 15:37
    bitdom8 edited #6627
Alex Rock
@Pierstoval
image.png
However, depending on the cases (fiddling with the menu) I can have some slight glitches, but I can't really find how to reproduce:
image.png
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:
image.png
(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.
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:
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
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?
image.png
<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
image.png
Alex Rock
@Pierstoval
I think this is a browser feature, not a Materialize one
what browser do you use?
Majd Haj Yehia - BestDr
@BestDr
material.png
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:        ------^
anyone has an idea?
Anthony House
@tuffant21
You have a period in front of the #. Try removing that
AlphaX2018
@AlphaX2018

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.

Sean was so kind to help with the above. as I'll be trying to add the collapsable into an existing wordpress theme, I'm sure there will be already a file that runs document ready. 1) what would the best way to find it? should I perhaps just add the document ready initialisiation into my child theme functions.php? 2) how do i need to amend the initialisation if i dont use any options?

by the way, initializing without jquery is recommended

Does this mean to use the PHP initilisation by copying it into the document ready of my theme?

I'm just seeing that its not PHP, the one initiliastion is javascript and the other jQuery. so the javascript initialisation is recommended if i undrstand correctly.
AlphaX2018
@AlphaX2018
having done further reading, i guess the implementation would look as follows: 1) in my child theme, i'll create a init.js with the initialisation javascript code. 2) in my child theme function.php i add an action to add my new function to the wp_enqueue_scripts to load my init.js. the remaining problem (apart from testing) i see is that this may no be loaded anymore before the /body tag but in the header.