Matirial box annoying to work with

[godalming123]

Expected Behavior

When initialising a matirial box element matirlize does not generate a div around the image and instead just leaves the image on it own

Current Behavior

Matirial box generates a div around the image meaning that if you set

margin: 0 auto

On your image then the div takes 100% veiwport width making the narrower image flash from the center to the left for a second when opening the image up.
Demo: https://codepen.io/godalming123/pen/eYeBROe?editors=0010

Possible Solution

Just don't generate a div around the image

Steps to Reproduce (for bugs)

See my pen: https://codepen.io/godalming123/pen/eYeBROe?editors=0010

Context

This issue has affected me as the images on my site have margin 0 auto so when I open them they flash to the left.

[Smankusors]

sorry for the late reply.

hmm I'm not sure about this. I need more information about why is this an issue? I do think this can be overrided by the css only though 💭

[godalming123]

Yes it can but it's not the best developer experience.

[jshster]

How odd... the display of your example on CodePen is nothing like the display on the Materialize documentation website. On the Materialize site it's a smooth experience and certainly doesn't come in from the left. Wondering why the differences because it looks like you've implemented just the core function. I'm not sure why there is a need for a bounding DIV. I would have thought the more you can leave objects as their native type the better.

[godalming123]

I think that's the problem materialize generates a bounding div with full width and my image has margin auto so it is centered this is not accounted for when JS animates the transition so the image flashes to the left and yes this can be overused but it would be easier not to and I see no reason for the bounding div

[gselderslaghs]

Material Box works as expected when applying the correct wrappers, classes and additional styling
The "glitchy effect" you are mentioning can be avoided by applying the materialboxed class to the parent container instead of on the image itself
Codepen example

Should we update documentation and add a wrapping element instead of applying the class directly onto the image?