Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jan 22 21:17
    Goku-San commented #5396
  • Jan 22 21:16
    Goku-San commented #5396
  • Jan 17 15:00
    jonasprechtl commented #6074
  • Jan 15 18:49
    Cerothen edited #6623
  • Jan 15 18:48
    Cerothen edited #6623
  • Jan 15 18:48
    Cerothen edited #6623
  • Jan 15 16:34
    alkaphreak opened #6624
  • Jan 13 14:34
    CatalinRadoi commented #2439
  • Jan 13 14:34
    CatalinRadoi commented #2439
  • Jan 13 14:33
    CatalinRadoi commented #2439
  • Jan 13 08:14
    asakew closed #6622
  • Jan 11 22:24
    Cerothen opened #6623
  • Jan 11 21:17
    bugy commented #5958
  • Jan 11 21:16
    bugy commented #5958
  • Jan 11 20:54
    bugy commented #5958
  • Jan 11 10:39
    Smankusors commented #4719
  • Jan 07 23:01
    f1ana closed #2796
  • Jan 06 02:54
    Owolabi-Oluwatosin commented #2876
  • Jan 06 02:52
    Owolabi-Oluwatosin commented #2876
  • Jan 05 05:44
    kethan1 commented #6576
Sean Doherty
@doughballs
After Materialize you should link to your own custom js file. Call it init.js maybe - and put it in a folder called js. In this script you need a single document.ready (see the docs page for each component) and then inside this you put the line or lines for each initialisation as stated in the docs. Word of warning - if using the vanilla Js init, take out the options variable if you are not setting any options.
Alex Rock
@Pierstoval
by the way, initializing without jquery is recommended
Alex Chervet
@alexchervet
Does anyone know why when entering data for an input field using text that the browser has previously cached Materialize assigns a blue background; and how to prevent that?
image.png
<div class="row">
<label >
<h6>First Name</h6>
</label>
<input id="inputFirstName" type="text" name="firstName" class="validate"/>
</div>
...
Entering data via the keyboard (not using the browser cache) works fine
image.png
Alex Rock
@Pierstoval
I think this is a browser feature, not a Materialize one
what browser do you use?
Majd Haj Yehia - BestDr
@BestDr
material.png
guys, why is the picture higher than the textarea? the img has "col s1" classes and the textarea is inside an "input-field" div, which is also inside a row (and it's the parent of the image too), in addition, the textarea has "col s11" classes, so I think they both should be on the same line, what am I missing?
Anthony House
@tuffant21
Try putting the left class on the image
Majd Haj Yehia - BestDr
@BestDr
doesn't help, the issue is with the sizes and not the placement, or the display property
Anthony House
@tuffant21
I think the best you can do it give the image a margin top then. Try to just align it as close as possible with the text input
Alex Chervet
@alexchervet
@Pierstoval Ah, you may be correct! The blue background appears on Chrome, but not Firefox. Thanks.
Vlad
@vzelenko
What's the correct way to import materialize SASS into your site's SCSS file?
I'm using the following line: @import '~materialize-css/sass/materialize';
and when compiled with webpack, I get the error:
== External:     SassError: Invalid CSS after ".blue": expected selector, was ".#007bff"
== External:             on line 14 of node_modules/materialize-css/sass/components/_color-classes.scss
== External:             from line 5 of node_modules/materialize-css/sass/materialize.scss
== External:             from line 9 of assets/stylesheets/_materialize_custom.scss
== External:             from line 4 of /Users/vzelenko/work/Docker/rdadvisors/assets/stylesheets/index.scss
== External:     >> 
== External:        ------^
anyone has an idea?
Anthony House
@tuffant21
You have a period in front of the #. Try removing that
AlphaX2018
@AlphaX2018

After Materialize you should link to your own custom js file. Call it init.js maybe - and put it in a folder called js. In this script you need a single document.ready (see the docs page for each component) and then inside this you put the line or lines for each initialisation as stated in the docs. Word of warning - if using the vanilla Js init, take out the options variable if you are not setting any options.

Sean was so kind to help with the above. as I'll be trying to add the collapsable into an existing wordpress theme, I'm sure there will be already a file that runs document ready. 1) what would the best way to find it? should I perhaps just add the document ready initialisiation into my child theme functions.php? 2) how do i need to amend the initialisation if i dont use any options?

by the way, initializing without jquery is recommended

Does this mean to use the PHP initilisation by copying it into the document ready of my theme?

I'm just seeing that its not PHP, the one initiliastion is javascript and the other jQuery. so the javascript initialisation is recommended if i undrstand correctly.
AlphaX2018
@AlphaX2018
having done further reading, i guess the implementation would look as follows: 1) in my child theme, i'll create a init.js with the initialisation javascript code. 2) in my child theme function.php i add an action to add my new function to the wp_enqueue_scripts to load my init.js. the remaining problem (apart from testing) i see is that this may no be loaded anymore before the /body tag but in the header.
AlphaX2018
@AlphaX2018
ok i found that wp_enqueue has additional variables to allow loading scripts in "footer". I can see the init.js now in the page code, but how can i test if the path and everything is ok? when I click on the js path link, the theme provides an error, i guess for protection reason
Sean Doherty
@doughballs
@AlphaX2018 I’m away at the min but I can show you my enqueues on Monday (if you can wait that long). Also I work exclusively in WP so I can help out in that area.
Sean Doherty
@doughballs
@AlphaX2018 so, just getting back to this - it's really simple:
<?php

// Load scripts (header.php)
function load_materialize_js()
{
    if ($GLOBALS['pagenow'] != 'wp-login.php' && !is_admin()) {

        wp_register_script('materializejs', get_template_directory_uri() . '/js/materialize.min.js', array('jquery'), '1.0.0'); // Materialize
        wp_enqueue_script('materializejs');

        wp_register_script('init', get_template_directory_uri() . '/js/init.js', array('jquery'), '1.0.0'); // Custom JS
        wp_enqueue_script('init');
    }
}


// Load styles
function load_materialize_css()
{
    wp_register_style('materialicons', 'https://fonts.googleapis.com/icon?family=Material+Icons');
    wp_enqueue_style('materialicons');

    wp_register_style('materializecss', get_template_directory_uri() . '/css/materialize.min.css', array(), '1.0.0', 'all');
    wp_enqueue_style('materializecss');

    wp_register_style('style', get_template_directory_uri() . '/style.css', array(), '1.0', 'all');
    wp_enqueue_style('style');
}



// Add Actions
add_action('init', 'load_materialize_js'); // Add Custom Scripts to wp_head
add_action('wp_enqueue_scripts', 'load_materialize_css'); // Add Theme Stylesheet
}

?>
The key is hooking into wordpress core using init here: add_action('init', 'load_materialize_js'), this takes care of positioning the scripts correctly (by the footer). And the same with wp_enqueue_scripts, these are placed in the head.
AlphaX2018
@AlphaX2018

Hi Sean, thanks a lot for your additional help! Really appreciate it! I dug further and found out that my theme uses a template script for the dropdown which is called Select2. I think it may just get too complicated to combine 'Materialize' and Select2

@AlphaX2018 so, just getting back to this - it's really simple:

<?php

// Load scripts (header.php)
function load_materialize_js()
{
    if ($GLOBALS['pagenow'] != 'wp-login.php' && !is_admin()) {

        wp_register_script('materializejs', get_template_directory_uri() . '/js/materialize.min.js', array('jquery'), '1.0.0'); // Materialize
        wp_enqueue_script('materializejs');

        wp_register_script('init', get_template_directory_uri() . '/js/init.js', array('jquery'), '1.0.0'); // Custom JS
        wp_enqueue_script('init');
    }
}


// Load styles
function load_materialize_css()
{
    wp_register_style('materialicons', 'https://fonts.googleapis.com/icon?family=Material+Icons');
    wp_enqueue_style('materialicons');

    wp_register_style('materializecss', get_template_directory_uri() . '/css/materialize.min.css', array(), '1.0.0', 'all');
    wp_enqueue_style('materializecss');

    wp_register_style('style', get_template_directory_uri() . '/style.css', array(), '1.0', 'all');
    wp_enqueue_style('style');
}



// Add Actions
add_action('init', 'load_materialize_js'); // Add Custom Scripts to wp_head
add_action('wp_enqueue_scripts', 'load_materialize_css'); // Add Theme Stylesheet
}

?>
I tried to find help on Stackoverflow how to make a Select2 dropdown expandable, but surprisingly it seems too challenging (I had zero replies).
Given that the theme uses Select2 by default, I dont want to navigate away from that and create even bigger problems.
Duke Yin
@yduke
Hi guys, is there a way to clear a "Chips" programmably? tried $('.chips-initial').material_chip('data'); = '' but not work
$('.chips-initial').material_chip('data') = ''
Bob James
@mobibob
in the materialize grid for columns, what does "push" and "pull" mean? I don't get it. maybe an mention of when it is useful to use.
i have a (line) space between rows. how can I get that removed? one suggestion was to put all "rows" in a single row, but I possibly want to style different rows differently (e.g., alternating colors for even/odd row).
are there pre-defined container/content "role"s? I know about "main", and I have seen others, but I don't know if they are custom or pre-defined.
Duke Yin
@yduke
Hi guys, is there a way to clear a "Chips" programmably?
Sean Doherty
@doughballs
@mobibob re space between rows - there is a margin bottom on every row, take it off.
1 reply
@mobibob re role - are you talking generally, or materialize? https://stackoverflow.com/questions/10403138/what-is-the-purpose-of-the-role-attribute-in-html
Sean Doherty
@doughballs

@mobibob re push pull - "You can easily change the order of your columns with push and pull."

If you look at the example in the docs, the cols are 7-5 initially, but display 5-7 because of the push-pull. It is to reverse the order of the columns at certain screen sizes. Useful depending on content.

GRawhideMart
@GRawhideMart
Hello everyone! Does anybody have an issue with fab buttons?
Anthony House
@tuffant21
image.png
image.png
@mobibob here is an example where I use push and pull. You always want to go mobile first.
Here you can see on mobile, I have col s12 for additional details. Then col s12 for the map.
On desktop however, I have m6 push-m6 l7 push-l5 on additional details and m6 pull-m6 l5 pull-l7 on the map. This causes the map to be to the left of the additional details
@GRawhideMart I have not had any issues with it
@yduke Can you post a codepen?
computerwiz12890
@computerwiz12890
Can I make a suggestion for an icon? Is it possible to add one to the already huge list?
Anthony House
@tuffant21
I think you would have to reach out to google to add an icon :p
Materialize references google's icon here https://material.io/resources/icons/?style=baseline
computerwiz12890
@computerwiz12890
Oh, I thought the developers behind Materialize were in this chat...
It's not a huge deal, I just think the "queue" icon could look more "queuey"
image.png