タグ付けされた質問 「css」

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>です。ただし、pxではなくrem sizingを使用しているため、このソリューションはさまざまな画面サイズを十分に考慮していません。<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 

アスペクト比を想定せずにiframeをレスポンシブにする方法は？たとえば、コンテンツには幅や高さがあり、レンダリング前は不明です。 JavaScriptを使用できることに注意してください。 例： <div id="iframe-container"> <iframe/> </div> iframe-container余計なスペースがなくてもコンテンツがかろうじて収まるようにサイズを調整します。つまり、コンテンツを表示するのに十分なスペースがあり、スクロールせずに表示できますが、余分なスペースはありません。コンテナはiframeを完全にラップします。 これは、コンテンツのアスペクト比が16：9であると想定して、iframeをレスポンシブにする方法を示しています。しかし、この質問では、アスペクト比は可変です。

14 javascript  html  css  iframe  responsive-design 

最後の数字を入力すると、最初の数字が内部に入りtext-box（消えます）、スペースが1つ追加されます。 外側をクリックした後、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 を使用してそのテーブルをプリンターに印刷しています。私がしていることは、追加をクリックして新しい行を作成し、クリックして印刷することです私はテーブルを印刷しようとしていますが、空のセルのみを表示するデータ コード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> <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" …

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）に合うようにさまざまな方法で試しました。多くの 検索を行いましたが、Webで役立つものを見つけることができませんでした。私は動的テーブルを使用していますが、テーブルの幅以外はすべて問題ありません。これが私のコードです： $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（明らかにキーボードが開いているときと閉じているときを確認する唯一の方法）イベントと手動でスクロールして救助します。 誰かが提供するこのソリューションを、私は見つけたこのソリューションの両方が動作するように見えます。 1つの場合を除いて。以下のためにいくつかのあなたが以内であれば理由、MOBILE_KEYBOARD_HEIGHT（私の場合は250個のピクセル）メッセージのdivの下のピクセルモバイルキーボードを閉じると、奇妙な何かが起こります。前者のソリューションでは、一番下までスクロールします。後者のソリューションでは、代わりに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とその下に入力フィールドがあるという問題があります。ボタンをクリックしたときに、メッセージのdivもスクロールせずに、入力フィールドを100ピクセル増やしたいと思います。 ここに問題全体を示すフィドルがあります ご覧のように、「マージンを追加」ボタンをクリックすると、メッセージのdivも上にスクロールします。そのままにしてもらいたいです。同様に、少し上にスクロールして最後から2番目のメッセージしか表示できない場合、ボタンをクリックしても、クリックしたときにその位置が維持されるはずです。 興味深いのは、この動作が「ときどき」維持されることです。たとえば、状況によっては（かなり推測することはできません）、スクロール位置が保持されます。私はそれが一貫してそのように振る舞うことを望みます。 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 

私は1ページのWebアプリに取り組んでいます。これは、モバイルデバイスで最も一般的に使用されます。その機能の1つはマップモードで、ブラウザウィンドウ全体を一時的に引き継ぎます。距離スケールといくつかのコントロールは、マップの四隅に接続されています。これが地図の小さなスクリーンショットですので、私が何を話しているのかわかります。 マップはAとして実装される<div>とposition: fixed、すべての4点の座標ゼロ。また、マップが表示され<body>ているoverflow: hidden間に一時的にをに設定して、基になるアプリの表示が原点から離れるようにスクロールされる場合を処理します。これで、マップをデスクトップブラウザで正確に機能させることができます。モバイルブラウザーでも"width=device-width,user-scalable=no"、ウィンドウの表示領域をビューポートに正確に対応させるために、メタビューポートタグにのようなものを指定する必要がありました。 私が最初にこのアプリを書いたとき、これはすべて美しく機能しましたが、iOS Safariは、スケーリングに関連するメタビューポートオプションのいずれかを尊重しなくなりました。まだズームできません。現在、このブラウザーでマップを有効にすると、わずかに拡大されたビューが表示され、右側と下部のボタンが切り取られ、何もできなくなります。、すべてのタッチが、ブラウザのスクロールではなく、マップのズーム/パンジェスチャとして解釈されるためです。これらのボタンからアクセスできる機能がないと、マップはそれほど役に立ちません。右上のボタンがないと、マップを閉じることさえできません。唯一の方法は、ページをリロードすることです。これにより、保存されていないデータが失われる可能性があります。 history.pushState/ の使用を確実に追加しonpopstateて、マップオーバーレイが別のページのように動作するようにします。ブラウザの[戻る]ボタンを使用してマップモードを終了することはできますが、ボタンがないために機能が失われることによる残りの問題には対処できません。 を使用.requestFullscreen()してマップオーバーレイを実装することを検討しましたが、それ以外の場合にアプリが使用できるすべての場所でサポートされるわけではありません。特に、それは明らかにiPhoneでは機能しません。iPadでは、ステータスバーとコンテンツに重なる巨大な「X」ボタンが表示されます。私の距離の目盛りはもう読めないでしょう。とにかく、意味的に私が本当に望んでいるものではありません- 全画面ではなく、全ウィンドウが必要です。 最新のブラウザでフルウィンドウ表示を機能させるにはどうすればよいですか？この件名で見つけることができるすべての情報は、メタビューポートタグの使用について語っていますが、前述のとおり、これは機能しません。

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のGoogle Chromeでhttps://angelika94.github.io/rick/を開きます（ナビゲーション（モーティとビール）がページの下部に配置されていることがわかります）ナビゲーション付きのCSS Rickのスクリーンショット ブラウザを閉じて、マルチタスクナビゲーションから削除します。https： //support.apple.com/en-us/HT201330 ブラウザーを再度開きます（下部のナビゲーションが「最初の画面」から移動したことがわかります。今、それを表示するにはスクロールする必要があります） ナビゲーションのないcss Rickのスクリーンショット これらの場合、ページは自動的に修正されます。 更新ページ デバイスを横向きに回転させます タブによるブラウザのナビゲーションの開閉 マルチタスクナビゲーションでブラウザを閉じずに閉じて再度開く なぜそれが起こるのですか？この動作を修正するにはどうすればよいですか？ 前もって感謝します！

10 html  css  height  google-chrome-app 

問題の背景：ページに数学を表示するためにkatexを使用しています。次に、そのページの一部のPDFバージョンを作成したいので、すべてのCSSをインライン化してレンダラーに渡す、エクスポートするパーツを含むHTMLドキュメントを作成します。レンダラーはノードのリソースにアクセスできないため、すべてがインライン化されます。フォント以外は完全に動作します。 url-loaderとbas64-inline-loaderの両方を試しましたが、生成されたフォントはインライン化されていません。生成されたCSSをデバッガーで検査しましたが、古いURLはまだ残っており、フォントのデータURLはありません。 これは私の現在のwebpack.config.jsです： const path = require('path'); const {CleanWebpackPlugin} = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: { "editor": './src/editor.js', "editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js', "json.worker": 'monaco-editor/esm/vs/language/json/json.worker', "css.worker": 'monaco-editor/esm/vs/language/css/css.worker', "html.worker": 'monaco-editor/esm/vs/language/html/html.worker', "ts.worker": 'monaco-editor/esm/vs/language/typescript/ts.worker', }, output: { globalObject: 'self', filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { …

10 javascript  css  webpack  data-uri