materialize

I am looking for some help with collapsible I am trying to change the icon on the headers when they are active but cant seem to solve the problem of if I click on another header without closing the first one having the proper icon being displayed. Here is a codepen with an example of my issue. http://codepen.io/FPC/pen/xZEWVY here is my code: <div class="container"> <div class="row"> <div class="col s6"> <ul class="collapsible popout" data-collapsible="accordion"> <li> <div class="collapsible-header"> <i class="material-icons right more">expand_more</i> <i class="material-icons right less"

I noticed that materialized CSS icons does not show up in Safari (v5.1.7 (7534.57.2) . Well searched a lot on this topic but there haven't been any documentation on browser compatibility where safari has been listed. Could anyone let me know if this is a bug which needs to be fixed or are there any alternatives to get this work in Safari. Other browsers Safari Browser PS:Other functionalities of materializecss works well except icons I faced the exact same issue. The following approach helped me: I was facing problems with the font-icons provided by materialize css. There seems to be some

I am trying to build a 1 page vertical scrolling website with a navbar at the top using materialize, now, materialize only has classes to align the links either left or right, a logo can be center aligned but not the links themselves, I've been adding center-align, and center classes to the UL and a wrapper div, and also, tried using the grid without success, here is my code: HTML <div class="navbar-fixed" > <nav id="nav_f" class="transparent z-depth-0" role="navigation" > <div class="container"> <div class="nav-wrapper" > <div class="row s12"> <div> <ul class="hide-on-med-and-down navbar " >

I would like to know if there is any way to have materializecss cards in a masonry-like display. I would like to avoid plugins like masonry, or having to compile sass, because this will be used on an aurelia application, and the configuration of external libraries and such pains me dearly. The closest thing I have come across is this: http://codepen.io/mike-north/pen/MwVoYp?editors=1100 , which does so through: .cards-container { column-break-inside: avoid; .card { display: inline-block; overflow: visible; } } Alas, I have been unable to get it to work using a sass to css compiler. The problem

Documentation for Materialize chips shows you can make chips with images: <div class="chip"> <img src="images/yuna.jpg" alt="Contact Person"> Jane Doe </div> This works fine - and when we come to the autocomplete option, this also works: $('.chips-autocomplete').material_chip({ autocompleteOptions: { data: { 'Apple': null, 'Microsoft': null, 'Google': 'images/juna.jpg' }, limit: Infinity, minLength: 1 } }); As we have specified "images/juna.jpg" as the value for the "Google" property in the object, this image shows up alongside the autocomplete dropdown when we begin typing "Goo". However,