EzDevInfo.com

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.

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.

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">
    Submit
    <i class="mdi-content-send right"></i>
</button>

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 ?

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.html

<!-- Header -->
<template name="header">
<nav>
    <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 -->
                <li>
                    <a class="dropdown-button" rel='nofollow' href="#!" data-activates="dropdown1">
                        <i class="mdi-navigation-more-vert"></i>
                    </a>
                </li>

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

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

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

header.js

Template.header.rendered = function () {
    $(".dropdown-button").dropdown({
        belowOrigin: true // Displays dropdown below the button
    });
};

What could be the problem?

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>
</a>

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:

.waves-ripple{
  border-radius: 50% !important;
}

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

Any ideas how to fix it?

[Edit]

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;
}

CODEPAN 2

[EDIT 2]

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

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" } %>
        <br>
        <%= f.label :title %>
        <%= f.text_field :title %>
        <br>
        <br>
        <div class="row">
            <div class="input-field col s12">
                <%= f.label :text %>
                <%= f.text_area :text, class: "materialize-textarea" %>
            </div>
        </div>

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

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>
   </select> 

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.

How to dynamically modify in materialize css framework

I just started using the materialize css framework. Now, materialize converts any select tag into a collection of ul and li elements. Before, using JQuery, I was able to do this:

var $selectDropdown = $("#dropdownid");
$selectDropdown.empty();
$selectDropdown.html(' ');
var value = "some value";
$selectDropdown .append($("<option></option>").attr("value",value).text(value));

My html is just a sample select tag:

Before, this was working. Now it fails. What would be an alternative for repopulating this dropdown dynamically using javascript?

Source: (StackOverflow)

Materialize CSS - Sticky Footer

I followed the steps mentioned here - http://materializecss.com/footer.html - to create a Sticky Footer, but the results are not as expected.

I copy pasted the following code to the materialize.min.css file:

  body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }

Source: (StackOverflow)

Meteor + Materialize: collapsable in for each doesn't work

I have a collapsable (materialize) whose elements are created from a for each, however the "dropdown" doesn't work. Everything that isn't in the for each works.

How can I fix this problem?

jobList.html

<template name="jobList">
<ul class="collapsible" data-collapsible="accordion">
    {{#each jobs}}
        <li>
            <div class="collapsible-header">{{title}}</div>
            <div class="collapsible-body"><p>{{description}}</p></div>
        </li>
    {{/each}}
</ul>

jobList.js

Template.jobList.rendered = function () {
    $('.collapsible').collapsible({
        accordion: false
    });
};

Template.jobList.helpers({
    jobs: function() {
        return Jobs.find();
    }
});

The template jobList is in another template that does nothing appart from having {{> jobList}}.

Source: (StackOverflow)

initializing radio buttons added dynamically in materialize

I have an ajax request that generates a modal window with radio buttons dynamically.

I see in the materialize documentation that you can execute material_select() to get selects working correctly however, I don't see in the documentation how to initialize a radio dynamically.

How do i initialize dynamically loaded radio buttons?

For reference here is in example modal that I am loading dynamically:

<div id="import-modal" class="modal modal-fixed-footer">
    <div class="modal-content">
        <h4>Import Data</h4>
        <p>
            <input name="import-group" type="radio" id="import-modal-csv"/>
            <label for="import-modal-csv">Csv</label>
            <div>Import a csv file.</div>
        <p/>
        <p>
            <input name="import-group" type="radio" id="import-modal-excel"/>
            <label for="import-modal-excel">Excel</label>
            <div>Import a excel file.</div>
        </p>
    </div>
    <div class="modal-footer">
        <a rel='nofollow' href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Import</a>
    </div>
</div>

edit 1

i'm adding the above div dynamically via jquery to a parent container on click of a button:

        import_click: function(){
            $.ajax({
                url: 'template/import.html',
                success: function (response) {
                    $('#container').append(response);
                }
            });
        }

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 - 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)

Materialize CSS - Collapsible

I'm working with Materialize CSS and using the collapsible accordion-style element ( http://materializecss.com/collapsible.html ).

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| %>
        <li>
        <% 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/" + friend.id.to_s  %><div style="float:right"><%= (Indico.sentiment(latestTweet.text)*100).round %></div>
          </div>
          <div class="collapsible-body">
            <p>
                <%= latestTweet.text %>
            </p>
          </div>
        </li>
        <% end %>
    </ul>
    </div>

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)