EzDev.org

materialize

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


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 ?


Source: (StackOverflow)

How to include materialize-css npm package with webpack

I'm writing a client-side app that is using Webpack, and I cannot figure out how to require the materialize-css package. I'm using Henrik Joreteg's hjs-webpack package, and with this the yeticss npm package is included by doing an import in a sass file (e.g. @import 'yeticss'), but this doesn't work for materialize. Requiring it straight up in the code (e.g. import 'materialize-css' in a JS file) like any other package also doesn't work.


Source: (StackOverflow)

How to create autocomplete form with MaterializeCss?

I am looking for autocomplete form for MaterializeCss, any plugins for this? i has try to use select2 but that's css not looks good


Source: (StackOverflow)

Make materialize labels move out of input box when input box is filled via javascript

Normally, with Materialize, the labels for text input boxes show up inside the input boxes until a user enter selects the box and enters text in it. However, when a box's value is filled via javascript, the label does not move out of the way. It stays in the box and overlaps with the text entered. Is there a way to trigger the label transition with javascript as well, so this doesn't happen?


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)

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

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


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


Source: (StackOverflow)

Text input fields sometimes not responding because of labels

I'm making a website using materializecss framework and encouraged a bug where sometimes inputs are not responding correctly.

This sometimes happens when clicking for example on first input, and that targeting higher part of the second input. What happens it that first input is still being clicked.

It seems that

 <label>name1</label>

Are causing it. Is there any way to solve this problem?

Here is the example.


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 Modal doesn't work on starter template

Recently i switched to materialize (it's based on Bootstrap i guess) and i'm trying to make modal work. it just doesn't show up. the button is there but it triggers nothing. I'm using starter template from Materialize website.

All i did was copy and paste modal code from Materialize modal page. I put the code in starter template but it doesn't work. i also tested it on another theme based on materialize but that didn't work either.

also jQuery is loaded properly.

edit: it's index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
  <title>Starter Template - Materialize</title>

  <!-- CSS  -->
  <link rel='nofollow' href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  <link rel='nofollow' href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
  <nav class="light-blue lighten-1" role="navigation">
    <div class="container">
      <div class="nav-wrapper"><a id="logo-container" rel='nofollow' href="#" class="brand-logo">Logo</a>
        <ul class="right">
          <li><a rel='nofollow' href="#">Navbar Link</a></li>
        </ul>

        <ul id="nav-mobile" class="side-nav">
          <li><a rel='nofollow' href="#">Navbar Link</a></li>
        </ul>
        <a rel='nofollow' href="#" data-activates="nav-mobile" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
      </div>
    </div>
  </nav>
  <div class="section no-pad-bot" id="index-banner">
    <div class="container">
      <br><br>
      <h1 class="header center orange-text">Starter Template</h1>
      <div class="row center">
        <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
      </div>
      <div class="row center">
        <button data-target="#modal1" class="btn modal-trigger">Modal</button>
      </div>
<!-- Modal Structure -->
  <div id="modal1" class="modal modal-fixed-footer">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
      <a rel='nofollow' href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a>
    </div>
  </div>
      <br><br>

    </div>
  </div>


  <div class="container">
    <div class="section">

      <!--   Icon Section   -->
      <div class="row">
        <div class="col s12 m4">
          <div class="icon-block">
            <h2 class="center light-blue-text"><i class="mdi-image-flash-on"></i></h2>
            <h5 class="center">Speeds up development</h5>

            <p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
          </div>
        </div>

        <div class="col s12 m4">
          <div class="icon-block">
            <h2 class="center light-blue-text"><i class="mdi-social-group"></i></h2>
            <h5 class="center">User Experience Focused</h5>

            <p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
          </div>
        </div>

        <div class="col s12 m4">
          <div class="icon-block">
            <h2 class="center light-blue-text"><i class="mdi-action-settings"></i></h2>
            <h5 class="center">Easy to work with</h5>

            <p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
          </div>
        </div>
      </div>

    </div>
    <br><br>

    <div class="section">

    </div>
  </div>

  <footer class="page-footer orange">
    <div class="container">
      <div class="row">
        <div class="col l6 s12">
          <h5 class="white-text">Company Bio</h5>
          <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>


        </div>
        <div class="col l3 s12">
          <h5 class="white-text">Settings</h5>
          <ul>
            <li><a class="white-text" rel='nofollow' href="#!">Link 1</a></li>
            <li><a class="white-text" rel='nofollow' href="#!">Link 2</a></li>
            <li><a class="white-text" rel='nofollow' href="#!">Link 3</a></li>
            <li><a class="white-text" rel='nofollow' href="#!">Link 4</a></li>
          </ul>
        </div>
        <div class="col l3 s12">
          <h5 class="white-text">Connect</h5>
          <ul>
            <li><a class="white-text" rel='nofollow' href="#!">Link 1</a></li>
            <li><a class="white-text" rel='nofollow' href="#!">Link 2</a></li>
            <li><a class="white-text" rel='nofollow' href="#!">Link 3</a></li>
            <li><a class="white-text" rel='nofollow' href="#!">Link 4</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="container">
      Made by <a class="orange-text text-lighten-3" rel='nofollow' href="http://materializecss.com">Materialize</a>
      </div>
    </div>
  </footer>


  <!--  Scripts-->
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="js/materialize.js"></script>
  <script src="js/init.js"></script>
  <script> $(document).ready(function(){
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
    $('.modal-trigger').leanModal();
  });</script>

  </body>
</html>

modal code:

<!-- Modal Trigger -->
  <a class="waves-effect waves-light btn modal-trigger" rel='nofollow' href="#modal1">Modal</a>

  <!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
      <a rel='nofollow' href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
  </div>

Here's a demo of Starter template

Here's download link of template


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)

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)