«css» 태그된 질문

material-uiMyStyledButton 기반 사용자 정의 버튼 ( )을 작성했습니다 . 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 

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: …

15 html  css  css-animations  css-transforms 

다음 스 니펫 (전체 화면 모드로 볼 필요가 있음)이 있습니다. <main>요소를 요소 바로 아래 에 배치하려고합니다 <header>. 나는이 <header>나는 그것이의 콘텐츠를 통해 사용자가 스크롤로 화면 상단에 있고 싶어하기 때문에 고정 된 위치를 <main>요소입니다. 내가 아는 모든 것을 시도했지만 가장 좋은 방법은 <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) 0%); background-position: left bottom; background-size: 38px 1px; background-repeat: repeat-x; …

14 javascript  jquery  html  css 

HTML 테이블 작업을 html-to-paper하고 vue.js에서 프린터로 테이블을 인쇄하고 있습니다. 추가 행을 추가하고 새 행을 만든 다음 인쇄를 클릭하면 테이블을 인쇄하려고하지만 테이블을 인쇄하지 않습니다. 빈 셀만 표시하는 모든 데이터 코드 App.vue <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> …

14 javascript  css  vue.js  printing  vuejs2 

크롬 브라우저 자동 채우기 효과를 제거 background-color하고 background-image에서 Username와 Password입력 필드를. 자동 완성 전 자동 완성 후 그러나 Chrome 브라우저 자동 완성은 입력에서 아이콘을 숨기고 아이콘을 변경했습니다 background-color. 따라서 아이콘은 그대로 입력에 있어야합니다. Chrome 브라우저 에서 필드의 배경색을 변경하거나 이미지를 숨기지 못하게 할 수 있습니까? .form-section .form-control { border-radius: 4px; …

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에서는 확인란이 상태를 변경하지 …

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 text-white">Description</th><th align="center" class="bg-dark text-white">Item …

11 php  html  css  tcpdf 

send-message텍스트 상자 를 선택 하고 가상 키보드를 열 때 가장 아래쪽 메시지가 여전히 표시 되는 다른 모바일 채팅 앱을 모방하려고합니다 . CSS로 놀랍게도 그렇게 할 수있는 방법이없는 것 같습니다. 따라서 JavaScript resize(키보드가 열리고 닫히는 시점을 알 수있는 방법 만) 이벤트와 수동으로 구조를 스크롤합니다. 누군가가 제공하는 이 솔루션을 나는 발견 이 …

10 javascript  android  html  css  reactjs 

내가 물었다 비슷한 질문을 어제하지만 가난을 설명하고, 내가 다시 노력하고, 그래서 가능해야한다고 생각 순수 CSS 솔루션에 대한 내 욕망을 지정하지 않았습니다. 기본적으로 스크롤 가능한 메시지 div와 그 아래에 입력 필드가있는 문제가 있습니다. 버튼을 클릭하면 메시지 div를 스크롤하지 않고도 입력 필드가 100 픽셀로 증가하고 싶습니다. 여기에 문제를 완전히 보여주는 바이올린이 있습니다. …

10 javascript  html  css  scroll  scrollbar 

단일 페이지 웹 앱을 개발 중이며 대부분 모바일 기기에서 사용됩니다. 그 기능 중 하나는 전체 브라우저 창을 일시적으로 점유하는 맵 모드입니다. 거리 눈금과 일부 컨트롤이지도의 네 모서리에 연결됩니다. 다음은지도에 대한 작은 스크린 샷입니다. 내가 말하고있는 것을 말할 수 있습니다. 지도는 <div>with position: fixed및 4 개의 좌표 0 으로 구현됩니다 . …

10 html  css  mobile-safari  fullscreen 

페이지의 전체 높이를 채우기 height: 100%;위해 html 및 body 태그에 사용 하며 브라우저를 닫았다가 다시 열 때까지 잘 작동합니다. (나는 모바일 장치의 문제로 인해 100vh를 사용하지 않습니다 https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in -some-mobile-browsers.html ) 재현 단계 : iPhone의 Chrome에서 https://angelika94.github.io/rick/ 을 엽니 다 (탐색 이 포함 된 CSS Rick의 스크린 샷 ( 페이지 하단에 …

10 html  css  height  google-chrome-app