Preguntas etiquetadas con css

En el siguiente ejemplo, cuando hace clic en la etiqueta, la entrada cambia de estado. document.querySelector("label").addEventListener("click", function() { console.log("clicked label"); }); label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } <input type="checkbox" id="1"> <label for="1">Label</label> Ejecutar fragmento de códigoOcultar resultadosExpandir fragmento En Chrome, cuando mueve el cursor entre …

13 javascript  html  css  label 

El problema parece ser que ciertas letras como g, y, q, etc, que tienen una cola que se inclina hacia abajo, no permiten el centrado vertical. Aquí hay una imagen para mostrar el problema . Los caracteres en el cuadro verde son básicamente perfectos, ya que no tienen cola hacia …

12 javascript  html  css  vertical-alignment 

Intente ejecutar el siguiente fragmento y luego haga clic en el cuadro. const box = document.querySelector('.box') box.addEventListener('click', e => { if (!box.style.transform) { box.style.transform = 'translateX(100px)' new Promise(resolve => { setTimeout(() => { box.style.transition = 'none' box.style.transform = '' resolve('Transition complete') }, 2000) }).then(() => { box.style.transition = '' }) …

11 javascript  css  promise  settimeout 

Intenté muchas formas de hacer que la tabla se ajustara a la página (A4) como se muestra en la imagen: busqué mucho pero no pude encontrar nada útil en la web. Estoy usando una tabla dinámica, todo está bien, excepto el ancho de la tabla. Aquí está mi código: $content …

11 php  html  css  tcpdf 

Estoy tratando de imitar otras aplicaciones de chat móviles donde, cuando seleccionas el send-messagecuadro de texto y se abre el teclado virtual, el mensaje más inferior todavía está a la vista. Parece que no hay una manera de hacer esto con CSS de manera sorprendente, por lo que JavaScript resize(única …

10 javascript  android  html  css  reactjs 

Ayer hice una pregunta similar, pero la expliqué mal y no especifiqué mi deseo de una solución de CSS puro, que creo que debería ser posible, así que lo estoy intentando nuevamente. Básicamente, tengo un problema en el que tengo un div de mensajes desplazables y un campo de entrada …

10 javascript  html  css  scroll  scrollbar 

Estoy trabajando en una aplicación web de una sola página, que generalmente se usará en dispositivos móviles. Una de sus características es un modo de mapa, que ocupa temporalmente toda la ventana del navegador; una escala de distancia y algunos controles están unidos a las cuatro esquinas del mapa. Aquí …

10 html  css  mobile-safari  fullscreen 

Para llenar toda la altura de la página, utilizo height: 100%;las etiquetas html y body, y funciona bien hasta que un navegador se cierre y se vuelva a abrir. (No uso 100vh debido a problemas en dispositivos móviles https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in -some-mobile-browsers.html ) Pasos para reproducir: Abra https://angelika94.github.io/rick/ en Google Chrome en …

10 html  css  height  google-chrome-app 

Antecedentes del problema: estoy usando katex para representar algunas matemáticas en una página. Luego quiero crear una versión PDF de parte de esa página, así que creo un documento HTML que contiene la parte a exportar que alinea todo CSS y lo pasa al renderizador. El renderizador no puede acceder …

10 javascript  css  webpack  data-uri 

Desde el lanzamiento de Chrome v78.0.3904.70, veo problemas con el uso  de la propiedad CSS white-space: nowrap;. El espacio que no se rompe parece causar un salto de línea. Cuando se usa text-overflow: ellipsis, el texto real no se mostrará ya que está roto fuera del contenedor. Solo parece suceder …

10 html  css  google-chrome  whitespace 

Siguiendo un pedacito de mi código. Solo me pregunto por qué la celda "iphone" parpadea solo desde iphone. PD. No puedo usar una tabla o una lista para la estructura. También intenté usar transform: translate3d(0,0,0);. Básicamente, también necesito que la primera celda sea pegajosa para Left y Top en iPhone …

10 html  css 

Tenemos una aplicación de comercio electrónico que envía los detalles del pedido cuando se realiza una compra, y acabamos de rediseñar esa plantilla de correo electrónico. En los últimos días, hemos recibido informes de clientes a los que les falta la mitad del texto en el correo electrónico. Después de …

10 ios  css  email  gmail  ios-darkmode 

Si bien la <meta name="viewport">etiqueta no está estandarizada, "es respetada por la mayoría de los navegadores móviles debido al dominio de facto". Una desventaja de que no es un verdadero estándar web es que la documentación detallada no está tan disponible como otros estándares. El Grupo de Trabajo CSS tiene …

9 css  viewport  meta-tags  meta 

Tengo un elemento contenedor que contiene algunos otros elementos, pero dependiendo del tamaño de la pantalla, partes de ellos se cortan inexplicablemente en varias partes. Puede observar el comportamiento en el enlace de mi sandbox de código, cuando la página HTML se ajusta en ancho (haciendo clic y arrastrándola). ¿Cómo …

9 javascript  css  reactjs 

He codificado un script (con la ayuda de un usuario aquí) que me permite expandir un div seleccionado y hacer que los otros div se comporten en consecuencia al estirarlo por igual para adaptarse al espacio restante (excepto el primero cuyo ancho es fijo). Y aquí hay una imagen de …

9 javascript  jquery  css  flexbox  css-transitions