Tengo un contenedor <div> que se completará con algunas etiquetas a medida que el usuario seleccione opciones en un menú desplegable. Si las etiquetas llenan el espacio que designé para el contenedor, quiero mostrar una etiqueta "+N" con el número restante de opciones seleccionadas.
Salida esperada: la condición isOverflowing se establece en true .
Salida real: isOverflowing nunca se establece en true .
CÓDIGO
const [selectedOptions, setSelectedOptions] = useState<number[]>([]); const [overflowing, setOverflowing] = useState(false); const tagsRef = useRef<HTMLDivElement>(null); const isOverflowing = (element: any) => { return element.current?.scrollHeight > element.current?.clientHeight; // NEVER RETURNS TRUE }; useLayoutEffect(() => { if (isOverflowing(tagsRef)) { setOverflowing(true); } else { setOverflowing(false); } }, [tagsRef, selectedOptions]); ... return ( <TagsWrapper ref={tagsRef} className="tagsWrapper"> {selectedOptions.map((option, index) => ( ... ))} </TagsWrapper> )CSS
.tagsWrapper { display: flex; flex-flow: row wrap; max-height: 32px; max-width: calc(100% - 50px - 16px - 4px); overflow: hidden; } El registro de la consola tagsRef siempre muestra que scrollHeight y clientHeight son iguales, cuando en realidad no lo son (puedo ver que el div es más alto cuando lo inspecciono en el navegador).
He probado muchas combinaciones de max-height , height ... sin éxito. Si la propiedad de overflow está configurada como visible , obviamente funciona, pero no quiero mostrar las etiquetas restantes... ¿Hay alguna solución que no veo?
¡Gracias!
Me las arreglé para ver mi propio problema. Las propiedades max-height y overflow deben estar en el elemento principal del contenedor desbordado:
<TagsContainer> <TagsWrapper ref={tagsRef} className="tagsWrapper"> {selectedOptions.map((option, index) => ( ... ))} </TagsWrapper> </TagsContainer> .tagsContainer { max-height: 32px; overflow: hidden; } .tagsWrapper { display: flex; flex-flow: row wrap; ... }