Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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
Comment #1
rahulkrishna CreditAttribution: rahulkrishna commentedDefining 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.
Comment #2
dshields CreditAttribution: dshields at OpenConcept Consulting Inc. commentedMight this be related to this issue?
Maybe it can be patched in a similar way...
Comment #3
GiorgosKif 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
Comment #4
ezoulou CreditAttribution: ezoulou commentedthank 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!
Comment #5
amaisano CreditAttribution: amaisano commentedThank 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.
Comment #6
sheldonkemper CreditAttribution: sheldonkemper as a volunteer commented@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.
Comment #7
mstevetodd CreditAttribution: mstevetodd as a volunteer commentedComment #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.
Comment #8
manmeet CreditAttribution: manmeet commentedI 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?
Comment #9
Dom. CreditAttribution: Dom. as a volunteer and at ACINO commented