Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Nov 29 09:04
    nh916 commented #227
  • Nov 29 06:06
    ivanBell199 commented #227
  • Nov 27 09:02
    nh916 opened #227
  • Nov 24 08:41
    DanielRuf commented #225
  • Nov 24 08:27
    LoganTann closed #223
  • Nov 24 08:19
    LoganTann commented #223
  • Nov 24 08:13
    LoganTann commented #225
  • Nov 16 13:43
    DanielRuf commented #225
  • Nov 16 13:42
    DanielRuf labeled #225
  • Nov 16 13:39
    DanielRuf commented #221
  • Nov 13 00:53
    nh916 commented #223
  • Nov 10 00:20
    LoganTann closed #224
  • Nov 10 00:18
    LoganTann commented #225
  • Nov 09 21:49
    ygorma edited #225
  • Nov 09 21:47
    ygorma edited #225
  • Nov 09 21:46
    ygorma opened #225
  • Nov 08 16:26
    ChildishGiant commented #224
  • Nov 08 11:56
    LoganTann opened #224
  • Nov 08 09:48
    LoganTann commented #223
  • Nov 08 01:02
    nh916 commented #223
Richard Lax
@richardlax_twitter
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems, {
// specify options here
});
});
How do you "specify options"? Can someone give me an example?
Chuck McKnight
@cmcknight
I have a best practices question. If I have a variable number of items to display as cards and need to account for different screen sizes with regard to the number of cards per row, should I just have one row and drop all of the cards on it?
Sean Doherty
@doughballs
@cmcknight short answer: yes. not sure if it’s best practice, but it’s what I do 99% of the time. The grid system takes care of the rest. It’s kind of impossible to add rows in for every x number of cards without then handling re-rendering on resize. The issue you’ll have is the card height difference which materialize notoriously handles badly…unless you use a css grid override, which I do, which removes the card height issue (or you can fix the height of the cards with css or JS)
Chuck McKnight
@cmcknight
Hmm, where/how are you doing the grid override?
Sean Doherty
@doughballs
@cmcknight I wrote a custom 12 column css grid sass module that (any time grid is supported and any time .grid is used on the containing element of a row) turns a row into a grid container, overrides all the materialize specific width and margin css and changes the % widths to grid spans.
Tome
@tomwjerry

Actually it might be worth to implement a such thing in materialize. So you made the rows to grids then as in display: grid?

Someone said using flexbox might be better, I do not know which approach is better.

Tome
@tomwjerry
I am little confused about master and v2-dev. It looks like v2-dev got merged into v1-dev. Is the development of next version taking place in master now?
Sean Doherty
@doughballs
@tomwjerry yes, I’ll put in a codepen to demo. It was built a while back to allow for IE which didn’t support grid, so it falls back to Materialize grid if it’s not supported. But really, 12 column grid is very backwards looking, and maybe a second grid system outside of the float based system would be more forward looking…
Chuck McKnight
@cmcknight
I've got a question about the select control. Specifically is there a way to limit the height of the expanded dropdown list of checkbox items? I'd prefer not to have it cover the entire available screen real estate because on mobile devices it is non-obvious how to exit the control.
Chuck McKnight
@cmcknight
Ah, just found it. Have to set the .select-dropdown property to the desired height/width.
Chuck McKnight
@cmcknight

I have a question about the select events. I have the following HTML:

  <main>
    <div class="container">
      <form>
        <div class="row">
          <div class="input-field col s6">
            <select id="list1">
              <option value="all">All</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>
          </div>

          <div class="input-field col s6">
            <select id="list2" disabled>
              <option value="all">All</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>
          </div>

        </div>
      </form>
    </div>
  </main>

And the following Javascript:

<script>
    // Handle Materialize inits
    document.addEventListener('DOMContentLoaded', function () {
      var options = {};
      var selects = document.querySelectorAll('select');
      M.FormSelect.init(selects, options);
    });

    // list1 - all selected
    const list1 = document.getElementById('list1');
    const list2 = document.getElementById('list2');

    list1.addEventListener('change', (e) => {
      let index = e.target.selectedIndex;
      let list1Value = e.target.value;
      console.log(`index: ${index}`);
      console.log(list1Value);

      if (list1Value === 'all') {
        // disable list2 if list1 is all value
        list2.value = 'all';
        list2.disabled = true;
      } else {
        // enable list2 if list1 is not all value
        list2.disabled = false;
      }
    })
  </script>

When I bring up the form, list2 is disabled as I expect but whenever I change the value in list1 to something else, list2 never gets enabled. I'm missing something, but I'm not see what. 🤔

Any ideas from a fresh pair of eyes are appreciated.

Chuck McKnight
@cmcknight
Curiouser and curiouser. If I remove Materialize CSS from the mix, the enable/disable works correctly.
Chuck McKnight
@cmcknight
Chuck McKnight
@cmcknight

Welp, after spending a day walking through various iterations, I am unable to programmatically disable/enable selects.

Things I tried:

  • Toggling the disabled attribute
  • Adding/removing the 'disabled' attribute from the select itself
  • Adding/removing the 'disabled' class from the select-wrapper

TBH, I'm not sure if it's a bug, per se, or just not implemented. Any insights appreciated.

Sean Doherty
@doughballs
@cmcknight i haven't stepped through you code and don't have time, but selects must be re-initialised after you mess with them.
  1. <Select></select> - this is the point of reference
  2. Initialize the select.
  3. Materialize then takes the select, hides it, and replaces it with text input and dropdown
  4. Make changes to the original select (for instance, adding, removing ect)
  5. Initialize again to see the changes take effect
Chuck McKnight
@cmcknight
Ah, so you're saying that I need to do another M.FormSelect.init(). OK, I'll try that.
That was it. The docs def need some love. :joy:
Guilherme Garcia
@guilegarcia
Hi, is there an estimated release date for version 1.1?
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