Perguntas com a marcação «css»

Estou tentando criar um sistema de menus com uma imagem e texto acima e abaixo. Os dados são dinâmicos. Estou querendo que o sistema de menus apareça para que cada imagem fique a uma distância igual da outra, para que se alinhem em uma grade de imagens na horizontal e …

17 html  css  flexbox 

Eu queria fazer um círculo pontilhado com CSS e o criei com o seguinte processo. Embora o círculo tracejado possa ser exibido por esse processo, o espaço entre o final e o início da linha tracejada tornou-se estreito e o espaço não era uniforme. .c { width: 500px; height: 500px; …

16 javascript  html  css 

Eu tenho uma mesa com números. Quando clico em uma célula da tabela, alterna o estado ativo. Desejo selecionar uma célula e pressionar crtl e selecionar outra célula e, como resultado, as células entre a primeira e a segunda se tornarão ativas. Como implementá-lo? codepen https://codepen.io/geeny273/pen/GRJXBQP <div id="grid"> <div class="cell">1</div> …

16 javascript  html  css 

Eu escrevi um botão personalizado ( MyStyledButton) baseado em material-ui Button . import React from "react"; import { Button } from "@material-ui/core"; import { makeStyles } from "@material-ui/styles"; const useStyles = makeStyles({ root: { minWidth: 100 } }); function MyStyledButton(props) { const buttonStyle = useStyles(props); const { children, width, ...others …

16 javascript  css  reactjs  jestjs  enzyme 

Estou tentando criar uma animação no estilo montanha-russa com CSS. Eu quero saber como curvar a "montanha-russa" quando estiver no estágio de loop. Estou procurando por uma solução totalmente CSS, mas se houver necessidade de um pouco de JavaScript, estou bem com isso. meu código até agora: #container { width: …

15 html  css  css-animations  css-transforms 

Eu tenho o seguinte snippet (preciso visualizar no modo de tela cheia), que estou tentando colocar o <main>elemento diretamente sob o <header>elemento. Eu tenho o <header>em uma posição fixa porque quero que ele fique na parte superior da tela enquanto o usuário rola pelo conteúdo do <main>elemento. Eu tentei de …

15 html  css  css-position  fixed 

Como tornar um iframe responsivo, sem assumir uma proporção? Por exemplo, o conteúdo pode ter qualquer largura ou altura desconhecida antes da renderização. Observe que você pode usar Javascript. Exemplo: <div id="iframe-container"> <iframe/> </div> Dimensione isso iframe-containerpara que o conteúdo mal caiba dentro sem espaço extra; em outras palavras, haverá …

14 javascript  html  css  iframe  responsive-design 

Quando digito o último número , o primeiro número entra no text-box(desaparece), adicionando um espaço extra. Depois de clicar fora text-box, fica bem o que eu preciso durante a digitação do último caractere. #number_text { padding-left: 9px; letter-spacing: 31px; border: 0; background-image: linear-gradient(to right, #e1e1e1 70%, rgba(255, 255, 255, 0) …

14 javascript  jquery  html  css 

Estou trabalhando na tabela HTML e, imprimindo essa tabela na impressora usando o html-to-papervue.js. O que estou fazendo é clicar em adicionar, criar uma nova linha e, em seguida, clicar em imprimir. Estou tentando imprimir a tabela, mas ela não está sendo usada. quaisquer dados mostrando apenas células vazias Code …

14 javascript  css  vue.js  printing  vuejs2 

O preenchimento automático do navegador Chrome removeu o efeito de background-colore background-imagede Usernamee Passwordcampos de entrada. Antes do preenchimento automático Após o preenchimento automático Mas o preenchimento automático do navegador Chrome oculta meus ícones das entradas e também altera meus background-color. Então, eu preciso que meus ícones permaneçam nas entradas …

13 javascript  html  css  google-chrome 

No exemplo a seguir, quando você clica no rótulo, a entrada muda 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> Executar snippet de códigoOcultar resultadosExpandir snippet No Chrome, quando você move o cursor entre …

13 javascript  html  css  label 

A questão parece ser que certas letras, como g, y, q, etc. que têm uma cauda que se inclina para baixo, não permitem a centragem vertical. Aqui está uma imagem para mostrar o problema . Os caracteres na caixa verde são basicamente perfeitos, pois não têm cauda descendente. Aqueles na …

12 javascript  html  css  vertical-alignment 

Tente executar o seguinte snippet e clique na caixa. 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 = '' }) } }) .box …

11 javascript  css  promise  settimeout 

Tentei várias maneiras de ajustar a tabela à página (A4), como mostra a figura: pesquisei bastante, mas não encontrei nada útil na web. Estou usando tabela dinâmica, está tudo bem, exceto a largura da tabela. aqui está o meu código: $content = '<table><thead><tr><th class="bg-dark text-white" align="center">#</th><th align="center" class="bg-dark text-white">Code</th><th align="left" …

11 php  html  css  tcpdf 

Estou tentando imitar outros aplicativos de bate-papo para celular onde, quando você seleciona a send-messagecaixa de texto e ela abre o teclado virtual, a mensagem mais abaixo ainda está em exibição. Parece não haver uma maneira de fazer isso com o CSS de maneira surpreendente, então o JavaScript resize(única maneira …

10 javascript  android  html  css  reactjs