I have a container div that holds a react handsontable component, and I want to use the autosizing of the component but at the same time have it centered in the screen (or an outer div).
So in this example: https://jsfiddle.net/opike99/b1ux0rLy/5/
I'm trying to get the width of div #example1 to match the contents of the table (so by changing the number of columns, the div width will adjust accordingly).
HTML:
<script src="https://cdn.jsdelivr.net/npm/handsontable@11.1/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@11.1/dist/handsontable.full.min.css" />
<script src="https://handsontable.com/docs/8.3.2/components/numbro/dist/languages.min.js"></script>
<div class="outer2">
<div class="outer1">
<div id="example1">
</div>
</div>
</div>
JS:
const container = document.querySelector('#example1');
const numberOfColumns = 7;
const hot = new Handsontable(container, {
data: Handsontable.helper.createSpreadsheetData(5, numberOfColumns),
colHeaders: true,
rowHeaders: true,
hiddenColumns: true,
width: 'auto',
height: 'auto',
licenseKey: 'non-commercial-and-evaluation',
});
// re-render your Handsontable instance
hot.render()
CSS:
.outer2 {
}
.outer1 {
}
#example1 {
border-style: solid;
/* width: fit-content; */
}
So I've been playing around with your example, and got the following results:
There's actually three tings you need to do:
$('.wtHolder') has a width: 680px defined on a style attribute, so the only way to remove it is programatically.$('.ht_master.handsontable, #example1') need width: fit-contentdisplay: flex; justify-content: center; on $('.outer1').And for some reason, the order in which these are applied is important too. I got it working with a setTimeout, although you'd probably want something more sophisticated.
setTimeout(function() {
document.querySelector('.wtHolder').style.width = 'initial';
document.querySelector('#example1').style.width = 'fit-content';
const outer = document.querySelector('.outer1');
outer.style.display = 'flex';
outer.style.justifyContent = 'center';
}, 2000);
Let me know how you go.