how can a make my gridster responsive

Question

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.

Oder

Answer 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/

Brigidabrigit

Posting only a link is not an answer. – Meningitis

Hi Gwi7d31, thanks for your answers, I will check and let you know :) – Oder

@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! – Skateboard

Answer 2

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.

Incorporation

Hi Emackey thanks for your reply, I will try this let you know :) – Oder

+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 – Oder

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. – Incorporation

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. – Incorporation

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 – Oder

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)); – Oder

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 – Oder

this has fludic approach, 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 – Oder

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 – Oder

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. – Incorporation