956
questions
-2
votes
1
answer
53
views
I'm stuck for 5 days on solving an issue with node.js
I'm taking the web application course and have been building my own website on the side.
I'm trying to have items.js grab contents from the posts(.html) save them in an object, and then app.js will ...
-1
votes
0
answers
22
views
How to reverse the default order of item display in Masonry [closed]
I'm using Masonry in conjunction with Bootstrap 5 to make a photo gallery page on my website. This is working nicely BUT the default display order for Masonry is by file name (from the camera) in ...
- 1
0
votes
0
answers
28
views
Swiftui masonry with HStack = slow perfomance
I've tried to create masonry layout with SwiftUi by using HStack with two LazyVStack inside it. It works well as masonry but the performance not as good. Its just a simple masonry layout for two ...
- 1
0
votes
1
answer
42
views
Bricks Theme for WooCommerce + Masonry Product Columns
I am new to Bricks so excuse my ignorance. I am trying to make the Products module on a Page appear with a masonry effect.
I am enquing both masonry.js and imagesloaded which are available via core ...
- 554
0
votes
0
answers
6
views
Masonry layout with the same equal columns and spacing [duplicate]
I have a problem with developing following columns layout:
enter image description here
Please note: i dont exatcly know how many rows and columns i will have, but as per image it will be 3 columns ...
0
votes
1
answer
23
views
Masonry overlaps when switching tab-panels
I'm having problem with masonry overlaps when switching tab-panels.
On load window, on tab1 masonry active.
when I press tab2, tab2 masonry active.
But, problem occurs after this.
When I click back ...
- 11
0
votes
0
answers
25
views
react JS with Masonic infinite load - loading content before render causes div width to remain 0
I'm currently having an issue with the masonic api where I wait to render the page until I have the initial content loaded.
I have an example here. The page will load after the load screen but you ...
- 191
0
votes
0
answers
57
views
Responsive masonry layout with just three elements [duplicate]
I want to achieve an HTML/CSS template with three dynamic content divs such that
when #2 is non-blank (and in this case biggest of all) put #3 to the bottom of #1 and to the left of #2
when #2 is ...
- 2,526
0
votes
0
answers
37
views
Masanry layout in overlapping on the frontend
I am using elementor with the premium addons i am showing the Pinterest feeds but on the frontend the feeds items are overlapping in the masonry layout
it works when i assign a fix height to the items ...
- 1
0
votes
0
answers
59
views
Masonry.js elements going on a single column after updating the amount of elements
I have a number of images that I have in 5 columns. I can sort those elements using tags, this dynamically changes the amount of images shown.
Issue :
All is normal and well at first. But when I ...
- 1
0
votes
1
answer
87
views
Is there a way to resize masonic columns when sidebar close?
I am trying to implement a masonry style layout in my reactjs website the package that i am currently using is masonic , Out of the other packages that I have tried it works the best so far but I am ...
0
votes
0
answers
109
views
Masonry(cascading grid layout library) script loading only after editing and saving a file in VS Code in React
first post here.
I am trying to create a Masonry(https://masonry.desandro.com/) photo portfolio, so far I got it working only by accident - editing the file and saving it made Masonry work correctly e....
0
votes
0
answers
22
views
WooCommerce lazyload breaking masonry grid
After activating the WooCommerce lazyload feature, the jQuery Masonry grid on the shop page is no longer working properly.
Is there some event triggered by WooCommerce's lazyloading which I can ...
- 133
0
votes
0
answers
105
views
Tailwind grid gallery, First column height is large causing whitespace
Hi I'm designing a gallery with Tailwind and Vuejs. I'm having trouble creating a masonry type effect in gallery either using flex or grid layout system.
The first image is the cover image and is ...
- 122
1
vote
1
answer
158
views
How to stop masonry image to stack up on top of each other?
I'm trying to create a photo gallery based on bootstrap 5 example on masonry which does works fine. I also implemented modal boxes with it and it also works fine.
To keep it short, the only thing I ...
- 11
0
votes
1
answer
45
views
How to remove a rogue margin when using Isotope.js for masonry layout?
I have made the masonry grid gallery layout using Isotope and Vanilla JS. Everything seems to work fine, but on resizing there is some kind of the right margin on the masonry element, which is getting ...
- 16
1
vote
3
answers
2k
views
CSS Grid with variable height to make it work like masonry layout
I'm trying to create masonry layout using css grid layout. All items in grid have variable heights. The items in the next row should stack to available space of the items in the previous row. i tried ...
- 243
0
votes
0
answers
9
views
Is there anyway to make a masonry / flexbox layout with a fixed width instead of height? [duplicate]
I'm wanting to put images across 3 columns. I want equal distance between the columns, however I want the heights to vary and be automatic to whatever height the image lands on from it's original ...
- 1
1
vote
2
answers
237
views
How to create this masonry layout
Can anyone please guide me how to created this type of masonry layout? Is it possible to create this type masonry gallery using display: grid and how to overlap the layers? Is there any other way to ...
- 11
2
votes
1
answer
450
views
Masonry Grid Comprising N React Components
I am trying to achieve the popular pinterest masonry grid view in my react project. I am aware there are countless resources online that would help me achieve this but I can't quite find one for my ...
- 355
0
votes
0
answers
50
views
Masonry does not work with html added after loading (using js)
i add html to the page from json file using append and then try to build the correct grid using masonry
wrapper = `
//here html
`;
$('#service_its').append( wrapper );
jQuery('.masIts'...
- 23
0
votes
1
answer
1k
views
mantine grid like masonry
Hi ladies and gentleman :)
I´m building an react app. There I want to build a grid like masonry with mantine. The width and the height of the components that are shown, have to be autofill the grid, ...
- 3
0
votes
1
answer
226
views
CSS: 4 items rendered in 2 columns when using column-count: 3
I wanted to create a masonry layout of 3 columns to render items with same width but different height but then when I tried the code bellow I saw the third column is empty which seems a bit weird. can ...
1
vote
3
answers
655
views
How to align items vertically by columns, BUT not align them horizontally inside columns
I made a sketch of the layout that I need to make: drawing of the desired layout
My problem is:
how to make articles "4" and "5" position themselves according to the height of the ...
- 13
0
votes
1
answer
175
views
I don't know how to maintain the height of an image in a masonry when the resolution of the screen changes
I have created this masonry on my website using CSS (picture 1).
picture 1
It appears ok on my screen but when I minimize the browser window the height of the large image on the left doesn't match the ...
- 3
1
vote
0
answers
79
views
Masonry Desandro grid height not fit the items after append item with ajax
This my first init code (Before append item with ajax):
$('#edrea-ajax-wrapper').imagesLoaded( function() {
$('#edrea-ajax-wrapper').masonry({
itemSelector: '.edrea-card',
...
- 21
0
votes
0
answers
47
views
Lazy loading not workin in my angular cmponent
<ngx-masonry class="menu-card-main" [options]="myOptions" [ordered]="true">
<mat-card ngxMasonryItem class="masonry-item menu-card" *ngFor="let ...
1
vote
0
answers
126
views
How to add multiple jQuery isotope masonry gallery layouts to same page with dropdowns
I am trying to place multiple masonry layouts on one page using https://codepen.io/desandro/pen/GBJERB as a guide
<div class="filters">
<div class="ui-group">
&...
- 57
1
vote
2
answers
234
views
Masonry and Bootstrap not rendering properly when custom font used (on a fresh load)
I am following this Masonry & Bootstrap example.
And it works well until I am trying to use a custom Font. Then if the final boxes size is different with the custom Font that without it, the ...
- 38.3k
0
votes
1
answer
228
views
Centering CSS Masonry Layout
I made a simple masonry layout using css grid.
My requirement is that I wanted a maximum of 8 columns and make it responsive with the screen size.
Everything works great until I have >=8 bricks in ...
- 15
0
votes
2
answers
250
views
Text Positioning in Masonry Cards with Html and CSS
For days I've been trying to find a way to make the headlines and texts of the individual Masonry cards occupy certain positions without affecting the other cards. I almost had a solution in the ...
user19244147
0
votes
1
answer
91
views
Call Masonry layout script on elements created by AJAX
I'm using this Masonry script:
var $container = $('.grid');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.grid-item',
columnWidth : '.grid-sizer',
gutter: ...
- 23
0
votes
1
answer
214
views
Masonry effect on hover only? card expands on hover, changes other cards height too
I'm trying to create a hover effect like this
the card expands on hover, showing the title, icon, content and click here button and other cards while not being hovered should only show title and icon ...
1
vote
0
answers
107
views
React components losing styling on rerender
I'm using @egjs/react-infinitegrid (https://naver.github.io/egjs-infinitegrid/) to create a Masonry grid of image components to form a gallery on my GatsbyJS website. I would like to be able to show a ...
- 334
0
votes
1
answer
352
views
React not taking local images
So I use masonry to create a image gallery.
The structure is like this
const images = [
"https://res.cloudinary.com/dbmsicu5t/image/upload/v1660382881/1_svyvcu.png",
"...
- 1
0
votes
1
answer
822
views
How to place this line > data-masonry='{"percentPosition": true }' in XSLT document without breaking it
I would like to use the Bootstrap Masonry described here https://getbootstrap.com/docs/5.0/examples/masonry/ in SobiPro with Joomla 4 Cassopedia Tempalte.
I need a div like this -
<div class="...
2
votes
2
answers
209
views
Masonry layout works incorrectly sometimes, but it works after reloading
https://imagefree.com/en
This is my website, and I have used massonry library. The framework is laravel.
This is my code
<script>
document.addEventListener("DOMContentLoaded", ...
- 37
0
votes
0
answers
484
views
How to display bootstrap cards in pinterest like masonry style?
I have created layout in bootstrap 4.6 grid layout but in between cards row space are there. so, I want to make grid layout cards like pinterest style layout.i used masonry-layout package in nuxt js. ...
- 1,971
1
vote
0
answers
37
views
Using Masonry, focus changes when a new item is added to the grid, forcing scroll
I'm using Masonry JS from https://masonry.desandro.com/
My issue is that the focus changes as soon as a new item is added.
In my code, new items are appended at the beginning of the grid.
But, if I'm ...
- 326
0
votes
2
answers
3k
views
React MUI - Masonry mobile responsive
I'm new to react
I'm trying to figure out how I can make a Masonry image grid - mobile resonsive.
The idea is that I want the images to stack on top of each other on mobile view.
The Masonry grid ...
- 265
4
votes
3
answers
2k
views
How to render the item horizontally (Masonry Layout )?
I would like to render the items horizontally while the page load, refer to following images
<section
tabindex="-1"
class="relative mx-8 mt-10 mb-20 max-w-7xl focus:...
- 314
0
votes
0
answers
325
views
Is there a way to make masonry layouts in css with varied div sizes
Ideally I would like to make a layout that has automatically sized rows and columns that fits the div sizes. I want to achieve something like this Ideal Layout.
Where each div is its own size and ...
- 1
0
votes
1
answer
231
views
Bootstrap 5 & Masonry - Align 1 big picture and 4 small ones
I am new to Bootstrap and would like to make a masonry design with one big picture next to 4 small ones in Desktop view. On mobile the pics shall have the same size and align underneath each other.
...
- 5
2
votes
0
answers
495
views
Masonry that always fills full width
I am using Masonry(https://masonry.desandro.com) to display little previews on my website.
I want the masonry to always fit 100% of the allocated area.
To accomplish this, either the width of the ...
- 185
1
vote
1
answer
342
views
masonry effect with images and text
just wondering if any of you tried to achieve a result like in the picture below. Triying to achieve it with flex boxes but not really achieving anything so I'm not sure if that will be even possible ...
0
votes
1
answer
677
views
How to update Masonry on Vue.js 3 updated() lifecycle hook?
I have a question regarding the Masonry layout update. How can I trigger it in the Vue.js (Version 3) lifecycle hook "updated()"?
I have a card grid view like in the following code (using ...
- 3
3
votes
3
answers
2k
views
Material-UI Masonry: Remove space on right side
Using Material-UI, the width of the Masonry Component doesn't fill the width of the parent container. The width of this missing space is exactly the width of the spacing, which makes sense if there's ...
- 265
2
votes
0
answers
748
views
ReactJS - Responsive virtual masonry of selectable and draggable images
I am trying to build the responsive masonry grid of images, and I would like to be able to perform multiselect (with cursor+shift) and rearrange images by being able to drag and drop them.
Is there ...
- 2,557
0
votes
1
answer
2k
views
MUI Masonry with Collapse in an Item Overflows the Parent Width
Let's say we use MUI Masonry and in each of the items there is a Collapse element that is expanded if it gets clicked. If you click an item that needs to be moved to another column, it moves the items ...
- 5,566
0
votes
1
answer
904
views
CSS masonry isn't working; all flex elements end up in one line
My CSS masonry isn't working at all. I've seen hundreds of sites telling how to do this by now and not one of them works at all. I've been trying to fix this for about a week now and I'd really ...
- 723