0
211
ViewsCSS display none elimina el elemento, pero deja su espacio ocupado
En mi gráfico, me gustaría eliminar algunos de los elementos de la leyenda en función de una condición y estoy usando CSS, no mostrar ninguno, desde el controlador JS. La eliminación funciona bien, sin embargo, se deja un espacio en blanco en el espacio ocupado del elemento. ¿Por qué?
Como este HTML se genera dinámicamente, presento una captura de pantalla del front-end, en la que se resalta ninguno. Intenté editar etiquetas, jugar con CSS, en el navegador, pero nada ayudó. El espacio en blanco permanece inmóvil.
Y aquí está la sección del controlador JS que oculta el elemento, pero creo que el problema está en HTML/CSS. Cualquier ayuda es apreciada.
chart: { //..................................... callback: function (chart) { var legendItems = document.getElementsByClassName('nv-series'); for (var x = 0; x < legendItems.length; x++) { var legendItem = legendItems[x]; var content = legendItem.textContent.trim(); if (content.indexOf('Item 3') !== -1 || content.indexOf('Item 7') !== -1) { legendItem.style.display = 'none'; } } } }1 answers
Answer question0
El espacio en blanco se debe a que los otros elementos se están transformando para que se compensen en cierta cantidad, y esa cantidad permanece igual incluso si un elemento está oculto.
Entonces, cuando oculta un elemento, recorra todos los elementos que lo siguen y reste manualmente el ancho del elemento oculto de la cantidad de translate-x , o haga otra forma de enumerar los elementos uno al lado del otro sin usar la propiedad de transform .