Запитання з тегом «css»

У мене є такий фрагмент (потрібно переглянути в повноекранному режимі), що я намагаюся розмістити <main>елемент безпосередньо під <header>елементом. Я перебуваю <header>у фіксованому положенні, тому що я хочу, щоб він залишався у верхній частині екрана, коли користувач прокручує вміст <main>елемента. Я спробував усе, що знаю, але найкраще, що я можу придумати, …

15 html  css  css-position  fixed 

Як зробити iframe чуйним, не припускаючи співвідношення сторін? Наприклад, вміст може мати будь-яку ширину або висоту, що невідомо перед рендерінгом. Зверніть увагу, ви можете використовувати Javascript. Приклад: <div id="iframe-container"> <iframe/> </div> Розмістіть його iframe-containerтак, щоб вміст його ледь помістився всередині без зайвого простору, іншими словами, є достатньо місця для вмісту, …

14 javascript  html  css  iframe  responsive-design 

Коли я набираю останнє число , перше число переходить всередину text-box(воно зникає), додаючи ще один пробіл. Після того, як я натискаю зовні, text-boxце виглядає добре, що мені потрібно під час введення останнього символу. #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 

Я працюю над таблицею HTML і друкую цю таблицю на принтері за допомогою html-to-papervue.js. Що я роблю, це натиснути кнопку "Додати", створивши новий рядок, а потім "натиснути друк", я намагаюся надрукувати таблицю, але вона не бере будь-які дані, що показують лише порожні комірки Код App.vue <template> <div id="app"> <button type="button" …

14 javascript  css  vue.js  printing  vuejs2 

Браузер Chrome автозаповнення видалено ефект background-colorі background-imageвід Usernameі Passwordполів введення. Перед автозаповненням Після автозаповнення Але автозаповнення браузера Chrome приховало мої піктограми від входів, а також змінило мої background-color. Тож мені потрібно, щоб мої значки залишалися на входах, як є. Чи можна зупинити браузер Chrome від зміни кольору фону та приховування …

13 javascript  html  css  google-chrome 

У наступному прикладі при натисканні на мітку вхід змінюється. 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> Виконати фрагмент кодуСховати результатиРозгорніть фрагмент У Chrome при переміщенні курсору між подіями mousedownта mouseupподіями введення все ще спрацьовує, тоді …

13 javascript  html  css  label 

Проблема , здається, що деякі букви , як g, y, qі т.д. , які мають хвіст , що нахили вниз, не дозволяють для вертикального центрування. Ось зображення для демонстрації проблеми . Персонажі в зеленому полі в основному ідеальні, оскільки у них немає хвоста вниз. Ті, хто знаходиться у червоному полі, …

12 javascript  html  css  vertical-alignment 

Спробуйте запустити наступний фрагмент, а потім натисніть на поле. 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 

Я спробував багато способів зробити так, щоб таблиця підходила до сторінки (A4), як показано на малюнку: я багато шукав, але не зміг знайти нічого корисного в Інтернеті. Я використовую динамічну таблицю, все нормально, крім ширини таблиці. ось мій код: $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" class="bg-dark …

11 php  html  css  tcpdf 

Я намагаюся імітувати інші додатки для чату для мобільних пристроїв, коли, коли ви вибираєте send-messageтекстове поле і воно відкриває віртуальну клавіатуру, все ще переглядається найнижнє повідомлення. Здається, це не дивно зробити це за допомогою CSS, тому JavaScript resize(єдиний спосіб дізнатися, коли клавіатура відкривається та закривається, очевидно) події та ручна прокрутка …

10 javascript  android  html  css  reactjs 

Я вчора поставив подібне запитання, але пояснив це погано і не вказав на своє бажання чистого CSS рішення, яке, на мою думку, повинно бути можливим, тому я намагаюся знову. В основному, у мене є проблема, де у мене є розділ прокручуваних повідомлень та поле введення під ним. Коли я натискаю …

10 javascript  html  css  scroll  scrollbar 

Я працюю над веб-програмою на одній сторінці, яка зазвичай використовується в мобільних пристроях. Однією з його особливостей є режим карти, який тимчасово переймає все вікно браузера; масштаб відстані та деякі елементи керування додаються до чотирьох кутів карти. Ось невеликий знімок карти, щоб ви могли сказати, про що я говорю: Карта …

10 html  css  mobile-safari  fullscreen 

Для того, щоб заповнити всю висоту сторінки, я використовую height: 100%;теги html та body, і вона працює чудово, поки браузер не буде закритий та не відкритий. (Я не використовую 100 ВГт через проблеми на мобільних пристроях https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in -some-mobile-browsers.html ) Кроки до відтворення: Відкрийте https://angelika94.github.io/rick/ в Google Chrome на iPhone (ви …

10 html  css  height  google-chrome-app 

Передумови проблеми: я використовую katex для відображення математики на сторінці. Потім я хочу створити версію PDF частини цієї сторінки, тому я створю HTML-документ, що містить частину, яка повинна бути експортована, що вкладе всі CSS і передаю її рендереру. Візуалізатор не може отримати доступ до ресурсів вузла, тому все вкладено. Він …

10 javascript  css  webpack  data-uri 

З моменту випуску Chrome v78.0.3904.70 у мене виникають проблеми з використанням  властивості CSS white-space: nowrap;. Здається, що нерозривний простір викликає розрив лінії. Під час використання text-overflow: ellipsisфактичний текст не відображатиметься, оскільки він порушений поза контейнером. Здається, це трапляється, якщо текст занадто довгий для відображення. .box-inline { max-width: 120px; overflow: hidden; …

10 html  css  google-chrome  whitespace