Skip to content

cellHeight(val) does not work properly on v0.5.3 (but OK on v0.5.2) #1068

Closed

Description

@LouisSung

Subject of the issue

Seems like function cellHeight(val) doesn't work properly on v0.5.3.

E.g.,

  1. not able to auto resize height while resizing (Browser) Window, and
  2. (re)assign height by calling this function (although the one in constructor $('.grid-stack').gridstack can set up height correctly)

However, it works fine after I downgrade to v0.5.2.
There should be something wrong for this version, but not sure if anyone has already find out the issue and prepare to fix it

Environment

  • Failed on v0.5.3
  • Success on v0.5.2

Steps to reproduce

I think it's easy to reproduce(?
Sorry for not familiar with jsfiddle. QQ

Simple example

  1. Save following code as local .html file and open it with browser
  2. Uncomment #L17 to see the difference
  3. #L21 also shows the cellHeight(val) after init (constructor)
<html><head><link href="https://cdn.jsdelivr.net/npm/gridstack@v0.5.2/dist/gridstack.min.css" rel="stylesheet"></head><body>

<div class="grid-stack">
  <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="2" data-gs-height="2" style="background-color:red">
    <div class="grid-stack-item-content">11111</div></div>
  <div class="grid-stack-item alert-success" data-gs-x="2" data-gs-y="0" data-gs-width="2" data-gs-height="2" style="background-color:green">
    <div class="grid-stack-item-content _align_center">22222</div></div>
  <div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="2" data-gs-height="2" style="background-color:blue">
    <div class="grid-stack-item-content">33333</div></div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gridstack@v0.5.2/dist/gridstack.all.js"></script>

<!-- uncomment next line to compare function `cellHeight(val)` between v0.5.2 and v0.5.3 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/gridstack@v0.5.3/dist/gridstack.all.js"></script> -->

<script>$(function(){
  $('.grid-stack').gridstack({disableOneColumnMode:true,verticalMargin:0,cellHeight:'auto'});
  $('.grid-stack').data('gridstack').cellHeight(20);    // change height after initialization
});</script>

</body></html>

Activity

  1. adumesny commented on Nov 25, 2019

    @adumesny
    Member

    thank for for the sample, I will take a look.

    Update: This was caused by change #1047 (fix for #937) and will check with @radiolips

  2. adumesny commented on Nov 26, 2019

    @adumesny
    Member

    fixed in next release 0.5.4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions