Ant-design: Datepicker Selectを同時に使用する場合、配置はありません

作成日 2016年10月19日  ·  5コメント  ·  ソース: ant-design/ant-design

問題が発生する環境は次のとおりです。

  • antdバージョン:2.1.0
  • オペレーティングシステムとそのバージョン:win7 x64
  • ブラウザとそのバージョン:chrome 53.0.2785.143 m

    あなたは何をした?

DatepickerSelectを同時に使用する

期待する結果は次のとおりです。

2つのコンポーネントが整列

実際の結果は次のとおりです。

2つのコントロールが整列していないため、修正するにはDatePickerにverticalAlign: 'middle'スタイルを追加する必要があります

再現可能なオンラインデモ

http://codepen.io/daysv/pen/BLqbxw

🐛 Bug

最も参考になるコメント

  1. [ vertical-align: middleを削除]を選択し、デフォルトのvertical-align: baselineをInput、DatePickerなどと一致させます。
  2. vertical-align: baselineは、Select内の自然な植字テキストに従って配置されます。Select内のプレースホルダーと検索ボックスは絶対に配置される(配置されない)ため、ここでは、SelectTo内に常に存在するテキストを追加するというちょっとしたトリックを使用します。整列します。

    .ant-select-selection--single .ant-select-selection__rendered::after {
     content: '.';
     visibility: hidden;
     pointer-events: none;
    }
    
  3. overflow: hidden .ant-select-selection__renderedは、テキストの配置に影響します。削除してください。
  4. 削除すると、元のテキストのオーバーフロー省略記号効果が破棄され、1つずつ修正されます。
  5. 損傷したコンボボックスをさらに修復します。

多くのスタイルの詳細が含まれています...

全てのコメント5件

Selectvertical-align: middle 、DatePickerは追加するのを忘れているはずです。

これを変更させてください。Selectはvertical-align: middleはなりません。

  1. [ vertical-align: middleを削除]を選択し、デフォルトのvertical-align: baselineをInput、DatePickerなどと一致させます。
  2. vertical-align: baselineは、Select内の自然な植字テキストに従って配置されます。Select内のプレースホルダーと検索ボックスは絶対に配置される(配置されない)ため、ここでは、SelectTo内に常に存在するテキストを追加するというちょっとしたトリックを使用します。整列します。

    .ant-select-selection--single .ant-select-selection__rendered::after {
     content: '.';
     visibility: hidden;
     pointer-events: none;
    }
    
  3. overflow: hidden .ant-select-selection__renderedは、テキストの配置に影響します。削除してください。
  4. 削除すると、元のテキストのオーバーフロー省略記号効果が破棄され、1つずつ修正されます。
  5. 損傷したコンボボックスをさらに修復します。

多くのスタイルの詳細が含まれています...

さらに、複数選択選択のsmall/largeスタイルが修正されました。

このスレッドは最近のアクティビティがないため、自動的にロックされています。 関連するバグの新しい問題を開き、このスレッドの関連するコメントにリンクしてください。

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