6

When i resize my browser, most of the tiles go offscreen, and there is no horizontal scroll bar even.May I know how we can make the gridster responsive.

Thanks, Balaji.

balaji
  • 774
  • 1
  • 16
  • 42

2 Answers2

5

Responsive grid width is available in the dsmorse fork of Gridster, which I recommend over the main repo because the main repo has been dormant for over a year.

Here's the responsive grid width demo on the dsmorse fork.

emackey
  • 11,818
  • 2
  • 38
  • 58
  • Hi Emackey thanks for your reply, I will try this let you know :) – balaji Oct 20 '15 at 12:35
  • 1
    +1 for this approach :), in my case Im not supposed to have horizontal screen bar, so when there is a window resize, gridster should detect that and adjust the tiles ,say for instance, the max_cols will be 5, when there is a window resize which can be detected using $($window).on('resize', onresizefunction), there I want to reduce the max-cols to 3, but Im not sure how to refresh the entire gird after making max-cols to 3, thanks in advance – balaji Oct 21 '15 at 08:32
  • Unfortunately I don't have a good solution to this. The responsive demo above works by maintaining a fixed number of columns, and varying the width of the columns to fill the screen. I haven't seen a modification of Gridster that is responsive by varying the number of columns. Seems like it should be doable, but I don't know of any existing code that does it. – emackey Oct 21 '15 at 14:01
  • Part of the challenge of implementing it would be, what to do with existing widgets when the user makes the screen more narrow. Given that widgets can be more than one column wide, what to do when the screen becomes too narrow for the widest widget? There could be quite a bit of reshuffling needed to make the screen have fewer columns, and it's not certain that existing widgets & sizes would fit into the new smaller arrangement. – emackey Oct 21 '15 at 14:05
  • I have one doubt like this for suppose,the full size brower screensize is 800*600, when I click on restore down button, then $($window).on('resize', onresizefunction) will be executed, so here i tried with below code – balaji Oct 21 '15 at 14:10
  • var gridster = $(".gridster").gridster().data('gridster'); gridster.options.max_cols = 3; gridster.options.widget_base_dimensions = [240, 400]; gridster.options.min_widget_width = 240; for (var i = 0; i < gridster.$widgets.length; i++) { gridster.resize_widget($(gridster.$widgets[i]), 1, 1); } gridster.generate_grid_and_stylesheet(); gridster.get_widgets_from_DOM(); gridster.set_dom_grid_height(); gridster.$wrapper.addClass('ready'); gridster.draggable(); $(window).bind('resize.gridster', throttle($.proxy(this.recalculate_faux_grid, this), 200)); – balaji Oct 21 '15 at 14:10
  • so not for all browser resizes but for instances like browser size changed to 400*400, we can use the above code, but somehow it is not working – balaji Oct 21 '15 at 14:12
  • this has fludic approach, http://jquerylabs.com/gridster-js/, I mean if I restore down my broswer, i can see the tiles coming down,not sure if it works for me – balaji Oct 21 '15 at 14:16
  • the gridster that is there in the above site is revised in 2014, and you gave the 2015 version,but in 2014(revised) version I dont see any horizontal bar appearing , but in 2015 version, we can see the horizontal bar – balaji Oct 21 '15 at 14:24
  • I think we're a bit off the rails with this long conversation here. StackOverflow is meant to be a direct question + direct answer format, such that it is useful to 3rd parties reading it later. We should try to stick to that format if possible. – emackey Oct 21 '15 at 15:23
1

Looks like someone might of made a responsive gridster.js! I haven't checked it out yet, but it could be promising...http://troolee.github.io/gridstack.js/

Gwi7d31
  • 1,652
  • 2
  • 12
  • 10
  • Posting only a link is not an answer. –  Feb 21 '16 at 20:47
  • Hi Gwi7d31, thanks for your answers, I will check and let you know :) – balaji Feb 22 '16 at 14:05
  • 1
    @DisplayName this is an answer, as it provides a great responsive port of gridster which can collapse to a single column layout. +1 from me, this saved me a lot of time! – Paul Dixon May 23 '16 at 15:26