Semantic UIのfuiDatepickerで「dynamic arrow」のダイヤマークが表示されるときの原因と対策

今回はSemantic UIのfuiDatepickerで「dynamic arrow」のclassを持ったダイヤマークが表示されるときの原因と対策についてご紹介いたします。



Semantic UIのfuiDatepickerで「dynamic arrow」のダイヤマークが表示されるときの原因と対策

Semantic UIのfuiDatepickerで「dynamic arrow」のダイヤマークが表示されるときの原因と対策

結論から言うと、Semantic UI自体のライブラリのバグです。

このダイヤマークはカレンダーを表示するときの吹き出しのような役目を果たしますが、たまに変な位置にダイヤマークが付くことがあるようです。

対策としては、プロジェクト全体のCSSにダイヤマークを指定してdisplay noneをつける方法があります。
なぜ個々のCSSではなくプロジェクト全体のCSSをいじるかというと、datepickerのポップアップのHTMLはbody直下につくので個々のファイルからは非常にいじりづらいからです。

CSSをつけるに当たっては、Semantic UIの下記のプルリクが参考になるかもしれません。
https://github.com/arfedulov/semantic-ui-calendar-react/issues/184

終わりに

今回はSemantic UIのfuiDatepickerで「dynamic arrow」のclassを持ったダイヤマークが表示されるときの原因と対策についてご紹介いたしました。

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






Semantic UI

Posted by ちこ