Pertanyaan yang diberi tag «css»

Saya telah menulis tombol khusus ( MyStyledButton) berdasarkan 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 

Saya mencoba membuat animasi gaya roller coaster dengan CSS. Saya ingin tahu bagaimana cara melengkung "coaster" ketika itu dalam tahap loop. Saya sedang mencari solusi semua CSS tetapi jika perlu sedikit JavaScript saya setuju dengan itu. kode saya sejauh ini: #container { width: 200px; height: 300px; margin-top: 50px; position: relative; …

15 html  css  css-animations  css-transforms 

Saya memiliki cuplikan berikut (perlu melihat dalam mode layar penuh), yang saya coba untuk menempatkan <main>elemen langsung di bawah <header>elemen. Saya memiliki <header>posisi tetap karena saya ingin tetap di bagian atas layar saat pengguna menggulir konten di <main>elemen. Saya sudah mencoba semua yang saya tahu, tapi yang terbaik yang bisa …

15 html  css  css-position  fixed 

Bagaimana membuat iframe responsif, tanpa mengasumsikan rasio aspek? Misalnya, konten mungkin memiliki lebar atau tinggi, yang tidak diketahui sebelum rendering. Catatan, Anda bisa menggunakan Javascript. Contoh: <div id="iframe-container"> <iframe/> </div> Ukuran ini iframe-containersehingga isinya hampir tidak muat di dalam tanpa ruang tambahan, dengan kata lain, ada cukup ruang untuk konten …

14 javascript  html  css  iframe  responsive-design 

Ketika saya mengetik angka terakhir , angka pertama masuk ke dalam text-box(menghilang), itu menambah satu ruang ekstra. Setelah saya klik di luar text-boxitu terlihat bagus yang saya butuhkan saat mengetik karakter terakhir. #number_text { padding-left: 9px; letter-spacing: 31px; border: 0; background-image: linear-gradient(to right, #e1e1e1 70%, rgba(255, 255, 255, 0) 0%); …

14 javascript  jquery  html  css 

Saya bekerja pada tabel HTML dan dan mencetak tabel itu ke printer menggunakan html-to-paperdi vue.js, Apa yang saya lakukan adalah mengklik klik membuat baris baru dan kemudian klik cetak saya mencoba untuk mencetak tabel tetapi tidak mengambil data apa pun hanya menampilkan sel kosong Kode App.vue <template> <div id="app"> <button …

14 javascript  css  vue.js  printing  vuejs2 

Chrome Browser otomatis mengisi efek yang dihapus dari background-colordan background-imagedari Usernamedan Passwordbidang input. Sebelum pelengkapan otomatis Setelah selesai otomatis Tetapi Chrome Browser lengkap menyembunyikan ikon saya dari input dan juga mengubah saya background-color. Jadi saya perlu ikon saya tetap pada input apa adanya. Dimungkinkan untuk menghentikan Browser Chrome dari mengubah …

13 javascript  html  css  google-chrome 

Dalam contoh berikut, ketika Anda mengklik label, input berubah status. 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> Jalankan cuplikan kodeSembunyikan hasilLuaskan cuplikan Di Chrome, ketika Anda memindahkan kursor antara mousedowndan mouseupperistiwa input masih akan terpicu, …

13 javascript  html  css  label 

Masalah ini tampaknya bahwa surat-surat tertentu seperti g, y, q, dll yang memiliki ekor yang lereng bawah, tidak memungkinkan untuk centering vertikal. Berikut ini gambar untuk menunjukkan masalahnya . Karakter dalam kotak hijau pada dasarnya sempurna, karena mereka tidak memiliki ekor ke bawah. Mereka yang berada di kotak merah menunjukkan …

12 javascript  html  css  vertical-alignment 

Silakan coba dan jalankan cuplikan berikut, lalu klik kotaknya. 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 

Saya mencoba banyak cara untuk membuat tabel agar sesuai dengan halaman (A4) seperti yang ditunjukkan pada gambar: Saya mencari banyak tetapi tidak dapat menemukan sesuatu yang berguna di web. Saya menggunakan tabel dinamis, semuanya ok kecuali lebar tabel. ini kode saya: $content = '<table><thead><tr><th class="bg-dark text-white" align="center">#</th><th align="center" class="bg-dark text-white">Code</th><th …

11 php  html  css  tcpdf 

Saya mencoba meniru aplikasi obrolan seluler lainnya di mana saat Anda memilih send-messagekotak teks dan membuka papan ketik virtual, pesan paling bawah masih terlihat. Sepertinya tidak ada cara untuk melakukan ini dengan CSS secara luar biasa, jadi JavaScript resize(satu-satunya cara untuk mengetahui kapan keyboard dibuka dan ditutup ternyata) acara dan …

10 javascript  android  html  css  reactjs 

Saya mengajukan pertanyaan serupa kemarin tetapi menjelaskannya dengan buruk, dan tidak menentukan keinginan saya untuk solusi murni-CSS, yang saya pikir seharusnya mungkin, jadi saya coba lagi. Pada dasarnya, saya memiliki masalah di mana saya memiliki div pesan yang dapat digulir dan bidang input di bawahnya. Ketika saya mengklik sebuah tombol, …

10 javascript  html  css  scroll  scrollbar 

Saya sedang mengerjakan aplikasi web satu halaman, yang biasanya akan digunakan pada perangkat seluler. Salah satu fiturnya adalah mode peta, yang sementara mengambil alih seluruh jendela browser; skala jarak dan beberapa kontrol terpasang pada empat sudut peta. Berikut adalah screenshot kecil dari peta sehingga Anda dapat mengetahui apa yang saya …

10 html  css  mobile-safari  fullscreen 

Untuk mengisi seluruh ketinggian halaman, saya menggunakan height: 100%;html dan tag tubuh, dan berfungsi baik sampai browser ditutup dan dibuka kembali. (Saya tidak menggunakan 100vh karena masalah pada perangkat seluler https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in -some-mobile-browsers.html ) Langkah-langkah mereproduksi: Buka https://angelika94.github.io/rick/ di Google Chrome di iPhone (Anda akan melihat bahwa navigasi (Morty and Beer) …

10 html  css  height  google-chrome-app