MaterialBox (Materialize) modal issues

help
1

I’m having a few issues with the Materialize:Materialize package.

I want to create a horizontal gallery of images and use materialbox to allow the user to click on them to make them bigger. The problem is that when clicked, the images are confined to the surrounding DIV (70px height). This is not what is needed but I can’t fix it. Any help offered is appreciated.

Note: This is a mini-code-snippet of a much larger project.

HTML:

<head>
  <title>MaterialBox in Meteor</title>
</head>

<body>
  <h1>Arg ye MaterialBox!</h1>
    <div class="row">
      <div class="col m12">
        Try clicking an image below. I want to try to create an image gallery that scrolls sideways. These are all the same image, but you get the idea.
      </div>
    </div>
    <div class="row">
      <div class="col m12">
        <div style="height: 70px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap;">
          {{> hello}}
        </div>
      </div>
    </div>
</body>

<template name="hello">
  <div class="photo"><img src="/bold.png" style="width: 50px;" class="materialboxed"></div>
  <div class="photo"><img src="/bold.png" style="width: 50px;" class="materialboxed"></div>
  <div class="photo"><img src="/bold.png" style="width: 50px;" class="materialboxed"></div>
  <div class="photo"><img src="/bold.png" style="width: 50px;" class="materialboxed"></div>
  <div class="photo"><img src="/bold.png" style="width: 50px;" class="materialboxed"></div>
  <div class="photo"><img src="/bold.png" style="width: 50px;" class="materialboxed"></div>
  <div class="photo"><img src="/bold.png" style="width: 50px;" class="materialboxed"></div>
  <div class="photo"><img src="/bold.png" style="width: 50px;" class="materialboxed"></div>
  <div class="photo"><img src="/bold.png" style="width: 50px;" class="materialboxed"></div>
  <div class="photo"><img src="/bold.png" style="width: 50px;" class="materialboxed"></div>
  <div class="photo"><img src="/bold.png" style="width: 50px;" class="materialboxed"></div>
  <div class="photo"><img src="/bold.png" style="width: 50px;" class="materialboxed"></div>
  <div class="photo"><img src="/bold.png" style="width: 50px;" class="materialboxed"></div>
  <div class="photo"><img src="/bold.png" style="width: 50px;" class="materialboxed"></div>
  <div class="photo"><img src="/bold.png" style="width: 50px;" class="materialboxed"></div>
</template>

Javascript

if (Meteor.isClient) {
  Template.hello.onRendered(function() {
    $('.materialboxed').materialbox();
  });
}

CSS

.photo {
  display: inline-block;
  margin: 0px 30px;
}
2

I’m going to conclude that the MaterialBox feature of materialize is simply broken for this type of use.

Going forward, I am going to add a non-nested modal to the body element. Upon clicking an image, it will copy the full size image into the modal and display the modal. It’s not elegant and definitely not as nice as the MaterialBox feature, but it will get the job done.