Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Dec 06 17:51
    DanielRuf commented #304
  • Dec 06 12:18
    wuda-io closed #303
  • Dec 06 12:16
    wuda-io unlabeled #303
  • Dec 06 12:15
    wuda-io closed #304
  • Dec 06 12:09
    wuda-io commented #298
  • Dec 06 12:08

    github-actions[bot] on gh-pages

    deploy: 7cb4ae53306fbcdfdacedc8… (compare)

  • Dec 06 12:06

    wuda-io on main

    chore: auto format by prettier fix: add missing files for repl… Merge pull request #316 from Sm… (compare)

  • Dec 06 12:06
    wuda-io closed #312
  • Dec 06 12:06
    wuda-io closed #316
  • Dec 06 08:16
    lindeer edited #317
  • Dec 06 08:14
    lindeer edited #317
  • Dec 06 08:09
    lindeer edited #317
  • Dec 06 08:05
    lindeer opened #317
  • Dec 06 08:05
    lindeer labeled #317
  • Dec 05 00:01
    t-hauck commented #303
  • Dec 05 00:01
    t-hauck commented #303
  • Dec 05 00:00
    t-hauck commented #303
  • Dec 05 00:00
    t-hauck edited #303
  • Dec 04 23:59
    t-hauck edited #303
  • Dec 03 17:52
    Smankusors review_requested #316
Anthony Leonardi
@AJLeonardi
I'm running into the issue with the dropdowns on iOS. I know there's a patch here: https://github.com/Dogfalo/materialize/issues/6514#issuecomment-594657199 , but I'm currently using the cdn hosted 1.1.0-alpha version. I've never applied a patch before, though. Could someone help me through the steps for this? can I just remove those lines in the materialize.min.js file and host that myself? or is it some other process? Thanks!
Colin Cleary
@Lolincolc

Hi all ! I'm facing an issue. I want to call a function with parameters from Sidenav options, but it does not work as soon as i add any parameters to my function
Here is my code :

M.Sidenav.init(elems, {
        'onOpenStart': myFunction("param")
});

If i remove parameter from the "myFunction" it works, but with parameter the function in not called. Am I doing something wrong ? Thanks for your help !

To clarify : with a parameter the function gets called as soon as code is loaded and not onOpenStart
Sean Doherty
@doughballs
@Lolincolc I think you need to call an anonymous function
Anthony Leonardi
@AJLeonardi
Hi Can anyone help with my dropdown issue on iOS? this is the open issue on github in the materializecss repo: materializecss/materialize#31
2 replies
nett_hier
@netthier
Hello, is it possible to label chips inputs? Like you can do with regular text inputs
Ivan
@ivanBell199
Hello everyone! My message is late but @Lolincolc if a named function is really needed, I do it like that:
M.Sidenav.init(elems, {
        'onOpenStart': function() {
              myFunction("param")
        }
});
Also I would like to ask if anyone has tried to make nested dropdown with Materialize? Any tips are appreciated
ShinProg (Logan Tann)
@LoganTann

I'm trying to run in the dev branch without changes the command yarn test --verbose --filter=carousel but it stucks at Testing specs with Jasmine/latest via HeadlessChrome/78.0.3882.0

How long should it takes normally ?

Chuck McKnight
@cmcknight
I'm using a SELECT-based pager where I dynamically fill the options (using Nunjucks) based on the number of pages. I've noticed that when I select a new page (which works as expected) that if I use the back button to go back to the previous page the SELECT is not reset. Is there some magic I'm missing?
Chuck McKnight
@cmcknight

Ha! I found an answer.

    <form id="pager-form">
    Page:<select class="browser-default red-text black" id="pager" >
    {%- for productPage in pagination.pages -%}
      {% if pagination.hrefs[loop.index0] == page.url %}
        <option value="{{loop.index}}" selected>{{loop.index}}</option>
      {% else %}
        <option value="{{loop.index}}" >{{loop.index}}</option>
      {% endif %}
    {%- endfor -%}
    </select>
    </form>

(okay, it's HTML/Nunjucks)

window.addEventListener('pageshow', () => {
  let pagerForm = document.getElementById('pager-form')
  if (pagerForm !== null && pagerForm !== undefined) {
    pagerForm.reset();
  }
})
jshster
@jshster
jshster @jshster Sep 28 16:22
I'm using the Materializecss datepicker .... I am using it to setup sporting matches on a specific day of the week, depending on the competition selected. So if I select Monday Mixed Basketball I only want the Monday's to be enabled but if I select Wacky Wednesday's, well I then only want Wednesday's enabled. I was thinking the easiest was to do this would be to have a data attribute with the day of the week and then use that in the disableDayFn method.... but I can't work out for the life of me how to access the data attribute. I'm trying to avoid using ID's or anything remotely hard coded. Any ideas?
Eddippla
@Eddippla
hey
SeCrEt BoY™
@khanh-nt

Hi all, I have issue with a tag button. Example:

<a class="waves-effect waves-light btn export-settings"><i class="material-icons right">cloud_download</i>Export Settings</a>

The button dont have effect as a normal button, it just like a link button (hover and text turn to blue)

Anyone know why?
jshster
@jshster
@khanh-nt I’m in the Gitter app so can’t see your image fully but at a guess you are missing one of the button classes. Either btn, btn-small or btn-large.
6 replies
Ghost
@ghost~6160769e6da03739848777f1

Hello @cmcknight thanks for your reply on the other chat.

I don't think it's that simple with me. I mainly have the problem with date and time pickers. I have a script that fires when the window object is loaded. All things that are already in the DOM are initialized here. A popup is generated via an event, which adds new elements, but these do not have the functionalities as required. For example, the addressed data picker becomes an input field. However, everything works as planned as long as the elements have been in the DOM from the start. For example, I initialize the datepicker with $ (". datepicker"). datepicker (<datepickerOptions>). However, I get an error as soon as I try this on the new element.

Error: Uncaught TypeError: Right-hand side of 'instanceof' is not callable

Chuck McKnight
@cmcknight
Hi all, dumb question. I have a search field on a mobile device. When the enter key is tapped on the desktop browser, it correctly detects that event. On the mobile it seems to ignore the event. Is there another event I should be handling?
Ghost
@ghost~6160769e6da03739848777f1
@cmcknight what exactly do you mean with "enter key"?
Chuck McKnight
@cmcknight
The 'enter' (or 'return') key on the virtual keyboard on the phone.
Ghost
@ghost~6160769e6da03739848777f1

I never checked the enter keycode (13 should be enter) but you can try it with blur-events or focuslose. Here's a sample page witch shows, that the keycodes are the same for mobile and desktop: http://output.jsbin.com/omatip/1

Your problem could happen because the mobile engine handles enter events another way than the desktop itself. Does this problem happen on every mobile device? What browsers are you testing and which engines you using?

Chuck McKnight
@cmcknight
I'm seeing it on iOS with Safari and Firefox. Need to install Chrome to check it.
Chuck McKnight
@cmcknight
Same thing there. I tap the "enter" key on the keyboard after I put text in an input field on the desktop browser, the search event is triggered. When I do the same thing on a mobile browser, the event seems to get triggered but the query string gets trashed.
Ghost
@ghost~6160769e6da03739848777f1
Can you try to recreate the exact problem within a fiddle?
ShinProg (Logan Tann)
@LoganTann
just an idea I had, when we will work on v2 I think we will have to buy the materializecss.org domain to link it with materializecss.github.io
It's better for browser's autocompletion and in a general way (such as wordpress.com et wordpress.org)
Anthony Leonardi
@AJLeonardi
I'm having trouble initializing new select elements. Basically I'm adding select elements to the DOM when a user clicks a button. I've tried re-initializing all selects, I've tried initializing just the selects that are added, but the 'new' ones never work. Here's a js fiddle of the code I've got (without the fixes I tried...). https://jsfiddle.net/AJLeonardi/szt1enob/23/
1 reply
Hoping someone could help me with an easy fix. Thanks!
MumblingFumbler
@MumblingFumbler
Is it possible to set up an event listener so that I can be signaled when a date has been deposited into the input field with class='datepicker'? I tried addeventlistener('change', ...) but that only fires when the datepicker is initialized. Thanks for your help.
MumblingFumbler
@MumblingFumbler
@MumblingFumbler Sorry, it was pilot error. It works fine. Disregard
Arpad G. Bondor [Gabriel]
@ArpadGBondor

Hi,
I switched to 1.1.0 from 1.0.0, and including the JS file in the App.js of my React project doesn't work anymore:

import M from '@materializecss/materialize/dist/js/materialize.min.js';

I'm getting this warning message from VS Code:
Could not find a declaration file for module '@materializecss/materialize/dist/js/materialize.min.js'. 'e:/.../node_modules/@materializecss/materialize/dist/js/materialize.min.js' implicitly has an 'any' type.
Try npm i --save-dev @types/materializecss__materialize if it exists or add a new declaration (.d.ts) file containing declare module '@materializecss/materialize/dist/js/materialize.min.js';ts(7016)
module "e:/.../node_modules/@materializecss/materialize/dist/js/materialize.min"

Seems like M is not exported properly.

Should I open an Issue about this on GitHub?

Code-xed
@Code-xed
I can't Find The Documentation For Matirialized CSS. Im Not Using Any JS Library Just Using The Cdn Version
Jonathan Woollett-Light
@JonathanWoollett-Light
Hello everyone I'm new. I encountered an issue trying to initialise tabs in a custom element (https://stackoverflow.com/questions/70670848/initialising-tabs-within-custom-elements) would appreciate any help (I full expect it's some dumb little thing I've missed)
1 reply
Escolta
@guard_escolta_twitter

Hi everyone!
I am a backend engineer who has been worked several years in fullstack projects. My knowledge on the frontend is however limited, specially CSS and styling, SASS etc.

I have used in the past this template which I liked and I would like to migrate to your version of materiaze. However, I do not know what steps should I do. I guess it is a matter of migrating the styiling, css, etc but I do not know exactly how to do it.

Can anybode give some hints where to start?

Thank you and also thank you for your fork and your work!

3 replies
SeCrEt BoY™
@khanh-nt
Hi, everyone. Is there any WYSIWYG for Materialize?
1 reply
I mean suit with Materialize
jshster
@jshster

Hi, everyone. Is there any WYSIWYG for Materialize?

hey all, does anyone know if there is a way to trap the focus or blur events no a Materialize select? The normal approach doesn't work. I can place a focus or blur event on the .select-dropdown class but this doesn't give me the object name without using some funky searching within the children to find the hidden select object. Any ideas?

jshster
@jshster
Alrighty brainstrust, got another one for you..... I've got a Date of Birth datepicker. Obviously being a date of birth the list of years is extensive (-75 years). I have setup a JS Fiddle to highlight the issue.... basically if you scroll down to Birth Date 99 (I labelled them so that you could clearly see the scrolling issue). Click on the date and then in the popup select the Year selector. Notice behind the popup that the form jumps. And when you select a value , even though Birth Date 99 is set correctly... that's not the field that is shown. Any help would be appreciated. I'm sure this has been encountered before. Just can't work out the fix for the life of me. https://jsfiddle.net/6n8edfur/
SeCrEt BoY™
@khanh-nt
Hi, there is any way to make a search form for multiple-select tag?
1 reply
Steve Watts
@reader458_twitter
New here, but I've used MaterializeCSS for several years. I'm still on 1.0.0 and have experimented a bit with 1.1.0-alpha but had issues I'll save for another day. Carrying the framework forward is greatly appreciated - hopefully I can help in some way. I tried to implement ScrollSpy yesterday on one of my pages. The list of links seemed to display just fine at the bottom of the main part of the page, but the list didn't relocate to the side of the page. I'm using a navbar across the entire top of the page, and then I have a parallax container near the bottom of the page. The parallex container extends across the page. I've tried to move everything else on the page to the left within the defined "col s12 m9 l10" widths. I'm wondering if anyone has any experience with practical use of ScrollSpy that might offer me some obvious things to look at to solve the issue. There don't seem to be any console errors...
2 replies
SeCrEt BoY™
@khanh-nt
Hi everyone. Is how to make chips which have autoComplete options have images too
I have autoComplete data:
        data: {
          'Apple': url1,
          'Microsoft': url2,
          'Google': url3
        },
1 reply
but when select chip from auto complete > tag just have tag without url
Steve Watts
@reader458_twitter
I mentioned this in another thread above, and I thought I would separate it out. On the topic of 1.0.0 vs. 1.1.0-alpha, I found the issue I was seeing. I use Django model forms (doubt that's significant, but...). The main issue that I'm seeing is that when I swap from 1.0.0 to 1.1.0-alpha, the choices fields (multiple and single choice) go blank. I used the Firefox inspector to analyze the styling for each of the table fields, and I really don't see any difference in styling.
2 replies
todd0007
@todd0007
I have a need for a form field that allows a user to type ahead to get a list of values to choose from. I've tried a select input but then there is no type ahead or autocomplete unless I revert to a browser-default class. I have also tried an autocomplete input but it allows a user to type in a value that isn't in the list. Any idea on how to either get a select that allows full autocomplete values or an autocomplete that limits the user to the values listed? Thank you for any suggestions.
CHP-Pete
@CHP-Pete
What is the method for getting the count of Autocomplete? instance.count is always a step behind when I try to use an event listener. Like it still says 0 when you enter a letter that has multiple entries in the list, but on the second letter will show the total for the first letter, and so on.
Daniel Bréelle Johannesson
@imprex92

Hello guys! I have a question regarding Chips. I would really appreciate if you could help me!
everything is working except that I cant get the value of the specific chip i'm clicking on...

I have tried for this witch gives me the array of all chips:

let instance = M.Chips.getInstance(document.querySelector(".chips"))
    console.log(instance.chipsData)

I have also tried something like this witch gives med the node of the chip I pressed (I think)

M.Chips.init(chips, {
      data: [{
        tag: 'Gothenburg',
      }, {
        tag: 'Shanghai',
      }, {
        tag: 'Paris',
      }],
      placeholder: 'Enter city to save',
      limit: 7,
      secondaryPlaceholder: '+City',
      onChipSelect: (data, i) => { console.log(i.firstChild) }
    })

How can I get this value in a nice and clean way?

Sorry thought I did the code in a nice black box
Anthony Leonardi
@AJLeonardi
hey folks, I just had a need to create sortable gird collections with materialize (where the elements in each li were highly and variably nested) so I created a simple javascript class to do it. figured I'd share here in case anyone else has similar requirements: https://gist.github.com/AJLeonardi/ca56c8ae1a67e14c24357a92e07877b2
Anthony Leonardi
@AJLeonardi
Does anyone else have a problem where form fields don't get focus when clicking on the label?