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.


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)

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)

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() {
  $('select').material_select();
});

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)

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

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

http://localhost:9000/jspm_packages/github/Dogfalo/materialize@0.96.1.js

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)

How to get the value form Materialize's Switches?

I'm using the Materialize library and I'm trying to retrieve the value from the switches component, but it always returns on regardless of it being turned on or off.

Is there a way to determine if it's switched on or off, programatically?


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'>
    <li>
      <input type="checkbox" name="report[topics][409928004]" id="report_topics_409928004" value="1" />
      <label for="report_topics_409928004">Engagement</label>
    </li>
    <li>
      <input type="checkbox" name="report[topics][669658064]" id="report_topics_669658064" value="1" />
      <label for="report_topics_669658064">Appraisal</label>
    </li>

    <!-- etc. -->

</ul>

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.

screenshot


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: http://materializecss.com/forms.html

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

thank you

EDITED:

javascript code:

  $(document).ready(function() {
    $('select').material_select();
  });

css:

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

image: http://i.stack.imgur.com/AV927.png

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:

header.html:

<template name="header">
  <nav>
    {{> 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>
      <ul id="nav-mobile" class="right">
        {{#if currentUser}}
          <li><a id="logout">Sign out</a></li>
        {{else}}
        <li><a class="modal-trigger-login" rel='nofollow' href="#loginModal">Account<i class="left mdi-action-account-circle"></i></a></li>
        {{/if}}
      </ul>
    </div>
  </nav>

  {{> loginModal}}
</template>

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

<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>
  </ul>
</template>

header.js

Template['header'].helpers({

});

Template['header'].events({
  'click .modal-trigger-login': function() {
    $('.modal-trigger-login').leanModal();
  },

  'click #logout': function() {
    Meteor.logout();
  },

  'click .button-collapse': function() {
    $(document).ready(function(){
      $(".button-collapse").sideNav();
    });
  }
});

Thank you guys for taking a look!


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)

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 http://materializecss.com/getting-started.html#download 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: http://materializecss.com/icons.html

Setup:

$ 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

main.html:

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

<body>

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

      <!-- 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>
      </ul>
    </div>
  </nav>

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

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)

SQLite FTS4 with preferred language

I have an SQLite table that was generated by using the FTS4 module. Each entry is listed at least twice with different languages, but still sharing a unique ID (int column, not indexed). Here is what I want to do: I want to lookup a term in a preferred language. I want to union the result with a lookup for the same term using another language. For the second lookup though, I want to ignore all entries (identified by their ID) that I already found during the first lookup. So basically I want to do this:

WITH term_search1 AS (
    SELECT *
    FROM myFts
    WHERE myFts MATCH 'term'
    AND languageId = 1)
SELECT *
FROM term_search1
UNION
SELECT *
FROM myFts
WHERE myFts MATCH 'term'
AND languageId = 2
AND id NOT IN (SELECT id FROM term_search1)

The problem here is, that the term_seach1 Query would be executed twice. Is there a way of materializing my results maybe? Any solution for limiting it to 2 Queries (instead of 3) would be great.

I also tried using recursive Queries, something like:

WITH RECURSIVE term_search1 AS (
    SELECT *
    FROM myFts
    WHERE myFts MATCH 'term'
    AND languageId = 1
UNION ALL
    SELECT m.*
    FROM myFts m LEFT OUTER JOIN term_search1 t ON (m.id = t.id)
    WHERE myFts MATCH 'term'
    AND m.languageId = 2
    AND t.id IS NULL
)
SELECT * FROM term_search1

This didn't work neither. Apparently he just executed two lookups for languageId = 2 (is this a bug maybe?).

Thanks in advance :)


Source: (StackOverflow)

Materialize CSS - Select Doesn't Seem to Render

I am currently working with materialize CSS and it seems I've gotten snagged with the select fields.

I'm using the example provided from their site but unfortunately it it's rendering in the view whatsoever. I was wondering if someone else might be able to help.

What I am trying to do is create a row with 2 end spacers that provide padding - then within the inner two row items there should be a search text input and a search select dropdown.

This is the example I'm working from: http://materializecss.com/forms.html

Thank you in advance.

Here is the snippet of code in question.

<div class="row">
<form class="col s12">
    <div class="row">
        <div class="input-field col s2"></div>
        <div class="input-field col s5">
            <input id="icon_prefix" type="text" class="validate" />
            <label for="icon_prefix">Search</label>
        </div>
        <div class="input-field col s3">
            <label>Materialize Select</label>
            <select>
                <option value="" disabled="disabled" selected="selected">Choose your option</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </div>
        <div class="input-field col s2"></div>
    </div>
</form>


Source: (StackOverflow)