Is it possible to keep the aspect ratio on different screen sizes?

[alammers]

Hello there! I have a question about the responsiveness of gridstack :) Is it possible to keep the aspect ratio on different screen sizes?

At the moment we are using this wonderful plugin to create a dashboard that can contain all kinds of cards. The content of some of these cards rely heavily on a certain aspect ratio. If this aspect ratio changes, the content of that card is all over the place.
This problem happens when we have screens on a different resolution. Existing dashboards filled with cards are very responsive when it comes to width, but the height stays the same. This results in a different aspect ratio and thus cards that don't look good.

A small example of what happens:

The grey border is the resolution that shows the dashboard best. With a smaller resolution, the layout with the red border happens. Behaviour that we are looking for is shown with the green border

[radiolips]

Hey! Glad to hear that you're having a [mostly] good experience with gridstack.

May I ask, could you provide some code to show what you're doing now?

While I'd still like to see how you're doing things currently, I will mention that there is currently no way to automatically adjust the height. However, I'd be happy to help you generate code to do it. It shouldn't be very difficult. I'd advise that you check the resolution (or, better yet, what Bootstrap resolution is currently active, if you're using Bootstrap), then, using some base (say: large will be "1"), make everything else a fraction. So, when you're putting together the dashboard, go through each widget and make height a fraction of large multiplied by the current height.

This will work if you're still basing everything off of the width, but it occurs to me that you may be concerned with the height of the browser changing, not just the width.

[alammers]

Thank you for the reply! Sadly our code concerning this dashboard is quite big, so it's a bit hard to show you an example.
I looked into your advice about the viewport check and changed the cell_height based on this. With this the ratio is kept the same. Sadly our highchart content is still showing wrongly, so I was wondering if there's an event in gridstack to detect the current viewport?

[radiolips]

There's no internal event in gridstack for this, unfortunately. However, I think it still may be doable.

Have you tried calling reflow() on your Highchart? In my experience, it needs this often. I believe that Highcharts automatically resizes vertically, but not horizontally (I might have that flipped). Either way, when you're changing the cell height, try calling reflow() after. You may need a slight delay (think: setTimeout) to make sure that everything has adjusted in time.

I understand that you may not be able to provide code. If you try reflow and still have an issue, please try to describe your scenario even more specifically, and I'll try to help.

[radiolips]

Closing this out. If you're still having an issue, please reopen and provide more information.

[illusx]

I am having the same issue here.
Tried the below on resize, but I still have a larger height i.e the aspect ratio is not maintained.

Could you please advise if this is the right way to calculate the height?

<script type="text/javascript">

  var initialGSWidth = 0;
  var initialGSHeight = 0;

  $(function () {
    var options = {
      cellHeight: '20px',
      disableDrag: true,
      disableResize: true
    };
    $('.grid-stack').gridstack(options);
    initialGSWidth = $('.grid-stack').data('gridstack').container.context.clientWidth;
    initialGSHeight = $('.grid-stack').data('gridstack').container.context.clientHeight;

  });

  function executeResize() {

    $('.grid-stack').data('gridstack')
    var grid = $('.grid-stack').data('gridstack');
    if (grid!=null) {
      var currentWidth = grid.container.context.clientWidth;
      var newHeight = 20*currentWidth/initialGSWidth+"px";
      grid.destroy(false);
      var options = {
        cellHeight: newHeight,
        disableDrag: true,
        disableResize: true,
      };
      $('.grid-stack').gridstack(options);
    }
  }// executeResize

  // wait for last resize
  var myTime;
  var myTimeout = false;
  var myDelta = 1500;
  $(window).resize(function() {
    myTime = new Date();
    if (myTimeout === false) {
      myTimeout = true;
      setTimeout(resizeEnd, myDelta);
    }
  });

  function resizeEnd() {
    if (new Date() - myTime < myDelta) {
      setTimeout(resizeEnd, myDelta);
    } else {
      myTimeout = false;
      executeResize();
    }
  }// resizeEnd
</script>