Hi
i don t understand why we have to set the width of the masonry-item in 2 places, in views settings and in css. Also how can I make it work with responsive layout as in the --dev version that should work now?
tx

Simone

Comments

rahulkrishna’s picture

Defining width in the settings actually gives a lot of headache, since you still have to specify it in css. Leaving the width in settings blank, and defining it in css works good!! Same goes for gutter width.

dshields’s picture

Might this be related to this issue?
Maybe it can be patched in a similar way...

GiorgosK’s picture

if you are using a THEME that defines grid (like bootstrap or omega) maybe others
you can use the grid classes inside the view "Row class" setting and you are done

for example you can define "row class" as "col-xs-12 col-sm-6 col-md-4" if you are using bootstrap based theme

ezoulou’s picture

thank you very much @Giorgosk!!!

Here are some details about my view config :
- add a class on view row (ex : col-xs-12 col-sm-6 col-md-4)
- column width : leave empty
- column width units : css selector
- gutter width : leave empty
- fit width : not checked

and then no width need to be set in my theme css!

amaisano’s picture

Thank you #3 and #4. I never in a million years would have figured that out. No matter what number or unit I gave the View settings for width, it kept using the default 30% that came with the CSS on the module, so it seems those fields just don't work. Luckily I am using bootstrap so could use this workaround.

To improve the layout, add the class "container" to the view (Advanced settings for the view display), and in your CSS, target this view and put:

.my-masonry-view > .view-content { margin-left: -15px; margin-right: -15px; } // Simulates bootstrap's '.row' class

...which together, create the proper nesting layout for bootstrap (.container > .row > .col), so you don't get extra padding/space to the left and right of the view.

sheldonkemper’s picture

@ezoulou your instructions worked perfectly in Drupal 7. Since I have created a duplicate site using Drupal 8 and Bootstrap 3 the 'add a class on view row' no longer seems to work. I am always left with three column no matter which grid class is expected.

**Edit**
It appears that .masonry-layout .masonry-item overrides the bootstrap width. This is why it remains as a width of 33%, no matter what screen width. Until a better solution comes round I have deleted .masonry-layout .masonry-item from /modules/masonary/css/masonry.css.

mstevetodd’s picture

Comment #6 by sheldonkemper was a great help to figure out issue getting 2 columns working in D8. Thanks!
Note that the 8.x-1.0-rc2 version has this issue, but it has been addressed in the 8.x-1.x-dev version.

manmeet’s picture

I am using the Masonry view .In my preview its working fine showing the Masonry view but in the frontent its not woking . any suggestion what i miss here?

Dom.’s picture

Status: Active » Closed (outdated)