Enterprise: ツールバー:検索フィールドの閉じるボタンの位置がずれています

作成日 2021年04月13日  ·  13コメント  ·  ソース: infor-design/enterprise

バグを説明する
ツールバー:検索フィールドの閉じるボタンの位置がずれています

再現するには

動作を再現する手順:

  1. https://main-enterprise.demo.design.infor.com/components/toolbar/example-no-action-button.htmlにアクセス
  2. 検索フィールドを開きます
  3. 画面を最小化してレスポンシブビューにする

予想される行動
「x」または閉じるボタンを揃える必要があります

バージョン
IDS 4.50

スクリーンショット
image

プラットホーム
すべての主要なブラウザとデバイス

追加のコンテキスト
該当なし

[2] type

最も参考になるコメント

@ rob2dは、検索フィールドへの変更を再検討できるかどうか疑問に思っていますか? この問題はほんの一握りで発生しているようです。 ここのルックアップフィールド内の検索フィールドにも同じ問題があります: https ://master-enterprise.demo.design.infor.com/components/lookup/example-index.html

ピクセル値の代わりにtransform: translateY()を使用することに関連していると思います。

元のチケットについて話したときはこれを覚えていませんでしたが、過去に変換を使用してこのタイプの調整を行うことは特に避けていました(理由のコンテキストを思い出せません)-結論としては、おそらくこれを元に戻す必要があります位置合わせのためにピクセル値を使用します。

全てのコメント13件

@ rob2dは、検索フィールドへの変更を再検討できるかどうか疑問に思っていますか? この問題はほんの一握りで発生しているようです。 ここのルックアップフィールド内の検索フィールドにも同じ問題があります: https ://master-enterprise.demo.design.infor.com/components/lookup/example-index.html

ピクセル値の代わりにtransform: translateY()を使用することに関連していると思います。

元のチケットについて話したときはこれを覚えていませんでしたが、過去に変換を使用してこのタイプの調整を行うことは特に避けていました(理由のコンテキストを思い出せません)-結論としては、おそらくこれを元に戻す必要があります位置合わせのためにピクセル値を使用します。

@EdwardCoyle yオフセットは約5〜6のケースで必要でしたが、最後のチケットはフィールドに行き過ぎたり、他のケースがどのようにラップされているかという構造のために絶対的なポジショニングでは取得できなかった視覚的なカットオフでした。フィールド(他の問題を引き起こした)、そしてそれがしなかった微妙なケースがありましたが、私はそれを逃しました。

次回チェックアウトするときに、これを調べて分離しようとします。これらの特定のケースでは、いくつかの競合するルールがあるように見えるため、より多くのコンテキストを持つクラスをコンポーネントレベルで挿入できる可能性があります。 それは以前の私の最初のチケットであり、なじみがなかったので、それを避けようとしました(ただし...そのチケットの中で最も多くはありませんが、うまくいけば十分です)。

フィールドが数ピクセル下にあるという小さな問題に加えて、 https://main-enterprise.demo.design.infor.com/components/swaplist/example-search.htmlも参照して

https://github.com/infor-design/enterprise/issues/5080

さらに2つの問題が投稿されていますhttps://github.com/infor-design/enterprise/issues/5096https://github.com/infor-design/enterprise/issues/5090

それらはすべて一緒に修正できると思います。

@tmcconechy最初と2番目の問題は実際には無関係です。

私は2番目のCSSをターゲットにしました/修正してテストしました...しかし、それが続く場合は、配置が競合するさまざまな方法でハードコーディングされているため、全体的にこれらの閉じるボタンを再考する方が良いかもしれません-機能は振り返って追加されましたが、絶対/フレックス位置なしでいくつかの悪いケースを作成しない解決策がなかったので、それはちょっとワクワクするような感じです(それが彼らがいくつかでダウンした最初の問題を引き起こしたものですケース)。

ほくろのワックはまさに​​それが何であるかです。 しかし、うまくいくケースごとにいくつかのcssを作成するだけかもしれません。 これを強制する方法で行われたので、他に何ができるかわかりません。 あなたが思いつくことができるものを見てください....一日の終わりにそれはかなりただ働く必要はありません

@tmcconechyこれは実際には他のものとは少し異なります。 これは実際には機能的であり、これまで気づかなかった問題です。これは、適切なスタイリングに関連しています。 途切れ途切れになっているメニューがあるので、スタイルは修正されませんでしたが、流れに出入りします。 しかし、フローが変更されるとランダムに削除されるis-openクラスもあります(これが原因だと思いますか?)。 コンテナをdisplay: inline-flexすると、非表示が解決されますが、新しいルールが導入されるため、一貫してスタイルを設定できます。

ここに隠れているdivを参照してください。実際には、小さい解像度で溢れています。

image

これはワームの小さな缶のように見えますが、これを適切に修正するには、スクリーンショットを更新する必要があるかもしれません。

image

ええ-テストで理解できます。 取得します。 このコードが古いことを考えると、修正をより具体的にターゲットにすることをお勧めします。

@tmcconechy

OKですが、次のようなケースがいくつかあります

https://main-enterprise.demo.design.infor.com/components/swaplist/example-search.html->スワップリストクラスをターゲットにすることができます
https://master-enterprise.demo.design.infor.com/components/lookup/example-index.html->ルックアップモーダルをターゲットにすることができます

他のいくつかは、タブまたはツールバーなどをターゲットにすることができます。 それはきれいではありませんが、あなたがより良いものを思い付かない場合。

@tmcconechyうんありがとう、スワップリストにクラスの修正があります。 このページの画面にあるものについて話していました。

(レイアウトにはまったく異なるバグがあります。たとえば、メニューがオーバーフローから消えただけですが、意図されたように見えますか?**またはその逆で、戻ってから消えます)

編集:文脈のためだけに、giphy:
searchfield_issue

ただし、当面はスタイリングのみに焦点を当てます。

QA合格。 ありがとうございました。
image

このページは役に立ちましたか?
0 / 5 - 0 評価