Materialize, a CSS Framework based on Material Design Documentation - Materialize materialize is a modern responsive css framework based on material design by google.

Materialize CSS - Mobile devices

I'm making a site with Materialize from Google but I have some problems with the grid on mobile devices and tablets. I want, for example, to have 1 row and 3 colums on a large screen and 3 colums of 1 row on mobile devices. I follow their instructions but it doesn't works... Somebody can help me ?

Source: (StackOverflow)

Adding materialize tooltip with ember JS template

I have to add a materialize tooltip to an input in a form in Ember templates.

{{input class="card-panel grey lighten-3 form-field tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip" value=project_title id="project_title" placeholder="Project Title"}}

For this to work, I need to add

$(document).ready(function(){$('.tooltipped').tooltip({delay: 50});});

I am not able to understand where to add this code for the tooltip to show. I tried in the application_view.js in the views folder but it didn't work

Source: (StackOverflow)

Materialize CSS - Collapsible

I'm working with Materialize CSS and using the collapsible accordion-style element ( ).

For some reason, as soon as I click to open an item, it immediately closes.

Here is my code. My goal is simply to be able to use collapsible as intended (i.e. with the element opening and remaining open).

<div style="width:600px; margin:0 auto;">
    <ul class="collapsible" data-collapsible="accordion">

    <% @friends.each do |friend| %>
        <% latestTweet = CLIENT.user_timeline(friend.twitterHandle)[0] %>
          <div class="collapsible-header">

            <img src="<%= latestTweet.user.profile_image_url %>" width="40" height="40"><%= link_to friend.firstName + " (" + friend.twitterHandle + ")", "friends/" +  %><div style="float:right"><%= (Indico.sentiment(latestTweet.text)*100).round %></div>
          <div class="collapsible-body">
                <%= latestTweet.text %>
        <% end %>

Source: (StackOverflow)

Setting background color when user clicks, changing back when user clicks anywhere else

I have come across a situation where I want to set the background color of a list item <li> tag when the user clicks on that item. I want it to remain that background color forever until the user clicks elsewhere on the page except another <li> tag.

In Meteor, I know how to use a mousedown or click event on the <li> tag to set the background color of itself, but how can set a Meteor click event on everything else that can reset the background color of that <li>?

I am using Meteor, Javascript, and Materialize CSS.

Source: (StackOverflow)

Where should I initialize select when using Materialize and Meteor?

I'm trying to use Materialize Forms on Meteor. On its Materialize's page it says I should init the "select" input field like this:

$(document).ready(function() {

I've tried calling this on Meteor.startup, Template.body.created - nothing worked. I get the following error:

undefined is not a function (evaluating '$('select').material_select()')

Where should I initialize it?

Source: (StackOverflow)

ScrollFire plugin seems not to be working

It seems that for some reason ScrollFire plugin is not working.

Using official guide I have created a plunker demo. Core javascript is the following:

Materialize.scrollFire({ selector:".whoosh", offset: 10, callback: "alert('fired')"});

It assumes that when scrolling down to image an alert must pop up, but it does not.

Any ideas why?

Source: (StackOverflow)

Why my meteor app create "hiddendiv common" div tags?

I'm wondering why my meteor app create some tags like this for no reasons?

<div class="hiddendiv common"></div>

Thank you

Source: (StackOverflow)

jspm install materialize but 404 on materialize.js when it runs

I am getting a 404 error on this on this get:


I have used jspm to install materialize, and it the package is there as expected.

However, there is no actual file named materialize@0.96.1.js in the Dogfalo directory.

Is there something else I should be doing to get this to work?

Source: (StackOverflow)

Applying type constructors to generated type parameters with Scala macros

I am trying to materialize an instance of the (simplified) trait

trait TC[F[_]] {
  def apply[A](fa: F[A]): F[A]

using Scala macros. The signature of the macro therefore is

def materialize[F[_]](c: Context)(
  implicit fT: c.WeakTypeTag[F[_]]): c.Expr[TC[F]]

Type constructor F[_] now needs to be applied to the type parameter A for two reasons:

  1. To write the signature of apply above for a particular F (like Foo[A])
  2. To inspect the members of the type Foo[A] in order to specify an interesting body of apply

Is there any way to create the type corresponding to the method type parameter A that can than be used in appliedType? It appears difficult for me, since the method apply and its type parameter A are also just being generated as trees.

I tried to take WeakTypeTag[TC[F]] as additional argument to the macro call and received the paramter type by

val paramT = wfg.tpe.member("apply": TermName).tpe.typeParams.head.tpe

but then using paramT in q"... def apply[$paramT] ..." does result in

java.lang.IllegalArgumentException: can't splice "A" as type parameter

so this appears also to be no solution.

Source: (StackOverflow)

Multiple Select in MaterializeCSS?

Is there a way to use Multiple Select with Materialize CSS ? Or other stylized component that does the same?

Something like tagging stack overflow style

tag (x), tag (x)

Did you understand?

Source: (StackOverflow)

Materialize multiple-select boxes

My understanding is that Materialize doesn't support styled multiple-select boxes - you have to specify browser-default and not use Materialize styling. (correct me if I'm wrong)

So I've tried to make an equivalent with Materialize dropdown with checkboxes inside the dropdown like this:

<a class='dropdown-button btn-flat' rel='nofollow' href='#' data-activates='topics_dropdown' data-hover="true">
Relates to topics...</a>
<ul id='topics_dropdown' class='dropdown-content'>
      <input type="checkbox" name="report[topics][409928004]" id="report_topics_409928004" value="1" />
      <label for="report_topics_409928004">Engagement</label>
      <input type="checkbox" name="report[topics][669658064]" id="report_topics_669658064" value="1" />
      <label for="report_topics_669658064">Appraisal</label>

    <!-- etc. -->


But there's a glitch in how this gets rendered. The text and boxes gets offset by half a line downward, so the highlighting hover effect highlights a rectangle that overlaps two different options. Is there any way to correct this glitch?

Here's a screenshot. It's not the same content as the example code above but it's the same dropdown-checkbox structure.


Source: (StackOverflow)

Materialize duplicated items on javascript initialization

I have being playing around with materializecss on my joomla website. I have a T3 framework template ( I am pretty new to web development). The problem I have is that whenever I use an item that requires js initialization it gets duplicated, one with the javascript style and one with the css one. For example this happens when using a select item or datepicker. I use the example code given here:

Another strange thing is that the styles are not fully applied, for example the input field its never applied.

thank you


javascript code:

  $(document).ready(function() {


  <label>Materialize Disabled</label>
  <select disabled>
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>


When I say that the style is partially applied I meant that it doesn't look as shown in the materializecss webpage, it looks like if it was disabled.

Source: (StackOverflow)

Two clicks needed to load Modal and SideNav (Meteor with Materialize)

I have a strange problem with my Materialize navigation in Meteor. The weird thing is that when I click a link in the navigation, the sidebar or modal is only loaded on the SECOND click. Thus, I have to click the link once (where nothing happens) and then again for the element to appear. After that, the element loads on any click (only one click is required).

I have never had this problem, and I think it could be a Materialize problem. Before I count materialize out, though, I want to check with you guys and hear if I am possibly calling my JQuery functions wrong or something. Here is the code:


<template name="header">
    {{> sideNav}}
    <div class="nav-wrapper">
      <a rel='nofollow' href="#" class="brand-logo center"><span class="light"></span>hamok</a>
      <ul id="nav-mobile" class="left">
        <li><a rel='nofollow' href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="mdi-navigation-menu"></i></a></li>
        <li><a rel='nofollow' href="#"><i class="mdi-action-search left"></i>Search</a></li>
      <ul id="nav-mobile" class="right">
        {{#if currentUser}}
          <li><a id="logout">Sign out</a></li>
        <li><a class="modal-trigger-login" rel='nofollow' href="#loginModal">Account<i class="left mdi-action-account-circle"></i></a></li>

  {{> loginModal}}

<template name="loginModal">
  <div id="loginModal" class="modal">
    <div class="modal-content">
      {{> atForm}}

<template name="sideNav">
  <ul id="slide-out" class="side-nav">
    <li><a rel='nofollow' href="#!">First Sidebar Link</a></li>
    <li><a rel='nofollow' href="#!">Second Sidebar Link</a></li>




  'click .modal-trigger-login': function() {

  'click #logout': function() {

  'click .button-collapse': function() {

Thank you guys for taking a look!

Source: (StackOverflow)

What packages do I need when using materialize sass source code in a meteor project?

I am using materialize with meteor. I have been using the meteor add materialize:materialize command for installing. This works but I would like to be able to edit the sass files before they compile into css files (so that I can change things like primary color and what not). What I have done so far to achieve this: downloaded the sass source files from and copied them into the client folder. I also added a scss compiler meteor add fourseven:scss. Even after all this on a fresh meteor project somethings are quite right, I am wondering if I am missing a key package for materialize to work? I believe I am probably just missing a package or library for some of the functionality.

Issues experience so far after using setup mentioned below: (there likely to more be more issues)

Issue 1: Waves effect does not disappear - After clicking on a button the wave appear but does not clear the transparency effect afterwards.

Issue 2: Elements disappear on form submit - After submitting a form the form input fields disappear and my other buttons on the page disappear.

Issue 3: Unable to use the materialize icons - When using an icon from materialize it does not show up or uses a different one. If you are wondering what the icons should look like, check here:


$ meteor create test
$ cd test
$ rm test.html test.css test.js
$ meteor add fourseven:scss
$ mkdir client

copied materialize-src into test/client/
created client/main.html


  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>


  <nav class="blue darken-3">
    <div class="nav-wrapper">
      <a rel='nofollow' href="#" class="brand-logo center">

      <!-- EXAMPLE ICONS (in navbar) -->
      <ul class="right">
        <li><a rel='nofollow' href="#" class="tooltipped" data-position="bottom" data-delay="1000" data-tooltip="Map"><i class="mdi-social-public"></i></a></li>
        <li><a rel='nofollow' href="#" class="tooltipped" data-position="bottom" data-delay="1000" data-tooltip="List"><i class="mdi-action-view-list"></i></a></li>
        <li><a rel='nofollow' href="#" class="tooltipped" data-position="left" data-delay="1000" data-tooltip="Logout"><i class="mdi-content-clear"></i></a></li>

  <!-- EXAMPLE FORM -->
    <div class="row">
      <div class="input-field">
        <input id="email" type="email">
        <label for="email">Email</label>
    <div class="row">
      <div class="input-field">
        <input id="password" type="password">
        <label for="password">Password</label>
    <div class="row">
      <button class="btn-large col s12 blue darken-3 waves-effect waves-light" type="submit" name="">Log In</button>
  <div class="row center-align">
    <a class="btn-flat waves-effect waves-teal">Create Account</a>
  <div class="row center-align">
    <a class="btn-flat waves-effect waves-teal">Forgot Password</a>

Thank you for any help!

Source: (StackOverflow)

Materialize CSS Framework throws error

Running Meteor 1.1.6 with Materialize 0.96.1 and having no issues until I start up meteor one morning and get a white screen. Console (firebug) says:

SyntaxError: unterminated string literal
var c = "input[type=text], input[type=passw

found in the generated file materialize_materialize.js

Stepping back in version history I can't seem to find anything glaring that I changed which might be the culprit. Looking at the source code I found the code respective code but the line is actually terminated:

var c = "input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], textarea";

Anyone else ever see this issue, or have any ideas on how to fix it?

Update: Seems that Meteor is generating the file just fine but stops mid-string in the above error. After the string cut off, the file continues with:

/* Exports */
if (typeof Package === 'undefined') Package = {};
Package['materialize:materialize'] = {
  Materialize: Materialize


Oddly enough, this does not happen on my coworker's machine (he's using OSX 10.10.3, while I'm on Windows 7).

2nd Update: Also tested this issue on an Ubuntu 14.04 VM, and there were no issues - the app ran just fine. Thinking it might have something to do with the Meteor version on Windows, I blew away my install, downloaded the installer, and re-installed Meteor on my machine. What d'ya know, it worked.

Not going to mark this with an actual answer yet as I do not know what the cause of the issue is, other than something went wrong with Meteor itself - I think.

Source: (StackOverflow)