Constraining HandsOnTable to the size of its parent container

javascript css handsontable
bkbonner picture bkbonner · Jun 9, 2015 · Viewed 7.4k times · Source

I realize this is a simplistic example, but I wanted to get some explanation on how HandsOnTable expects to behave within a container. e.g. we have a Tab where we place HoT and we'd like it to consume 100% of the container space, but right now it doesn't appear to be constrained.

Here's an example. We'd like it constrained inside the red box.

http://jsfiddle.net/jxh52650/

Answer

ZekeDroid picture ZekeDroid · Jun 10, 2015

Unfortunately the red isn't showing in the fiddle but I think what you want is the stretchH:"all" property. This ensures that if you set a width on the parent container, it will stretch all columns to fill it 100%. After that, you want to set the style of the container to overflow:auto which will restrict the HOT instance to the width and height specified, and then use scroll bars after that.

Related questions

Disabled inputs in bootstrap. How to apply it to a different TAG?

By using disabled attribute on an input is possible to prevent user input and trigger a slightly different look. Here is the demo http://jsfiddle.net/D2RLR/3023/ Let's suppose I want to apply the same style to a different …

Read More
Dynamically resizing a container containing a Handsontable

This is the HTML I got: <div class="preview-content"> <h1 class="preview-content-header">Vorschau - Notiz1.txt <img src="icons/cross.png" /></h2> <div> <h2>Notiz1.txt</h2&…

Read More
How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More