Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Aug 19 14:05
    andresenra closed #6670
  • Aug 19 13:36
    andresenra opened #6670
  • Aug 17 19:40
    rodrigovallades edited #6669
  • Aug 17 19:39
    rodrigovallades edited #6669
  • Aug 17 19:38
    rodrigovallades edited #6669
  • Aug 17 19:36
    rodrigovallades edited #6669
  • Aug 17 19:35
    rodrigovallades edited #6669
  • Aug 17 18:55
    rodrigovallades edited #6669
  • Aug 17 18:01
    rodrigovallades edited #6669
  • Aug 17 18:01
    rodrigovallades edited #6669
  • Aug 17 18:01
    rodrigovallades edited #6669
  • Aug 17 18:00
    rodrigovallades edited #6669
  • Aug 17 18:00
    rodrigovallades edited #6669
  • Aug 17 18:00
    rodrigovallades edited #6669
  • Aug 17 17:59
    rodrigovallades edited #6669
  • Aug 17 15:26
    rodrigovallades edited #6669
  • Aug 17 15:24
    rodrigovallades opened #6669
  • Aug 07 23:38
    jshster commented #6668
  • Aug 07 15:20
    Maqsyo commented #6668
  • Aug 07 03:47
    blackbomb404 commented #4159
Anthony House
@tuffant21
image.png
@doughballs when you add an event listener, it's usually in the form of element.addEventListener(type, callback, options)
If you pass in false in the options, I think it fixes that
Sean Doherty
@doughballs

Answered my own question re the event listener thing:

materializecss/materialize#20

Eden0624
@Eden0624
How can i change the size of a button? I saw that the size button have been set by "btn-large"
Sean Doherty
@doughballs
There are two utility classes provided - .btn-large and .btn-small - if those aren’t enough, you can just change height on .btn
wristtattoo
@wristtattoo

I have been working on a much needed wireframe component library in Figma for Materialize CSS. Soon to be published for free. Stay tuned:

You can view my progress here: https://dribbble.com/shots/7477541-Materialize-CSS-Wireframe-Component-Library-in-Figma

@wristtattoo any update on this? Are you still working for it?

Very late reply - apologies. The Materialize CSS Figma library can now be downloaded from my Figma Community Page here - https://www.figma.com/@terrywells

Alex Chervet
@alexchervet
Quick Auto Picker Question: When creating an auto picker it's possible to include text and an Image specified by a URL. Looks great when the picker is open and you see people's names and profile pics. However once you select someone from the drop down the input only shows text. Picture (URL) is gone. Is thee an option to show both text and the URL picture once the selection has been made?
Anthony House
@tuffant21
Could you provide a reference to the autopicker? I'm not sure what you are referencing
Sean Doherty
@doughballs
I think he means autocomplete...
Anthony House
@tuffant21
@alexchervet You might be able to load the image yourself. Maybe something to the likes of
<input type='text'><span class="left"><img src="image-source.jpg"><span>YOUR TEXT HERE</input>
To be honest, I don't know if that exactly will work, but I'm sure something to the likes of it would
Sean Doherty
@doughballs
I was thinking as a background image to the input. You’d need to get the src in click/autocomplete, then apply it to the input.
Alex Chervet
@alexchervet
Here's a pen to illustrate the problem
image.png
image.png
Notice how when you choose a volunteer (the the letter m in the autocomplete) you get nice pictures next to each person . However once the selection is made, the picture is gone.
Sean Doherty
@doughballs
@alexchervet a couple of things - Materialize doesn’t need jquery...
Alex Chervet
@alexchervet
Is there a CSS class that can be assigned to the autocomplete input that causes Materialize to keep the image after selection is made?
@doughballs Okay! Didn't realize. Many examples include jquery. But since I don't need jquery otherwise, I will remove and test. You just sped up my load times. Thanks!
Anthony House
@tuffant21
And removed security vulnerabilities :D
Sean Doherty
@doughballs
@alexchervet but to answer your question - no, there isn’t a class name to get what you ask, it’s not part of the component. Actually, what you see is a text input, then a dropdown (which has the image) and then the text input again. There will be a way to hack the component to get what you want, I’ll try to take a look tomorrow...
Alex Chervet
@alexchervet
@doughballs Got it. Thanks. Appreciate any suggestions you may come up with. I'm more of a server side guy, but I have to say, I like this library. Of the several CSS packages I have played around with Materialize is the most elegant. It had a clean look and it has been pretty easy to pick up and use.
Elizabeth Adeotun Adegbaju
@elizabethadegbaju
image.png
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.