AEM 6.5 オーサリングダイアログでのツールチップと検証メッセージテキストの折り返しの問題の解決

この記事では、Adobe Experience Manager(AEM) 6.5のオーサリングダイアログのツールチップと検証メッセージテキストが正しく折り返されず、単語が分割されたり、間隔が表示されたりする問題を特定し、トラブルシューティングする方法について説明します。

説明 description

環境

  • Adobe Experience Manager(AEM) 6.5
  • すぐに利用できるコンポーネントを使用してダイアログを作成する

問題/症状

  • オーサリングダイアログのツールヒントと検証メッセージテキストが、不適切な改行や視覚的な間隔で表示される。
  • ツールチップが短い場合でも、単語は途中で分割され、次の行にプッシュされる可能性があります(例:‘このフィールドに入力してください’)。

原因

この問題は、通常、単語区切りまたは間隔プロパティを適用する、すぐに使用できるクライアントライブラリのCSS ルールによって発生します。このプロパティを使用すると、ツールチップや検証メッセージの行で単語が分割されます。

解決策 resolution

ツールチップと検証メッセージのテキスト折り返しの問題を修正するには、次の手順に従います。

  1. オーサリングダイアログフィールドに短いツールチップまたは検証メッセージ(「このフィールド’に入力してください」など)を追加して、この問題を再現し、ダイアログ UIでテキストの折り返し動作を確認します。

  2. ブラウザー開発ツール (Chrome DevToolsなど)を使用して、ツールヒントまたは検証メッセージ要素を調べます。

    • 影響を受けるツールヒントを右クリックし、検査を選択します。
    • 計算済み タブで、次のCSS プロパティを確認します:width、max-width、word-break、overflow-wrap、およびwhite-space。
  3. プロジェクト固有のクライアントライブラリから読み込まれたCSS ルールのチェックを一時的に解除または無効にします(例:/etc.clientlibs/...または/apps/...)。

  4. これらのルールを無効にした後、ツールチップが正しく表示されるかどうかを確認します。 問題が解決せず、すぐに使用できるクライアントライブラリ(/libs/cq/gui/components/authoring/dialog/clientlibs/all.min.*.cssなど)にトレースされる場合は、コードまたは設定の変更が直接実行できない可能性があることに注意してください。

  5. カスタム CSSの上書きまたは設定によって問題を解決できない場合は、最新のAEM 6.5 サービスパックとリリースノート ​を確認して、公開されている修正プログラムが利用可能かどうかを判断してください。 公開されている修正がない場合は、Adobe サポート ​にお問い合わせください。

  6. 変更を加えたり、更新を適用したりした後で、ツールヒントと検証メッセージが、不要な単語の区切りや間隔の問題なく正しく表示されることを確認します。

recommendation-more-help
experience-cloud-kcs-help-kbarticles