Questions tagged «css»

我有一张桌子，上面有数字。当我单击表格中的一个单元格时，它将切换活动状态。我想选择一个单元格，然后按crtl并选择另一个单元格，因此第一个和第二个之间的单元格将变为活动状态。如何执行呢？ codepen https://codepen.io/geeny273/pen/GRJXBQP <div id="grid"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">3</div> <div class="cell">4</div> <div class="cell">5</div> <div class="cell">6</div> </div> const grid = document.getElementById("grid") grid.onclick = (event) => { event.stopPropagation(); const { className } = event.target; if (className.includes('cell')) { if (className.includes('active')) { event.target.className = 'cell'; } else { event.target.className = 'cell active'; …

16 javascript  html  css 

我已经MyStyledButton基于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 } = props; return ( <Button classes={{ root: buttonStyle.root }} …

16 javascript  css  reactjs  jestjs  enzyme 

我正在尝试使用CSS创建过山车风格的动画。 我想知道在循环阶段如何弯曲“过山车”。 我正在寻找所有CSS解决方案，但是如果需要一点JavaScript，我可以接受。 到目前为止，我的代码： #container { width: 200px; height: 300px; margin-top: 50px; position: relative; animation: 10s infinite loop; animation-timing-function: linear; } #coaster { width: 100px; height: 10px; background: lightblue; position: absolute; bottom: 0; left: 1px; right: 1px; margin: 0 auto; } @keyframes loop { from { margin-left: -200px; } 30% …

15 html  css  css-animations  css-transforms 

我有以下代码段（需要以全屏模式查看），我试图将<main>元素直接放置在元素下方<header>。我将<header>其固定在一个位置，因为当用户滚动浏览内容时，我希望它停留在屏幕顶部<main>元素中。我已经尝试了所有我知道的东西，但是我能想到的最好的办法是将该<header>元素放在该元素的顶部<main>，这样可以减少大部分内容。 我想出的最接近的解决方案是在<main>元素上加上一个推测的顶部填充，以便清除<header>。但是，此解决方案无法很好地说明各种屏幕尺寸，因为我使用的是rem sizing而不是px。当将多个元素放置在<header>使用相对或基于百分比的高度的元素内时，顶部填充的想法变得更糟。在一个屏幕尺寸上，所有内容都可以完美地排列在一起；在另一个屏幕尺寸上，内容可能相去甚远。 最后，我知道我可以使用jQuery动态设置顶部填充，但是它似乎并不总是能很好地工作。想知道是否有一个纯CSS / HTML解决方案。 谁能告诉我我在这里想念的东西吗？我的最佳填充方法是唯一可行的解​​决方案吗？ $(document).ready(function() { $('#navToggle').click(function() { $("div#bottom-container > nav").slideToggle(); }); $(window).resize(function() { if(window.innerWidth >= "751") { $("header > div#bottom-container > nav").show(); }else { $("header > div#bottom-container > nav").hide(); } }); $("header > div#bottom-container > nav > ul > li > a").click(function(e) { if (window.innerWidth <= …

15 html  css  css-position  fixed 

这赏金已经结束。这个问题的答案有资格获得+500声望奖励。赏金宽限期在23小时内结束。 Ferit希望引起更多关于这个问题的注意。 如何在不假定宽高比的情况下使iframe响应？例如，内容可以具有任何宽度或高度，在渲染之前是未知的。 注意，您可以使用Javascript。 例： <div id="iframe-container"> <iframe/> </div> 调整大小iframe-container以使其内容几乎不能容纳在里面而没有多余的空间，换句话说，有足够的空间容纳内容，因此无需滚动即可显示内容，但没有多余的空间。容器完美地包裹了iframe。 假设内容的纵横比为16：9，这说明了如何使iframe响应。但是在这个问题上，纵横比是可变的。

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) 0%); background-position: left bottom; background-size: 38px 1px; background-repeat: repeat-x; width: 220px; box-sizing: border-box; outline:none; } <input type="text" id="number_text" maxlength="6" pattern="\d{6}" value="1234" > 运行代码段隐藏结果展开摘要 帮助我摆脱这个问题。谢谢

14 javascript  jquery  html  css 

我正在处理HTML表并html-to-paper在vue.js中使用该表将其打印到打印机，我正在做的工作是单击添加以创建新行，然后单击打印，我试图打印该表，但它没有任何仅显示空白单元格的数据 代码应用程序 <template> <div id="app"> <button type="button" @click="btnOnClick">Add</button> <div id="printMe"> <table class="table table-striped table-hover table-bordered mainTable" id="Table"> <thead> <tr> <th class="itemName">Item Name</th> <th>Quantity</th> <th>Selling Price</th> <th>Amount</th> </tr> </thead> <tbody> <tr v-for="(tableData, k) in tableDatas" :key="k"> <td> <input class="form-control" readonly v-model="tableData.itemname" /> </td> <td> <input class="form-control text-right" type="text" min="0" step=".01" v-model="tableData.quantity" …

14 javascript  css  vue.js  printing  vuejs2 

Chrome浏览器自动填充去除的效果background-color，并background-image从Username与Password输入字段。 自动完成之前 自动完成后 但是Chrome浏览器的自动完成功能会在输入中隐藏我的图标，也更改了我的图标background-color。所以我需要我的图标原样保留在输入中。 是否可以阻止Chrome浏览器更改字段的背景色并隐藏图像？ .form-section .form-control { border-radius: 4px; background-color: #f7f8fa; border: none; padding-left: 62px; height: 51px; font-size: 16px; background-repeat: no-repeat; background-position: left 17px center; } .form-section .form-control:focus { -webkit-box-shadow: none; box-shadow: none; } .form-section .form-group { margin-bottom: 21px; } .form-section .form-control[type="email"] { background-image: url('https://i.stack.imgur.com/xhx3w.png'); } .form-section .form-control[type="password"] { …

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事件之间移动光标时，输入仍会被触发，而在Firefox中，此复选框不会更改状态。 有没有办法来解决这个问题？（不使用JavaScript事件侦听器） Firefox版本： 69.0.3 (64-bit) 使用Chrome浏览器时的全套操作。 按下标签上方的按钮 仍然按住按钮的同时，将光标移动到周围（甚至在标签之外） 将光标返回到标签 释放按钮

13 javascript  html  css  label 

这个问题似乎是某些字母一样g，y，q等有一个尾巴向下倾斜，不允许垂直居中。这是展示问题的图像。 绿色框中的字符基本上是完美的，因为它们没有向下的尾巴。红色框中的内容演示了该问题。 我希望所有字符都垂直居中对齐。在图像中，尾巴向下的字符未垂直居中。这可以纠正吗？ 这是充分说明问题的小提琴。 .avatar { border-radius: 50%; display: inline-block; text-align: center; width: 125px; height: 125px; font-size: 60px; background-color: rgb(81, 75, 93); font-family: "Segoe UI"; margin-bottom: 10px; } .character { position: relative; top: 50%; transform: translateY(-50%); line-height: 100%; color: #fff; } <div class="avatar"> <div class="character">W</div> </div> <div class="avatar"> <div class="character">y</div> …

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 { width: 100px; height: 100px; border-radius: 5px; background-color: …

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 text-white">Description</th><th align="center" class="bg-dark text-white">Item Type</th></tr></thead><tbody><tr style="background-color: #f2f2f2;"><td align="center">1</td><td align="center">1001</td><td align="left">Pofak</td><td align="center">Fixed Price</td></tr><tr ><td align="center">2</td><td align="center">1002</td><td align="left">Ice</td><td align="center">Weight</td></tr><tr style="background-color: #f2f2f2;"><td align="center">3</td><td align="center">1003</td><td align="left">Minoo</td><td align="center">Fixed Price</td></tr><tr ><td align="center">4</td><td align="center">1004</td><td align="left">Bastani</td><td align="center">Fixed Price</td></tr><tr style="background-color: #f2f2f2;"><td align="center">5</td><td align="center">1005</td><td align="left">Chocolate</td><td align="center">Weight</td></tr><tr ><td …

11 php  html  css  tcpdf 

我正在尝试模仿其他移动聊天应用程序，在这些应用程序中，当您选择send-message文本框并打开虚拟键盘时，最底部的消息仍在显示中。似乎没有办法用CSS来做到这一点，所以JavaScript resize（显然是找出何时打开和关闭键盘的唯一方法）是事件和手动滚动以进行救援。 有人提供了这个解决方案，我发现了这个解决方案，两者似乎都可以工作。 除了一种情况。出于某种原因，如果您位于MOBILE_KEYBOARD_HEIGHT消息div底部（在我的情况下为250像素）以内，则当您关闭移动键盘时，会发生一些奇怪的情况。使用前一种解决方案，它会滚动到底部。使用后一种解决方案时，它会MOBILE_KEYBOARD_HEIGHT从底部向上滚动像素。 如果滚动到该高度以上，则上面提供的两个解决方案都可以正常工作。只有当您接近底部时，他们才会遇到这个小问题。 我以为可能只是我的程序导致了一些奇怪的流浪代码，但不，我什至重现了一个小提琴，它确实有这个问题。我很抱歉使调试变得如此困难，但是如果您在手机上访问https://jsfiddle.net/t596hy8d/6/show（显示后缀提供全屏模式），您应该可以看到同样的行为。 如果您向上滚动足够，打开和关闭键盘将保持该位置。但是，如果将键盘关闭在MOBILE_KEYBOARD_HEIGHT底部像素以内，则会发现它滚动到底部。 是什么原因造成的？ 这里的代码复制： window.onload = function(e){ document.querySelector(".messages").scrollTop = 10000; bottomScroller(document.querySelector(".messages")); } function bottomScroller(scroller) { let scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight; scroller.addEventListener('scroll', () => { scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight; }); window.addEventListener('resize', () => { scroller.scrollTop = scroller.scrollHeight - scrollBottom - …

10 javascript  android  html  css  reactjs 

昨天我问了一个类似的问题，但解释得很差，并且没有说明我对纯CSS解决方案的渴望，我认为这应该是可能的，因此我正在尝试。 基本上，我遇到了一个问题，即我有一个可滚动消息div，并且在其下方有一个输入字段。当我单击一个按钮时，我希望输入字段增加100像素，而消息区域也不滚动。 这是一个小提琴，充分展示了问题所在 如您所见，当您单击“添加边距”按钮时，消息div也将向上滚动。我希望它能保持原样。同样，如果您稍微向上滚动，因此只能看到倒数第二条消息，则单击按钮时应类似地保持该位置。 有趣的是，这种行为“有时”得以保留。例如，在某些情况下（我无法完全推断），滚动位置得以保留。我只希望它始终如一。 window.onload = function(e) { document.querySelector(".messages").scrollTop = 10000; }; function test() { document.querySelector(".send-message").classList.toggle("some-margin"); } .container { width: 400px; height: 300px; border: 1px solid #333; display: flex; flex-direction: column; } .messages { overflow-y: auto; height: 100%; } .send-message { width: 100%; display: flex; flex-direction: column; } .some-margin …

10 javascript  html  css  scroll  scrollbar 

我正在开发一个单页Web应用程序，该应用程序通常会在移动设备上使用。它的功能之一是地图模式，它会临时接管整个浏览器窗口。距离比例尺和一些控件连接到地图的四个角。这是地图的一些屏幕截图，因此您可以知道我在说什么： 该图是作为一个<div>与position: fixed所有四个坐标为零; 我还将在地图可见时临时将设置为<body>，overflow: hidden以处理基础应用程序显示远离原点滚动的情况。这足以使地图完全按照我在桌面浏览器上的方式工作。移动浏览器还要求我给meta视口标签加上类似的东西"width=device-width,user-scalable=no"，以使窗口的可见区域与视口完全对应。 几年前，当我最初编写此应用程序时，所有这些方法的运行都很漂亮，但是iOS Safari沿途停止了任何涉及缩放的元视口选项-显然有太多站点在错误地使用了标签，导致文本小得难以理解，但不可缩放。当前，如果在此浏览器上启用地图，则可能会获得稍微放大的视图，该视图会切断右侧和底部的那些按钮-您对此无能为力，因为所有触摸都被解释为地图的缩放/平移手势，而不是浏览器滚动。没有通过这些按钮访问的功能，地图就不是非常有用-没有右上角的按钮，您甚至无法关闭地图。唯一的方法是重新加载页面，这可能会导致未保存的数据丢失。 我肯定会添加history.pushState/ 的使用，onpopstate以便地图覆盖的行为就像单独的页面一样。您可以使用浏览器的“后退”按钮退出地图模式-但这不能解决由于缺少按钮而导致的其他功能损失。 我已经考虑过使用.requestFullscreen()来实现地图叠加层，但是并非所有地方都支持该应用程序可用。特别是，它显然根本无法在iPhone上使用，在iPad上，您会看到一个状态栏和一个巨大的“ X”按钮，该按钮覆盖您的内容-我的距离刻度可能不再可读。无论如何，这并不是我真正想要的语义-我需要整个窗口，而不是整个屏幕。 如何在现代浏览器上显示全窗口显示？我可以在该主题上找到的所有信息都涉及使用meta视口标记，但是正如我提到的那样，它不再起作用。

10 html  css  mobile-safari  fullscreen