Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Nov 26 19:25
    amn31 opened #6618
  • Nov 25 09:49
    stefan-niedermann commented #6606
  • Nov 21 19:00
    BenBitDesign commented #6617
  • Nov 21 18:59
    BenBitDesign commented #6617
  • Nov 21 13:52
    doughballs commented #6617
  • Nov 21 06:51
    BenBitDesign opened #6617
  • Nov 20 09:30
    doughballs commented #6616
  • Nov 20 09:06
    melineWb opened #6616
  • Nov 20 09:02
    melineWb commented #3624
  • Nov 20 07:49
    ABDULAZIZ94 commented #5858
  • Nov 19 10:54
    doughballs commented #6615
  • Nov 18 09:59
    Deep-Codes commented #6615
  • Nov 18 03:42
    Smankusors commented #6615
  • Nov 18 03:08
    johnknapp commented #6615
  • Nov 16 17:28
    shameekagarwal commented #4721
  • Nov 16 17:09
    CristianMisake commented #5069
  • Nov 13 13:46
    doughballs commented #6300
  • Nov 13 13:46
    doughballs commented #6300
  • Nov 13 13:22
    les113 opened #6615
  • Nov 13 13:21
    les113 commented #6300
Alex Chervet
@alexchervet
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
More like this.
"low_priority" will work as a replacement...I just think it could be better.
Anthony House
@tuffant21
They are, but I don't think I've ever seen them active in it. There are some devs on the side who are working on a new version. But I don't think they have access to change material icons. They're all google icons
Nice icon though!
computerwiz12890
@computerwiz12890

Ahh, gotchya.

Thanks! I made it myself in Paint.net. ^_^

Sean Doherty
@doughballs
@computerwiz12890 have you got the Startup theme btw? Well worth it, only £29. Anyway, in that theme they have designed some new icons and include them as a font (simple-line-icons), so they can be used using the i tag. I haven't played around with them, but that would be a really quick and easy way to design your own icons and then use them in your project 'the materialize way'.