«html» 태그된 질문

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

10 javascript  android  html  css  reactjs 

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

10 javascript  html  css  scroll  scrollbar 

간단한 랜딩 페이지에서 헤비급 단일 페이지 앱으로 클릭 할 때 성능 향상을 위해 다음과 같은 것을 사용하려고했습니다. <link rel="prefetch" href="https://example.com" as="document" /> <link rel="prefetch" href="https://example.com/app.js" as="script" /> <link rel="prefetch" href="https://example.com/app.css" as="style" /> 방문 페이지가 하위 도메인에있을 때 눈에 띄는 성능 향상이없는 것 같습니다. 말해봐 https://subdomain.example.com. 나는 방문에 대한 링크를 클릭하면 …

10 html  link-prefetch 

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

Chrome v78.0.3904.70이 출시 된 이후  CSS 속성 사용에 문제가 있습니다 white-space: nowrap;. 끊김없는 공간은 줄 바꿈을 일으키는 것으로 보입니다. 를 사용 text-overflow: ellipsis하면 실제 텍스트가 컨테이너 외부에서 분리되어 표시되지 않습니다. 텍스트가 너무 길어서 표시되지 않는 경우에만 발생합니다. .box-inline { max-width: 120px; overflow: hidden; height: 16px; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: …

10 html  css  google-chrome  whitespace 

내 코드의 작은 조각을 따르십시오. 왜 "아이폰"셀이 아이폰에서만 깜빡 거리는지 알고 싶을뿐입니다. 추신. 구조에 테이블이나 목록을 사용할 수 없습니다. 나는 또한 사용하려고했다 transform: translate3d(0,0,0);. 기본적으로 iPhone 및 iPad에서 Left 및 Top에 대해 첫 번째 셀이 고정되어 있어야합니다. HTML 및 CSS 만 사용 하여이 작업을 수행하고 싶습니다. 중대한 고정 솔루션으로 대답 …

10 html  css 

파일 대화 상자에서 파일을 선택한 후 확인을 클릭 한 후 무응답 / 페이지 지연을 제거하기 위해이 코드를 개선하려면 어떻게해야합니까? 크기가 약 50-100KB 인 파일을 테스트했습니다. function handleFileSelect(evt) { var files = evt.target.files; // FileList object // files is a FileList of File objects. List some properties. var output = []; …

9 javascript  html 

HTML과 CSS만으로 시각적으로 역동적이고 인터랙티브 한 경험을 만들도록 스스로에게 도전했습니다 (자바 스크립트 없음). 지금까지 순수 CSS 및 HTML에서 할 수 없었던 기능을 찾지 못했습니다. 이것은 아마도 조금 더 어려울 것입니다. 나는 두 번 클릭에서 사용자 방지하기 위해 필요 <a>, <input type="submit">그리고 <button>태그를. 이는 양식을 이중 제출하거나 실수로 URL에 2 개의 …

9 html  css 

Airpods Pro 페이지 에서 Apple과 동일한 효과를 애니메이션으로 만드는 래퍼를 만들었습니다 . 비디오를 조금씩 스크롤하면 기본적으로 비디오입니다. 비디오의 위치는 텍스트가 잘 스크롤되도록 고정되어 있습니다. 그러나 텍스트는 특정 구분 (텍스트 표시)의 오프셋 사이에있을 때만 표시됩니다. 그 부분은 잘 작동합니다. 이제 사용자가 비디오 끝으로 스크롤하여 애니메이션이 완료 되어 비디오 효과 래퍼가 고정 …

9 javascript  jquery  html  css 

의존적 드롭 다운이있는 양식이 있습니다. 이 보조 드롭 다운은 선택한 기본 옵션에 보조 옵션이없고 페이지가 처음로드 될 때 숨겨집니다. 양식이 제출 될 때마다 첫 번째 필드 만 지워집니다. 그러나 대부분의 드롭 다운은 동일하게 유지됩니다. 그러나 기본 드롭 다운에 변경이있을 때마다 스크립트가 작동하므로로드가 수행되므로 변경 사항을 구성하지 않고 선택 / 제출 …

9 javascript  python  html  django 

현재 정렬 된 열의 헤더에 아이콘이 표시되는 "정렬 가능"테이블이 있습니다. 정렬 아이콘은 텍스트 끝에 표시됩니다 (즉, LTR / RTL을 지원합니다). 현재을 사용하고 display:flex있습니다. 그러나 테이블 너비가 줄어들고 열 머리글 텍스트가 줄 바꿈되기 시작하면 어떤 열이 정렬되어 있는지 명확하지 않은 모호한 상태가됩니다. 대신 다음 요구 사항을 충족하고 싶습니다. 줄 바꿈 셀 …

9 html  css  layout  html-table  alignment 

마커에 문제가 있습니다. 진행률 표시 줄의 아무 곳에 나 표시 할 수 있도록 마커를 늘릴 수 있기를 원합니다. 아래 그림과 같이 GIF 질문 : 진행률 표시 줄에서 임의의 지점을 선택하고 마커를 늘릴 수 있기를 원합니다 (여러 마커 지점이 될 수 있음). 아래 코드로 어떻게하는지 모르겠습니다. var player = videojs('demo'); player.markers({ …

9 javascript  jquery  html  video.js 

사이드 바 / 탐색 컨텐츠 (부트 스트랩 사용)를 데스크탑에서 기본적으로 표시 (확장)하고 모바일에서 기본적으로 닫히고 모바일에서만 아이콘이 표시되도록하는 데 어려움을 겪고 있습니다. 나는 이것을 작동시키지 않는 것 같습니다. <nav class="menu menu-open" id="theMenu"> <div class="menu-wrap"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <i class="fa fa-bars menu-close d-lg-none" id="menu-toggle"></i> </button> …

9 javascript  html  css  bootstrap-4  responsive-design 

나는 모두 사양, 작업해야한다 구성 요소 구축 할 필요가 custom elements spec v0있어 사용되지 와 custom elements spec v1, 최신 안정 버전. custom elements v0사양으로 구성 요소를 빌드하면 일부 앱은 사용 polymer 2하고 있기 때문에 문제가 발생 polymer 1하며 custom elements v1사양에서 작동하지 않는 응용 프로그램 과 동일한 문제가 발생 …

9 javascript  html  web-component  polyfills  custom-element