Problema de visualización en el elemento "ocultar detalles"

En este bloque,

[details="Resumen"]
Este texto estará oculto
[/details]

Hay dos reglas CSS que establecen display: block en todos los elementos hijos o hermanos:

details[open] > *, details[open] .lightbox-wrapper {
    display: block;
}
details[open] > summary:first-of-type ~ *,
details.open > summary:first-of-type ~ * {
    display: block;
}

Esto es un problema porque cada elemento que debería ser en línea se mostrará como un bloque en su lugar, ocupando todo el ancho. Como un span o un enlace. ¿Cuál es el propósito de estas reglas? :thinking:

Ejemplo:

[details="Oculto"]
Imagen mejorada y comparación con el mismo halo en la Tierra:
![66bb711c57dd10e4e4f9713ebeec0ccec9a8d0dc1|220x499](upload://eEOifbxarMIErU6OnozO45BJq0I.jpeg)
![541efc040f313220531d74677a9105e44890c29c1|442x500](upload://c0ausOGkNA0BJMAsmAnOqmpWBv6.jpeg)
Aunque la atmósfera de Marte está compuesta en un 95% de dióxido de carbono (CO<sub>2</sub>), el halo fue producido por cristales de hielo de agua (H<sub>2</sub>O), de ahí la similitud con el halo común de 22° de la Tierra. Es exactamente lo mismo, de hecho.
[/details]

Oculto

Imagen mejorada y comparación con el mismo halo en la Tierra:



Aunque la atmósfera de Marte está compuesta en un 95% de dióxido de carbono (CO2), el halo fue producido por cristales de hielo de agua (H2O), de ahí la similitud con el halo común de 22° halo. Es exactamente lo mismo, de hecho.


Aquí hay 3 elementos en línea: <sub> y un enlace:



El problema desaparece si habilitamos el modo seguro y deshabilitamos todos los plugins, incluso si no tenemos plugins personalizados instalados:


image


Un ejemplo de video de try.discourse.org:

1 me gusta

Hola @Canapin :slightly_smiling_face:

Creo que (si estoy entendiendo bien) esto se debe a la mezcla entre markdown y HTML. Si dejas un espacio entre la imagen y la foto, debería mostrarse como pretendes:

Oculto

Imagen mejorada y comparación con el mismo halo en la Tierra:


Aunque la atmósfera de Marte está compuesta en un 95% de dióxido de carbono (CO2), el halo fue producido por cristales de hielo de agua (H2O), de ahí la similitud con el halo común de la Tierra de 22° halo. De hecho, es exactamente lo mismo.

Creo que los detalles se cuentan como un plugin, por lo que si deshabilitas los plugins oficiales en modo seguro, eso los desactivará.

1 me gusta

Aaah, ya veo. Como no puse un salto de línea, el siguiente contenido de texto no se envolvió con un <p>.

Fácil de arreglar al escribir entonces. Eso me servirá si esto no se arregla en el futuro, aunque supongo que podría confundir a otras personas a veces (pero no vi ningún otro informe, así que…).

Además, ten en cuenta que la vista previa funciona bien pero no la publicación final.


También me interesaría conocer el razonamiento detrás de las reglas CSS que hacen que cada hijo/hermano directo sea un elemento de bloque dentro del contenedor Hide Details.

1 me gusta

Me temo que eso no lo sé. :slight_smile: Pero lo sacaré como una cita para darle un pequeño impulso en caso de que se pasara por alto anteriormente, y espero que alguien más en la comunidad sepa más. :crossed_fingers:

1 me gusta