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

How to get mutiselect dropdown in Materialize css?

I am working on a project which uses Materialize css for front end.

Is there any way to get multi select option for dropdown in Materialize css ?

Any piece of info would be helpful.

Source: (StackOverflow)

Meteor with framework materialize

I planned to use materialize:materialize package to a meteor app. As I can understand materialize use a lot of javascript for effects, collapsing and so on. Meteor has its own event handling but I suppose materialize will use jquery (I suppose I don't need to add jquery, it's included, or?) and will be running outside meteor events.

Is it enough to just add the package and everything will work, not just the look but also the javascript (feel)? I am trying to get it to work with a materialize template I bought and its not optimezed for meteor so I have problems to make it work.

Has anyone try this setup and is there any suggestions for good sources.

Source: (StackOverflow)


Styling a button in the Form::submit

In the standard method a submit button in my form is as

<button class="btn waves-effect waves-light center signup_btn" type="submit">
    <i class="mdi-content-send right"></i>

I am using materialize.css Now how can i achieve the same UI using the FormBuilder of the Illuminate\Html package

{!! Form::submit('Submit',['class' => 'btn waves-effect waves-light center signup_btn' ]) !!}

But this does not render the button correctly. The "waves-effect" class causes the rest of the classes be applied to <i> tag. How to fix this ?

Source: (StackOverflow)

Materialize: dropdown in "if" statement doesn't work

I tried to implement a dropdown list that is only visible when the user is signed in. The dropdown list works when outside the "if" statement but not inside. The buttons "Foo" and dropdown button are shown, however it doesn't "dropdown".


<!-- Header -->
<template name="header">
    <div class="nav-wrapper">
        <a  class="brand-logo" rel='nofollow' href="{{pathFor 'home'}}">Logo</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
            {{#if currentUser}}
                <!-- dropdown1 trigger -->
                    <a class="dropdown-button" rel='nofollow' href="#!" data-activates="dropdown1">
                        <i class="mdi-navigation-more-vert"></i>

                <li><a rel='nofollow' href="#">Foo</a></li>
                <li><a rel='nofollow' href="{{pathFor 'signin'}}">Sign in</a></li>

            <li><a rel='nofollow' href="{{pathFor 'about'}}">About</a></li>

<!-- dropdown1 structure -->
<ul id="dropdown1" class="dropdown-content">
    <li class="signout"><a rel='nofollow' href="#!">Sign out</a></li>


Template.header.rendered = function () {
        belowOrigin: true // Displays dropdown below the button

What could be the problem?

Source: (StackOverflow)

Materialise wave affect doesn't work properly in Safari

I use Materialise and a try to activate waves style:

<a class="btn-floating btn-large waves-effect waves-light red" >
     <i class="mdi-content-add"></i>

Wave effect works properly in Chrome/Android but not in Safari/iOS.

For some reason when I click button, the wave distributes in rectangle and not in circle.

I tried to override style but it doesn't make sense:

  border-radius: 50% !important;

Here is CODEPAN. Try to open in Chrome and after in Safari.

Any ideas how to fix it?


For now light workaround is to reduce wave size. This is what I did so far:

.my-btn-floating .waves-ripple {
    width: 8px !important;
    height: 8px !important;


[EDIT 2]

It also happens on Android S3/4 but not on Nexus4/5

Source: (StackOverflow)

Cant add collection_select while using materialize rails 4.2

I have created a categories model with a migration with a category_id (basically everything Mackenzie Child does in his video https://www.youtube.com/watch?v=814gCeOpM4o from 25minutes) and I want it to show up in my form.

It doesn't work, my collection_select wont show up on screen but it will show up in the source code, and when I 'remove' the css- framework materialize.

My code:

<div class="container"> 
<div class="row">
    <%= form_for @post do |f| %>
        <%= f.collection_select :category_id, Category.all, :id, :name, { prompt: "Choose a category" } %>
        <%= f.label :title %>
        <%= f.text_field :title %>
        <div class="row">
            <div class="input-field col s12">
                <%= f.label :text %>
                <%= f.text_area :text, class: "materialize-textarea" %>

        <%= f.label :creator %>
        <%= f.text_field :creator %><br>
        <%= f.submit %>
    <% end %>   

How it's displayed in the source code:

    <select name="post[category_id]" id="post_category_id"><option value="">Choose a category</option>
        <option value="1">Marketing</option>
        <option value="2">Technology</option>
        <option value="3">Programming</option>
        <option value="4">Health and Fitness</option>

Source: (StackOverflow)

converting from bootstrap to materialize

Is it possible to convert a website that uses bootstrap to use materialize CSS? there is a lot of overlapping between those two frameworks, but I want to know if there is any feature in bootstrap that materialize misses.

Source: (StackOverflow)

How to dynamically modify