CSS のトラブルシューティング
カスタム CSS の実装にエラーが発生した場合は、以下のトラブルシューティング項目を調査できます。
問題
スタイル属性がオーバーライドされません。
ソリューション
ウィジェットコア定義に !important または inline スタイルがある場合、ユーザーインタフェースからスタイルを設定するか、CSS 内で !important を使用する必要があります。
また、既存の CSS セレクタのいずれかが、カスタム規則セット内のセレクタよりも大きなウェイトを持っていないか (詳細でないか) も確認してください。
問題
CSS ファイルリポジトリの CSS ファイルを、マッシュアップに適用できません。
ソリューション
CSS ファイルがファイルリポジトリ内に存在し、そのファイルへのパスが正しいことを確認します。
または
CSS ファイルがランタイム ThingWorx CSS に含まれていることを確認します。
問題
ThingWorx が拡張機能のインポートに失敗します。
ソリューション
拡張機能がすでにインストールされているが、最新の変更を行った場合は、metadata.xml ファイルのバージョン番号を更新する必要があります。
問題
CSS の最新の変更が無視されます。
ソリューション
CSS を ThingWorx にマージしていない場合は、ブラウザのキャッシュをクリアします (デバッグモードで: 「再表示」ボタンを押しながら、キャッシュをクリアします)。
CSS を ThingWorx にマージしている場合は、サーバーを再起動し、ローカルサーバーの URL またはリンクを使用します。
問題
FireFox でメニューウィジェット内にスクロールバーが表示されます。ウィジェットのコンテンツが格納されているコンテナに display: inline-block 規則を適用した場合にこの問題が出現します。
ソリューション
スクロールバーを非表示にするには、ウィジェットが含まれているマッシュアップに以下の CSS を適用します。
.custom-css-class-name .widget-content {
overflow: hidden;
}
CSS セレクタは div エレメントをウィジェットのコンテンツに対応付けます。custom-css-class-name を、メニューウィジェットのターゲットとなるウィジェットのカスタム CSS クラス名に置き換えます。プロパティ overflow: hidden は、ブラウザでコンテナ上に表示されるのすべてのスクロールバーを非表示にします。
これは役に立ちましたか?