All Questions
Tagged with grid-layout javascript
89
questions
36
votes
3
answers
18k
views
A way to count columns in a responsive grid
Although I have not yet been able to find an answer, the question is simple: Is there a way, other than brute force, to count the number of columns in a responsive grid?
#grid-container {
width: ...
- 5,771
15
votes
1
answer
7k
views
Responsive Grid Layout Framework [closed]
I want an easy to use grid framework for my current web project. These are the features i would appreciate:
fluid grid layout: boxes that can be aligned horizontally (side by side), each having the ...
9
votes
3
answers
14k
views
Huge whitespace around plotly chart in bootstrap grid
I have a .Net application in which I am trying to create a graph using bootstrap.js and plotly.js.
I have a problem with a huge white-space in my grid when I create a responsive chart. I have figured ...
- 5,196
8
votes
2
answers
5k
views
How to create dynamic drag and drop layout with react-grid-layout
I am using react-grid-layout to make drag-drop and resize components, So i am able to achieve the functionality as mentioned in the doc.
My Issue
I am creating dynamic UI so I am rendering my UI with ...
- 780
4
votes
2
answers
5k
views
Count how many elements in dynamic row
When using CSS Grid Layout to dynamically arrange elements in rows the browser calculates how many items go in a row depending on the size of the viewport. I'm looking for a way using JavaScript to ...
- 11.8k
4
votes
4
answers
5k
views
How to fit image to frame keeping aspect ratio and center in thumbnail list
I want to show list thumbnail box as data grid. each thumbnail image has to be placed in frame with specific width and height (for consistency) as follow:
<div class='frame'>
<img src='...
- 75
4
votes
1
answer
1k
views
With CSS Grids, is there a way to wrap the implicit grid when using grid-auto-flow: column?
I'm trying to implement a layout with a 4x2 grid that flows (using grid-auto-flow: column) into a second 4x2 grid underneath. In essence, I'm trying to cut an 8x2 grid in half and laying the two ...
- 51
3
votes
2
answers
19k
views
CSS grid layout changing column width with javascript
I try setting up a CSS grid layout as follows
.wrapper {
width: 800px;
display: grid;
grid-template-columns: repeat(3, 200px);
grid-template-rows: repeat(5, 200px);
}
Is it possible to ...
- 223
3
votes
0
answers
143
views
CSS Flexbox layout: filling gaps [duplicate]
This is my first time on Stack Overflow. I am new to web design, and have been trying to figure out how to use flexbox in CSS by trying to design a Windows 10-style start menu, made up of a grid of ...
- 53
3
votes
3
answers
1k
views
Only apply jQuery waterfall 'reflow' after the images have loaded
i am using jQuery waterfall for my grid style display.
To stop the common images overlapping issue i have wrapped the waterfall method in a .load() function such as:
$(window).load(function(){
$('#...
- 7,923
2
votes
2
answers
1k
views
Compound nodes overlap while using grid layout in cytoscape.js
I am using cytoscape.js for my visualization project in which I have to show a Hierarchical structure with compound nodes.
So I initially used Cose-Bilkent layout which worked like a charm but the ...
- 167
2
votes
3
answers
644
views
How do I replace for loops with recursion in Javascript?
I have 2 for loops that work well to create a grid with rows and columns, but I would like to improve the solution using recursion as it is more cleaner and recommended (in Functional Programming).
...
user12993865
2
votes
1
answer
472
views
Display loaded elements with different height (pagination) in grid layout
I have several items (elements) with different height but with the same width which I am arranging them with Bootstrap 3. At first, the first 9 of them are displayed in three columns (col-sm-4) and I ...
- 850
2
votes
1
answer
136
views
Use mod to calculate which row was tapped in?
This is more of a math problem really. I have a 3 column grid and am trying to determine which row a tap was in.
I just can't quite work out the math so that a tap of item 0,1,2 will output 0 and a ...
- 2,987
2
votes
1
answer
192
views
Bootstrap - create 100 columns grid that marry the shape of a circle
I have a container that have the shape of a circle. I would like to create a grid with 100 columns inside it. I would like to have a function that would create that grid with a shape that will marry ...
- 7,472
2
votes
2
answers
1k
views
Masonry is leaving several gaps
I have checked all the posts concerning this topic, but none of the solutions worked for me.
This is what my grid looks like:
Here is the jsfiddle and here is the code. HTML:
<!-- jQuery -->
&...
- 4,629
2
votes
2
answers
2k
views
Size div height dynamically based on number of divs
I am making a grid of square divs that begins as 16x16. However, this grid can be resized to be larger or smaller (40x40, 10x10, 60x60 etc.) by clicking the button on the page and filling in the ...
- 197
2
votes
4
answers
2k
views
getting the height of a div to match the width when it shrinks responsively
In the jsfiddle here http://jsfiddle.net/H3VW5/ I have 3 divs where the width is based on perencentage. Is there a simple way (without having an image in it) to get the height to match a certain ...
- 311
2
votes
1
answer
552
views
Masonry gallery with grid layout
I have been searching for a while a Masonry gallery with grid layout, I didn't found it so I decided to do it for myself. I use a customElement with grid layout but I get blocked when I assign ...
- 355
2
votes
1
answer
56
views
Add a feature to my image gallery that allows images to open in new window
I've built an image gallery that lets you click on a thumbnail in a grid which activates it to pop up with a larger version of the image and an image description - however what I want to do now is add ...
- 115
2
votes
2
answers
1k
views
Calculate row height in CSS grid with JavaScript
I made a small CSS grid framework for my new project but soon after, I have realized it has some shortcomings. Problem is, columns don't occupy whole height of a row which in turn prevents me from ...
- 857
2
votes
1
answer
895
views
How to trigger the layout to change?
I've a sticked element which gets the top-alignment from current scroll-offset. Problem is, that the layout is not "retriggerd" if the space from it is free. So there stays a ghost-gap where the ...
- 33k
2
votes
0
answers
200
views
Animating grid layout using CSS variables
I'm trying to animate a grid layout using transitions. As far as I can tell, this should be implemented: https://ishoudinireadyyet.com/
I even found a demo of this working: https://codepen.io/matuzo/...
- 4,113
2
votes
0
answers
165
views
Is there an opensource framework/library for allowing dynamic manipulation of grid layout? [closed]
Normally when I make a website in HTML, I use Twitter Bootstrap grid and specify the layout using "container", "row" and "span" and I place all my content inside these.
I am looking for a mechanism ...
- 374
1
vote
1
answer
809
views
KnockoutJS: Bind array to bootstrap grid with multipe rows
I'd like to take an array like this:
var items = [1,2,3,4,5,6]
and bind it in KnockoutJS so that the output rendered is:
<div class="row">
<div class="col-md-4">1</div>
<div ...
- 4,591
1
vote
1
answer
5k
views
Item is dropped in wrong position using react-grid-layout on ResponsiveReactGridLayout
I am new to react-grid-layout, I have created a sample example with drag and drop using this example https://react-grid-layout.github.io/react-grid-layout/examples/15-drag-from-outside.html. When the ...
- 51
1
vote
1
answer
1k
views
Automatically collapsing vertical spacing between posts in grid theme
I'm trying to make a custom grid-based theme for my wordpress site. One thing I want to do is make it so that the vertical spacing between posts in the same column is automatically collapsed, so that ...
- 4,665
1
vote
3
answers
2k
views
How to create randomly laid out grid with divs of random sizes
I'm trying to create a site layout similar to this -
http://www.mondieu.nu/mishmash/fashion/
How can I get the divs in the "grid" to be of different sizes and to appear in a layout similar to that? ...
- 281
1
vote
1
answer
36
views
After detaching and reappending/prepending justification is lost
I have a cool grid that depends on text-align: justify. I needed to reorder the items using javascript and after reordering and detaching and prepending them again I noticed that somehow the elements ...
- 785
1
vote
1
answer
34
views
Center div with items laid out using grid on mobile version
I have the following code:
function seeMore() {
window.location("https://inderatech.com/index.html")
}
.see-more {
display: table;
margin-right: auto;
margin-left: auto;
}
.avatar {
...
- 930
1
vote
2
answers
502
views
how to extend height of semantic row to bottom of page
Im trying to create a grid using semantic-ui. Does anyone know how i can extend a row's height to reach the bottom of the page, and also to extend to a custom size for future reference? Here is what i ...
- 351
1
vote
2
answers
4k
views
How to assign "grid-area" property from javaScript?
I am building a checkers game and all my squares are HTML div's with the id property describing their position (e.g. '8a', '7b' etc.). I would like to iterate through the board object in JS, get ...
user11006975
1
vote
2
answers
89
views
How to consistently use grid layout with components in reactjs
I am developing a web app and I want to use CSS grid layout. After few hours, I figured out most of my layouts were incorrect because the style was overwritten by lower component, losing gridArea. I ...
- 2,819
1
vote
1
answer
883
views
How to implement Packery library with Tumblr
I followed the 'Getting started' tutorials on the Packery website, but I still can't get my tumblr photo posts to work at all with the library. I'm not sure what I need to change or add since the ...
- 452
1
vote
1
answer
447
views
QML Staggered (Masonry) GridView or Flow
I've come across the same issue raised in the following question:
How does one create a staggered grid view in QML?
I am looking to implement either a Flow GridLayout or GridView in a Masonry style, ...
- 327
1
vote
1
answer
1k
views
Vue grid layout with css update
I'm working with Vue js and the vue-grid-layout.
I would like to create a dashboard with some widget.
The css is working with the others grid that are already in the layout object.
So, I can add a ...
- 29
1
vote
2
answers
12k
views
Grid column renderer tooltip using meta.tdAttr
I have been trying to add a tooltip that pops up when you hover over a cell in an Ext.grid.Panel.
However, the parameter "meta" to the renderer function for a column does not have the tdAttr property!...
- 1,256
1
vote
2
answers
851
views
How do I make a grid using divs?
Can anyone tell me what is wrong with my code? I am trying to create a grid using divs. This is what I have so far and I am not sure why it is not creating the grid. I have googled this so many times ...
1
vote
1
answer
1k
views
click event only gets parent div
I am having issues with onclick events triggered on parent elements but not on children.
I have an image grid created through JavaScript:
HTML div:
JavaScript to append images to this image-grid div:
...
- 41
1
vote
1
answer
139
views
Create a grid and setting colors from an array
I need to create a grid from an array of 250 colors for a colorpicker.
Grid layout example:
xxxxx
xxxxx
xxxxx
...
What already works: Creating a grid and setting the colors for the buttons.
What ...
- 5,840
1
vote
3
answers
125
views
Need help resizing an image grid with CSS
I'm working on my portfolio and i can't figure out to set my grid to 100% width. I'm trying to make the grid flush with the top, bottom, and sides. You can see how it looks now here:
Current Version
...
- 39
1
vote
1
answer
591
views
input-group pushes next inputs to the next row
I have a row divided into two parts(col-md-5 and col-md-7). First part contains a question and the second part has 6 input fields(5 text inputs and 1 selectbox).
So, i divided the second part into 6 ...
- 2,785
1
vote
0
answers
182
views
How to programatically move a grid cell in jQuery Gridly?
We have a jQuery Gridly grid and we want any cell to move at the beginning of the grid when clicked. There is no method in the jQuery Gridly documentation which moves grid cells. How can we do this ...
- 3,421
1
vote
0
answers
2k
views
Thumbnail grid with expanding preview navigation
I have implemented the grid into a site and it's all working great! I have added a previous and next button using the JavaScript file to append them but can't seem to get them to cycle previous and ...
- 137
0
votes
1
answer
3k
views
Material UI Grid: need space in between buttons on wider screens
I have a very simple layout which I need to have two buttons side by side on wides screens. However I need them to have about 10px in between them, adding a margin unfortunately pushes the buttons to ...
- 7,188
0
votes
1
answer
3k
views
How to dynamically render elements in a grid
I am trying to create a layout in which each row would contains 3 cards. for that i tried using Grid layout of bootstrap, so as to make it responsive.
But the problem is I would be having data of ...
- 1,404
0
votes
2
answers
434
views
Fixed Well Size in Bootstrap
I have a loop of text displaying on a page, with a button that cycles the loop. Everytime I click the button, the well changes sizes, as the text is different lengths, is there a way that I can set ...
- 39
0
votes
2
answers
99
views
How do I allow the user to set the number of columns in a grid image layout?
What are some ways I could achieve this layout? I'm going to have a grid of images. Each image will be the same size. I'd like to scale the images up and down based on a user setting which defines the ...
- 3,300
0
votes
2
answers
1k
views
Find adjacent tiles in a two-dimensional grid
I have a two-dimensional grid, in which all tiles are defined by two coordinates x and y. I'm storing the tiles in an array like this var tiles = [];. Each tile is an object with an x and y property:
...
- 240
0
votes
1
answer
1k
views
GridLayout pre-rendering with grey boxes - WinJS
can't wait to get my first app in the Store! :) Unfortunately I'm encountering a few minor problems on the way to completion...
All my GridLayouts areas pre-render with grey boxes shifted to the ...
- 25.3k