Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: min-height, min-width, max-height, max-width #1017

Closed
mariotacke opened this issue Aug 29, 2013 · 6 comments
Closed

Feature: min-height, min-width, max-height, max-width #1017

mariotacke opened this issue Aug 29, 2013 · 6 comments

Comments

@mariotacke
Copy link

I think this might be a good addition to the settings/options of the table. I have been unable to get handsontable to honor the css max-height and min-height settings... my table renders over elements after the handsontable.

If there is a way to do this, please let me know and we can close this out right away.

What I would like to do is define a div with a max-height option which handsontable considers and parks itself in there.

@donpinkus
Copy link

create a div with a max-height, then set overflow to auto... thats how I'm doing it :)

@donpinkus
Copy link

This is for table height and width. It is not for cell height and width.

@AMBudnik
Copy link
Contributor

We are closing issues related to feature requests to create a full document based on that ideas from all our sources. It is avaiable is our wiki section.

@stla
Copy link

stla commented Jan 26, 2017

create a div with a max-height, then set overflow to auto... thats how I'm doing it :)

That does not work for me.

I do as follows for the height. First I define this function:

function getHeight(hot){
  var pl = hot.getPlugin("autoRowSize");
  pl.recalculateAllRowsHeight();
  var heights = pl.heights;
  var height = heights.reduce(function(total,x){return total+x;});
  return height + pl.getColumnHeaderHeight();
}

Then after I create the handsontable hot:

    var height = getHeight(hot);
    if(height > 450){
      hot.updateSettings({height: 450});
    }else{
      hot.updateSettings({height: height+10});
    }

And, in case of changes:

    hot.addHook("afterChangesObserved", function(){
      console.log("Setting height");
      var height = getHeight(this);
      if(height > 450){
        this.updateSettings({height: 450});
      }else{
        this.updateSettings({height: height+10});
      }
    });

You can do something similar for the width.

Comments are welcome.

@AMBudnik
Copy link
Contributor

Please check the progress for the following issue at #487

@AMBudnik
Copy link
Contributor

AMBudnik commented Mar 6, 2019

Hey,

we've added an option in Handsontable 7.0.0 that can interest you #5749
From now on we support a container with relative dimensions (%, vh, vw, rem, em)

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

No branches or pull requests

4 participants