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

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: nowrap; } <div class="mar-rgt box-inline text-sm"><span class="label" style="background: rgb(176, 223, 246);"></span> Not meeting expecations</div> コードスニペットを実行する結果を非表示スニペットを展開 アプリケーションでいくつかの表示の問題が発生しています。これはバグですか、それともコードに問題がありますか？ このコードは、React 16でレンダリングされています。

10 html  css  google-chrome  whitespace 

私のコードの一部をフォローしています。「iphone」セルがiphoneからのみ点滅している理由を知りたくてたまらない。PS。構造にテーブルやリストを使用できません。私も使ってみましたtransform: translate3d(0,0,0);。 基本的に、iPhoneとiPadの左と上に、最初のセルをスティッキーにする必要があります。HTMLとCSSのみを使用してそれを実行したいと思います。 重要 固定の解答で答えないでください。テーブルが本体のどこに配置されるのかわかりません。ヘッダー、一部のコンテンツなどがあります。 コードスニペットを表示 .table { width: 2000px; position: relative; } .tr { overflow: visible; display: block; white-space: nowrap; font-size: 0; } .tc { border: 1px solid #DDD; display: inline-block; width: 100px; height: 100px; text-align: center; font-size: 12px; } .trh { background: #000; color: #FFF; position: -webkit-sticky; position: …

10 html  css 

購入時に注文の詳細を送信するeコマースアプリがあり、そのメールテンプレートを再設計しました。過去数日間、一部のお客様がメールのテキストの半分が欠落しているという報告を受けました。 最終的にスクリーンショットを取得した後、ダークモードを使用しているiPhoneで問題が発生していることがわかりました。これまでのところ、彼らはすべて、MailアプリまたはSafariでgmailを使用している顧客でした（両方とも同じ問題があります）。Gmailの要素が関連しているか、偶然かはわかりません。 私たちのメールはシンプルです。背景は白、見出しは灰色、本文は黒です。ダークモードでは、白い背景と灰色の見出しは変更されませんが、本文のテキストが黒から白に変更されます。白い背景では、白いテキストは明らかに見えず、メールには大量のコンテンツが欠落しているように見えます。 ダークモードによってテキストが黒から白に変わるのを防ぐためにできることはありますか？ メールにQRコードが埋め込まれていることにも注意してください。QRコードが認識されにくくなるため、ダークモードでメール全体の色を変更できる解決策が心配です。 。 編集：これはアプリのコードとは関係がないため、ダークモード用のiOSの開発に関するガイドラインは適用されません。これは、iOS 13のAppleのメールアプリがダークモードでHTMLメールを表示する方法の問題です。

10 ios  css  email  gmail  ios-darkmode 

一方で<meta name="viewport">、タグが標準化されていないですが、それは「原因事実上の支配にほとんどの携帯ブラウザで尊敬されています。」 真のWeb標準ではないことの欠点の1つは、詳細なドキュメントが他の標準ほど利用できないことです。CSSワーキンググループは、このための仕様を持っているので、それは私が主に権威の作品として使用していますものです。 私の主な質問は： 次の宣言の違いは何でしょうか？ <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="initial-scale=1.0"> あるいは、これらの2つの@viewport CSS at-rules の違いは何ですか？ /* Translated from <meta name="viewport" content="width=device-width, initial-scale=1.0"> */ @viewport { zoom: 1.0; min-width: extend-to-zoom; max-width: 100vw; } /* Translated from <meta name="viewport" content="initial-scale=1.0"> */ @viewport { zoom: 1.0; min-width: extend-to-zoom; max-width: extend-to-zoom; } これらの@viewport翻訳に到達した方法： …

9 css  viewport  meta-tags  meta 

他の要素をいくつか保持しているコンテナ要素がありますが、画面サイズによっては、その一部がさまざまな部分で不可解に切り取られます。HTMLページの幅を調整（クリックしてドラッグ）すると、コードサンドボックスリンクの動作を確認できます。メインコンテナーの境界線のみがレンダリングされ、子要素が影響を受けないようにするにはどうすればよいですか？ https://codesandbox.io/s/focused-tree-ms4f2 import React from "react"; import styled from "styled-components"; const StyledTextBox = styled.div` height: 15vh; width: 30vw; display: flex; flex-direction: column; margin: 0 auto; border: 1px solid black; background-color: #fff; > * { box-sizing: border-box; } `; const InputBox = styled.span` height: 35%; width: 100%; display: flex; border: none; …

9 javascript  css  reactjs 

選択したdivを展開し、残りのスペース（幅が固定されている最初のものを除く）に合わせて均等にストレッチすることで他のdivを適切に動作させるスクリプトを（ここでユーザーの助けを借りて）コード化しました。 そして、これが私が達成したいことの写真です： そのために、フレックスとトランジションを使用します。 それはうまく機能しますが、jQueryスクリプトは「400％」のストレッチ値を指定します（これはテストに最適です）。 ここで、選択したdivを「400％」の固定値ではなく、コンテンツに正確に合わせて拡大/縮小したいと思います。 どうすればいいのかわかりません。 出来ますか ？ divを複製してコンテンツに適合させ、その値を取得し、この値を使用してトランジションを行おうとしましたが、これはパーセンテージでの初期幅ですが、ピクセルでのターゲット値であることを意味します。それはうまくいきません。 ピクセル値をパーセンテージに変換すると、何らかの理由で結果がコンテンツに正確に適合しません。 すべての場合において、これはとにかく私が欲しいものを達成するための少し複雑な方法のようです。 選択したdivのコンテンツに合わせるために移行できるflexプロパティはありませんか？ ここにコードがあります（より読みやすくするために編集/簡略化されています）： var expanded = ''; $(document).on("click", ".div:not(:first-child)", function(e) { var thisInd =$(this).index(); if(expanded != thisInd) { //fit clicked fluid div to its content and reset the other fluid divs $(this).css("width", "400%"); $('.div').not(':first').not(this).css("width", "100%"); expanded = thisInd; } else …

9 javascript  jquery  css  flexbox  css-transitions 

私は、HTMLとCSSのみ（JavaScriptなし）で視覚的に動的でインタラクティブなエクスペリエンスを作成するように挑戦しました。これまでのところ、純粋なCSSやHTMLでは実行できなかった必要な機能に出会ったことはありません。これはおそらくもう少し難しいです。 私は、ダブルクリックからユーザーを防ぐために必要がある<a>、<input type="submit">と<button>タグ。これは、フォームを二重に送信したり、誤って2つのGETリクエストをURLに送信したりするのを防ぐためです。これは純粋なCSSでどのように実行できますか？disabledJSなしでは設定できない場合でも、2020年には、それを処理できるマスキングテクニックまたはスタイルの組み合わせが必要です。 これが試みの簡単な例です。 .clicky:focus{ display: none; pointer-events: none; } <a href="#down" class="clicky">test</a> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p id="down">target</p> コードスニペットを実行する結果を非表示スニペットを展開 残念ながら、これは実際のクリックイベントが何らかの理由で発生する前に無効にします。おそらくアンカーはテストする最良の方法ではありませんか？これからも挑戦していきます。

9 html  css 

次の仕様で、さまざまなサイズの画像と比率の画像ギャラリーを表示します。 画像間に空白（余白）はありません。 元の比率をできる限り尊重します。 リンクで囲まれた画像。 非JSソリューション。 画像が少し切り取られる可能性があります。 ポータブルソリューション。 表示される画像のセットはランダムです。 画像は左から右に表示する必要があります（列を使用できないようにします）。 次のフレックスボックスソリューションでそれを実現しました。 コードスニペットを表示 section { display: flex; flex-flow: row wrap; justify-content: center; } section a { flex: auto; } section img { height: 100%; width: 100%; object-fit: cover; } <!DOCTYPE html> <html lang="en"> <head> <title>Controlling flex growability</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> </style> …

9 css  flexbox  image-gallery 

私はAirpods Proページで Appleと同じ効果をアニメーション化したラッパーを作成しました。基本的にはビデオです。ビデオをスクロールすると、少しずつ再生されます。ビデオの位置は固定されているので、テキストはうまくスクロールします。ただし、テキストは、特定の分割のオフセット間（テキスト表示）にある場合にのみ表示されます。 その部分は正常に動作します。ここで、ユーザーがビデオの最後までスクロールしてアニメーションが終了したときに、video-effect-wrapperが固定位置から相対位置に移動するようにします。そのため、そのWebサイトは、通常、ビデオアニメーションの後にコンテンツをスクロールします。 JSFIDDLEコード+デモ これは私がすでに試したことの例です： //If video-animation ended: Make position of video-wrapper relative to continue scrolling if ($(window).scrollTop() >= $("#video-effect-wrapper").height()) { $(video).css("position", "relative"); $("#video-effect-wrapper .text").css("display", "none"); } この種の作品...しかし、スムーズ以外はすべてです。また、Webページを逆方向に逆スクロールできるようにする必要もあります。 この問題を修正しようとしたときに発生した問題： スクロール、および固定から相対への移行は、自然でスムーズな感じがする必要があります ラッパー自体は固定されておらず、.text要素が含まれています。ビデオは固定されているため、.text要素はビデオ要素を通過できます（エフェクトを作成します）。これらの.text要素は、解決策を見つけようとして問題を引き起こします

9 javascript  jquery  html  css 

トレジャーマップアニメーションを作成しました。最初に、パスは薄い灰色で表示されますが、アニメーションが始まると、塗りつぶしアニメーション ".road"が開始されると薄い灰色のダッシュが消えるか、黒色に変わります。私は塗りつぶしアニメーションがその位置を通過するときに、薄い灰色のダッシュ「.steps」が消えるのに苦労しています。 svg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .road { stroke-dasharray: 744; stroke-dashoffset: -744; animation: draw-road 10s infinite; } .steps { stroke-dasharray: -744; stroke-dashoffset: 744; animation: draw-steps 10s reverse; } @keyframes draw-road { 0% { stroke-dashoffset: 744; stroke: #000000; } 100% …

9 css  svg 

無限に回転する3Dホイールをシミュレートする1​​2項目のカルーセルを作成する必要があります。明確にするために、私はこの効果を正確に作成する必要があります： https://codepen.io/SitePoint/pen/yXWXaw（ここにあります） ただし、これらの追加機能を使用すると（特にデスクトップおよびモバイルでは）、次のようになります。 スライドはスワイプの手順を追う必要があります。つまり、スライドはスワイプ中に移動する必要があります（Swiperと同じ）。 速いスワイプで、勢いのある多くのスライドをスクロールするはずです（Swiperがで行うように freeScroll）。 次に、ホイールが回転を停止すると、（Swiperがと同様freeModeStickyに centeredSlides）前のスライドにスナップし、ユーザーから選択されたものになります。 slideChanged（Swiperのように）スライドが変わるたびに（のようなイベント）コールバックが必要です。 これらすべての理由から、Swiper 5.3.0が良い出発点になると思いました。 私はさまざまな回避策を試しましたが、この設定の方が優れていますが、これloop: trueはひどい回避策であり、問​​題を引き起こします（コメントを確認してください）。 var swiper = new Swiper(el_class, { slidesPerView: 1.5, spaceBetween: 25, centeredSlides: true, grabCursor: true, speed: 550, loop: true, // <== repeat infinitely the 12 items. with fast scroll at the end of a cycle it waits a …

9 javascript  css  carousel  swiper 

Material UIとそのテーマプロバイダー（JSSを使用）を使用しているアプリケーションがあります。 私は今、完全に本格的なReactライブラリーではないfullcalendar-reactを組み込んでいます。これは、元のフルカレンダーコードの薄いReactコンポーネントラッパーにすぎません。 つまり、要素のスタイルを制御するレンダープロップなどにアクセスすることはできません。 ただし、レンダリング時に呼び出されるコールバック（例：eventRenderメソッド）を介して、DOM要素に直接アクセスできます。 これが基本的なデモサンドボックスです。 次に、フルカレンダーコンポーネント（ボタンなど）を他のアプリケーションと同じルックアンドフィールにしたいと思います。 これを行う1つの方法は、使用しているクラス名を確認し、それに応じてスタイルを実装することにより、すべてのスタイルを手動でオーバーライドできることです。 または、ドキュメントで提案されているように、Bootstrapテーマを実装することもできます。 しかし、これらのソリューションのいずれかの問題は、次のとおりです。 大変な作業になるでしょう MUIテーマに変更を加えて、カレンダーのテーマを更新するのを忘れた場合、それらが異なるように見えるため、同期の問題が発生します。 私がしたいのは次のいずれかです： MUIテーマを魔法のようにBootstrapテーマに変換します。 または、次のようなMUIクラス名とカレンダークラス名の間のマッピングを作成します。 .fc-button = .MuiButtonBase-root.MuiButton-root.MuiButton-contained .fc-button-primary= .MuiButton-containedPrimary セレクターなどをマッサージして機能させる必要はありません（たとえば、MUIボタンには2つの内部スパンがありますが、フルカレンダーには1つしかない）。ほとんどの場合、テーマを変更します。2か所で変更する必要はありません。 @extend構文でSassのようなものを使用することは、私が考えていることです。Sassを使用してフルカレンダーCSSを簡単に作成できましたが、SassはどのようにしてMuiThemeにアクセスできますか？ おそらく私は反対のアプローチを取ることができます-MUIに「ここのこれらのクラス名はこれらのMUIクラスのようにスタイル設定する必要があります」と伝えます。 これをどのように解決するかについて具体的な提案はありますか？

9 css  reactjs  fullcalendar  jss 

現在ソートされている列のヘッダーにアイコンが表示される「ソート可能な」テーブルがあります。 ソートアイコンはテキストの最後に表示されます（つまり、LTR / RTLをサポートしています）。現在を使用していdisplay:flexます。ただし、テーブルの幅が小さくなり、列ヘッダーのテキストが折り返され始めると、並べ替えられている列が明確でないあいまいな状態になります。 代わりに、次の要件を満たしたいと思います。 アイコンは常に、テキストの最長の行の「端」に「ぴったり」と位置合わせされます（ラッピングセル/ボタンが広い場合でも）。 アイコンは、テキストの最後の行と下揃えにする必要もあります。 アイコンはそれ自体の行に折り返してはなりません。 ボタンが存在し、セルの幅全体に及ぶ必要があります。（内部のスタイル設定であり、マークアップは必要に応じて変更できます。） CSSとHTMLは、可能な場合のみ。 既知の/設定された列幅やヘッダーテキストに依存することはできません。 例えば： 私はの異なる組み合わせの束を試してきましたdisplay: inline/inline-block/flex/grid、position、::before/::after、とさえfloat（！）が、所望の動作を得ることができません。これが問題を示す私の現在のコードです： .table { border-collapse: collapse; width: 100%; } .thead { border-bottom: 3px solid #d0d3d3; } .thead .tr { vertical-align: bottom; } .button { padding: 1rem; text-align: start; font-family: Arial, "noto sans", sans-serif; font-size: 0.875rem; border: 0; background-color: …

9 html  css  layout  html-table  alignment 

サイドバー/ナビゲーションコンテンツ（Bootstrapを使用）をデフォルトでデスクトップに表示（展開）し、デフォルトでモバイルで閉じ、アイコンをモバイルでのみ表示しようとすると、実際に問題が発生します。これを機能させることができないようです。 <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> <div id="menu-logo"> <img src="Final_Logo.png" width="210" height="214" alt=""> </div> <div id="navbarToggleExternalContent"> <ul id="main-menu"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Writing</a> <a href="#">Events</a> <a href="#">Speaking</a> <a href="#">Music</a> </ul> <ul id="social-icons"> …

9 javascript  html  css  bootstrap-4  responsive-design 

スレートまたはProseMirrorを使用してエディターを作成し、インライン要素を使用しているときに、キャレットの位置と選択領域の周りでChromeの奇妙な動作を確認しています。問題1は、下の最初の図に示されています。テキストカーソルの位置が「f」の後ろにある場合、キャレットは画像の上部に表示されます。問題2は2番目の画像にあります。テキストを選択すると、インライン要素と同じ高さの強調表示された領域が表示されます。この動作を制御して、代わりにテキストの位置にキャレットを表示し、テキストの周囲のスペースのみを強調表示する方法はありますか（インライン画像によって行の高さが大きくなっている場合でも） ここで、Firefoxからの動作を模倣したいと思います。 ここでProseMirrorデモを使用してサンプル画像を作成しました：https ://prosemirror.net/examples/basic/ 最小例（おかげで@Kaiido）とJSBin。 <div contenteditable>Test text<img src="https://upload.wikimedia.org/wikipedia/en/9/9b/Yoda_Empire_Strikes_Back.png">Testing</div> これが他のオペレーティングシステムでどのように動作するかはわかりませんが、私はmacOS Catalinaを使用しています。

8 html  css  contenteditable  slatejs  prose-mirror