CODEWITHSUNDEEP
drupaldrupal-views
aneuryzm
aneuryzm

Reputation: 64844

DRUPAL, Views module: can I dynamically change the number of columns of my grid?

I'm using drupal for a website and I've created a grid with the View module to display my nodes.

Can I dynamically change the number of columns of my grid with javascript according to the browser width ?

At the moment I can only specify it in the back-end.

thanks

Upvotes: 0

Views: 1564

Answers (5)

Ana Laura Coto
Ana Laura Coto

Reputation: 1

I use bootstrap, so is easy to add classes that respond to the page width. No need for BE or php functions. Only edit the view template adding your own classes to the item element like: col-12 col-md-6 col-lg-4 will. This will render a single column for small screens, 2 columns for medium size, and 3 columns for desktop. You should be able to do something like that with js using your own classes https://getbootstrap.com/docs/5.0/layout/grid/#mix-and-match

Upvotes: 0

Stay-at-home-dad
Stay-at-home-dad

Reputation: 886

Why bother with the extra overhead, and it'll break if they disable javascript? We had this same problem with displaying employee pics.

Rather than the view display style grid, use the view display style Unformatted. Then in firefox use the firebug plugin to inspect the div containing your content and add a float:left; style for that.

Example:

div#content div.view-display-id-page_4 div.views-row { 
 float: left; // floats left so they fit the space
 margin: 0 20px 20px 0; // gives them breathing room
 position: relative;
 width: 150px; // or whatever you need for your content
 height: 250px; // or whatever you need, prevents 'stacking' elements
}

It flows with the browser width, and there's no extra overhead.

Upvotes: 2

Justintime
Justintime

Reputation: 279

I was just looking into this myself - I believe this does what you want: http://drupalcontrib.org/api/function/cck_gallery_preprocess_node/6

Nevermind, I see you want to do it via JS, not PHP.

Upvotes: 0

aneuryzm
aneuryzm

Reputation: 64844

I've solved with this wonderful jquery plugin: http://welcome.totheinter.net/columnizer-jquery-plugin/

Upvotes: 1

googletorp
googletorp

Reputation: 33285

You can rewrite the DOM as much as you like with javescript. You can do almost anything with JavaScript. Detecting browsers can be a bit tricky though, but this is not related to Drupal or the Views module.

Upvotes: 0

Related Questions