Tengo un contenedor div que contiene un componente práctico de reacción, y quiero usar el tamaño automático del componente pero al mismo tiempo tenerlo centrado en la pantalla (o un div externo).
Entonces, en este ejemplo: https://jsfiddle.net/opike99/b1ux0rLy/5/
Estoy tratando de obtener el ancho de div #example1 para que coincida con el contenido de la tabla (por lo tanto, al cambiar el número de columnas, el ancho de div se ajustará en consecuencia).
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; */ }Así que he estado jugando con tu ejemplo y obtuve los siguientes resultados:
En realidad, hay tres cosas que debes hacer:
$('.wtHolder') tiene un width: 680px definido en un atributo de estilo, por lo que la única forma de eliminarlo es programáticamente.$('.ht_master.handsontable, #example1') necesita width: fit-contentdisplay: flex; justify-content: center; en $('.outer1') . Y por alguna razón, el orden en que se aplican también es importante. Lo hice funcionar con setTimeout , aunque probablemente quieras algo más sofisticado.
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);Déjame saber cómo vas.