クリックできない問題の続きがあり結局解決した。 原因はロゴのCSSで、元々下記のように指定していた。 .logo { height: 200px; margin-top: 20px; margin-bottom: 20px; margin-right: 8px; margin-left: 0px; } 画面上は高さ70pxのナビゲーションバーに納…

下記のようなスタイルだと子要素のwidthが100%にならず、謎の余白が残っていた。 .parentClass { display: flex; justify-content: center; width: 100%; } .childClass { width: 100%; } ブラウザで確認しても特に変なmargin, paddingは設定されていなかっ…

これも公式のYoutubeが上がっていた。めちゃくちゃ便利だな・・・。 www.youtube.com www.youtube.com

凡例ではなくチャートの中にカテゴリ名を埋め込みたかった問題は↓の動画で解決した。 chartjs-plugin-datalabelsのインストールにちょっと手間取ったけどそれも--legacy-peer-depsで一旦Skip。 やっぱり公式の提供する情報を参照するのが一番。 www.youtube.…

Pie Chartの表示が下部に寄っていたのでなんでかなと思っていたが、titleの表示がTrueになっていたからだった。 falseに変えることで中央寄せになってリサイズされて解決。 const options = { maintainAspectRatio: true, responsive: true, plugins: { lege…

リサイズ問題が少しだけ進展 react-chartjs-2を使っている場合下記のように指定してやるとレスポンシブになる。 const options = { maintainAspectRatio: true, // アスペクト比を維持する responsive: true, // レスポンシブに対応する --- その他options -…

MVP的なものはできて機能はひと段落した。 次の課題はレイアウト・デザイン修正。 Chart.jsを使用して円グラフ、折れ線グラフを描いているのだか描画エリアのリサイズが上手く行かない。 通常のブラウザだとまぁまぁ見れる範囲で表示されるがMobileだと訳が…

とりあえず動かそうと思って書いたReactを多少なりとも綺麗にしようと思って修正を進めているのだけど、どこまでComponent化するのが良いかがいまいちわからない。今ランキング表示するSPAを作っていて、繰り返し処理するタイルはComponent化したのだけど、…

POSTGRES -> Docker Desktopで実行 FAST API -> uvicorn main:app React(VITA) -> npm start

ずっと詰まっていたところが解決した。結論から言うと、 該当コンポーネントの上に位置しているナビゲーションバーのCSSでposition: fixed;としていたのをposition: sticky;に修正することで下部のコンポーネントの最初の要素がクリッカブルになって無事解決…

ReactでSPAを書いているのだが、一つだけハマってまだ抜け出せないバグが。あるコンポーネントの最初のボタン・リンク要素だけイベントハンドリングが上手く行かず、クリックしても何も起こらないと言う事象が発生している。コードのイメージはこんな感じ。 …