Google Material Design and Infinite Scroll

So, I am using infinite scroll ([url removed, login to view]).

However when the main content is inside of "mdl-js-layout" the infinite scroll function does not work (shown below)

So, if I remove the `mdl-js-layout` in the most outer div, then infinite scroll works otherwise it does not work.

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-drawer">

<header class="mdl-layout__header">



<main class="mdl-layout__content">

<div class="rfp_hide" id="rhm_post_show">


if ( get_query_var('paged') ) {

$paged = get_query_var('paged');

} elseif ( get_query_var('page') ) {

$paged = get_query_var('page');

} else {

$paged = 1;


$args = array(


'posts_per_page' => 5,

'orderby' => 'date',

'order' => 'DESC'


$loop = new WP_Query( $args );

global $post, $paged;

while ( $loop->have_posts() ) : $loop->the_post();


<div class="rhm_post_container">



<?php endwhile; ?>

<?php wp_reset_postdata(); ?>


<nav id="rh_nav_below">


<li class="rh_nav_previous"><?php previous_posts_link( '&laquo; PREV', $loop->max_num_pages) ?></li>

<li class="rh_nav_next"><?php next_posts_link( 'NEXT &raquo;', $loop->max_num_pages) ?></li>






var container = [url removed, login to view]('#rhm_post_show');

var msnry = new Masonry( container, {

// options

itemSelector: '.rhm_post_container',

gutter: 10


var ias = $.ias({

container: '#rhm_post_show',

item: '.rhm_post_container',

pagination: '#rh_nav_below',

next: '.rh_nav_next a',

delay: 100


[url removed, login to view]('render', function(items) {

$(items).css({ opacity: 0 });


[url removed, login to view]('rendered', function(items) {

[url removed, login to view](items);


[url removed, login to view](new IASSpinnerExtension());

[url removed, login to view](new IASNoneLeftExtension({html: '<div class="ias-noneleft" style="text-align:center"><p><em>You reached the end!</em></p></div>'}));


I asked the developer and got the following response:([url removed, login to view])

> MDL is targeting static content for now, so use-cases with infinite scroll are not supported by us right now. However, there are people who have made MDL work with dynamic sites and you can probably get valuable help by heading over to StackOverflow and using the material-design-lite tag.

Does anyone what I should try? If you think you can solve it, then please contact me for payment option.


Compétences : jQuery / Prototype, PHP

en voir plus : ul com, text em, material design css, infinite design, html 5 google sites, html 5 align, google material design lite, google js, google-docs.com, google docs.com, global response, global p, docs google com, google style text ads script, horizontal text scroll web design, change design infowindow google map, design path google maps, seo web design freelancing google adsense, design kart google sketchup, design specification google calendar, free mafia style text based scripts, scroll writing design, google maps api text box

Concernant l'employeur :
( 18 commentaires ) Calgary, Canada

Nº du projet : #8516747

Décerné à:


I'm interested in the job and am ready to start working with you. If you are interested please contact me

%selectedBids___i_sum_sub_7% %project_currencyDetails_sign_sub_8% CAD en 3 jours
(3 Commentaires)

1 freelance fait une offre moyenne de $25 pour ce travail


A proposal has not yet been provided

%bids___i_sum_sub_32% %project_currencyDetails_sign_sub_33% CAD en 1 jour
(1 Évaluation)