Angular+fomantic-uiのfuiDropdownMenuでレイアウトが崩れたとき

今回はAngular+fomantic-uiの環境で次のようにfuiDropdownMenuを使っていてレイアウトが崩れたとき何が原因だったのかについてお話ししていこうと思います。

Angular+fomantic-uiのfuiDropdownMenuでレイアウトが崩れたとき

Angularのバージョンは15.2.11で、fomantic-uiのバージョンは2.9.3、ngx-fomantic-uiのバージョンは0.11.7です。



Angular+fomantic-uiのfuiDropdownMenuでレイアウトが崩れたとき

結論を言うと私の場合は別のCSSファイルで「::ng-deep」を定義していたことが原因でした。

のような記述があり、この「max-height」と「!important」が悪さをしていました。

CSSファイルを少しずつ消すなどして何か別のクラスのCSSが悪さをしていないか特定していきましょう。

終わりに

今回はAngular+fomantic-uiの環境で冒頭の画像のようにfuiDropdownMenuを使っていてレイアウトが崩れたとき何が原因だったのかについてお話しいたしました。

最後までお読みいただきありがとうございます。
よろしければブログやTwitterでのシェアをお願いしております。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。

直接契約ができるフリーランスエージェント「エンハンス」を立ち上げました。
詳しくは下記LPをご参照ください。
https://enhance.decryption.co.jp/

Youtubeチャンネル開設いたしました。
チャンネル登録者1000人を目指しているので、良いと思った方はチャンネル登録をお願いしたいです。
https://www.youtube.com/channel/UC219XhmSRxmXltTy6COxSMw