Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jun 21 10:58
    egarcia-add commented #5528
  • Jun 09 07:48
    hashcott commented #6464
  • Jun 03 12:23
    afandino-sg commented #5463
  • Jun 03 12:22
    afandino-sg commented #5463
  • Jun 01 17:57
    13k closed #2837
  • Jun 01 17:57
    13k commented #2837
  • Jun 01 15:22

    acburst on gh-pages

    Patreon june (compare)

  • May 27 08:03
    gdegaHub commented #3096
  • May 24 14:37
    ZeCarlosCoutinho commented #5402
  • May 20 01:52
    dhavalveera closed #6661
  • May 16 22:15
    gilbertoayala12 closed #6482
  • May 16 17:47
    kuza2010 closed #6667
  • May 16 17:47
    kuza2010 commented #6667
  • May 16 11:40
    LoganTann commented #6667
  • May 16 11:35
    LoganTann commented #6662
  • May 16 11:34
    LoganTann commented #6661
  • May 01 17:14

    acburst on gh-pages

    Patreon may (compare)

  • Apr 27 01:44
    ValmorMoreira commented on 824e782
  • Apr 20 10:51
    nomuna commented #6638
  • Apr 19 20:59
    jshster commented #4070
Elizabeth Adeotun Adegbaju
@elizabethadegbaju
Hi everyone please can some tell me what I am doing wrong with the select component?
I have scoured stackoverflow and everyone's soletion still displays the same way on my website
solution*
that blank space is still an invisible browser-default select element and I never even used the browser-default class
Sean Doherty
@doughballs
@elizabethadegbaju looks like maybe you didn't initialize:
https://materializecss.com/select.html#initialization
Sean Doherty
@doughballs

@alexchervet hmm, a little tricky and I'd probably try to find a better solution (maybe with a pseudo el) but you get the jist:

https://codepen.io/doughballs/pen/YzXdePM

Alex Chervet
@alexchervet
@doughballs Thanks, that helps!
03kkim
@03kkim
Is there a way to make the slider (under Javascript->Media on the website) keep a single title as the images change?
Sean Doherty
@doughballs
@03kkim there’s a fixed content example I believe, where a single button remains in place through the slides.
Under special options. As far as I can tell, slider and carousel are pretty much the same component.
> <div class="carousel-fixed-item center"> <a class="btn waves-effect white grey-text darken-text-2">button</a> </div>
03kkim
@03kkim
Oh, I see now. That's interesting! Thanks for the help!
Aaron Dolgin
@Aaron691
Can I use my own a hex color to change the color of an object?
Anthony House
@tuffant21
Yeah, you can change the colors of pretty much everything. What are you trying to change?
Alex Chervet
@alexchervet
@doughballs On the topic ok keeping an autocomplete image in the dropdown. I notice that the key for the URL is passed as a parameter to the onAutocomplete function so:
  onAutocomplete: function(val){
    elems[0].style.backgroundImage = 'url('+instances[0].options.data[document.querySelector('.autocomplete').value]+')';
  }
});
can become simply:
  onAutocomplete: function(val){
    elems[0].style.backgroundImage = 'url('+instances[0].options.data[val]+')';
  }
});
Sean Doherty
@doughballs
@alexchervet good spot! Also, using elems[n] and instances[n] in this way will always target the first match on the page, which is fine if you only have one. If you refine this to get a better result (ie circular flag - I think it’s only possible with a pseudo/absolute positioned el?), let us know!
Alex Chervet
@alexchervet

Here's a more difficult question:

To create the autocomplete data structure you can do something like this:

data["Fido Tucker"] = "/_AGHR/image_cache/fido.png";
data["James Brown"] = "/_AGHR/image_cache/brownLab.png";
data["Golden Boy"] = "/_AGHR/image_cache/golden.png";
data["Fido Tucker"] = "/_AGHR/image_cache/lab.png";

var options = {
data: data,
minLength: 1,
onAutocomplete: persist_image,
};

var elems = document.querySelectorAll('.autocomplete');
var instances = M.Autocomplete.init(elems, {});
var my_instance = instances[0];

Then, when onAutocomplete fires you get the key that identifies who was selected and you can persist the image

function persist_image(data_key)
{
my_instance.el.style.backgroundImage = "url(" + my_instance.options.data[data_key] + ")";
my_instance.el.style.backgroundRepeat = "no-repeat";
my_instance.el.style.backgroundSize = "40px 40px";
my_instance.el.style.backgroundPosition = "right";
}

Here's the question: Notice that there are 2 "fido tucker"s in the data. Imagine these are two employees in a large company that happen to have the same name. How can you tell, which fido tucker was selected? Is there a way of adding a meta-data field (such as employee ID) to data? Obviously you can concatenate the employee id to the name and get something like "Fido Tucker (id:100345035)" which would be unique, but then the ID shows up in the dropdown and in the final selection - which looks bad. Is there a way to know uniquely, who was selected? Even if you could pull an index from the data in the autocomplete function, that could be made to work (just keep a separate array with index/ID pairs in the same order).

Appreciate any ideas anyone may have.

Alex Chervet
@alexchervet
One idea is to update my_instance.el.value in the autocomplete function to remove the employee id. This at least makes the final selection beautiful, but the dropdown choices still contain the name/id concatenation which doesn't look so good.
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:
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: