web-dev-qa-db-ja.com

リストの幅は、いくつかの入力フィールドに基づいて動的に変化します

サービスの追加画面があり、基本情報を入力してサービスを追加し、そのサービスのバリアントの組み合わせを追加できます。

問題は、基本情報「見出し」のいずれかのフィールドに基づいて組み合わせリストの幅が変化することです。それは設計に矛盾をもたらしています。

さらに、組み合わせとサービスの間の関係を示すより良い方法はありますか?現在、彼らは離れて見えます。 Screenshot

3
Ahmad Alauddin

カードの組み合わせについて...まず、カードのビジュアルを削除して、各列の幅がその列の最大長によって可能な限り最も長い選択によって最初に駆動されるフラットテーブルレイアウトに配置します。その後、利用可能な不動産によって。これにより、スキャンが容易になり、1行が使用可能なスペースの全幅になります。また、テーブルの一番上(長くなる可能性がある場合は最良の選択)または一番下に新しい行の情報を追加するための+ボタンが付いた空白行が常に1つあるはずです。

カードを追加すると、ページへの視覚的なアプローチの残りの部分も不安定になります。

1
RCburn

スレッドごとに1つの質問をしてみてください。

最初の質問について、私は非常にシンプルでありながら満足のいく解決策を知っています。レイアウトに合わせてコンボボックスの幅を制限します。コンボボックスを開くと、オプションパーツがアイテムに対応するのに十分な幅になるか、特定のアイテムのコンテンツがフィールドのサイズを超える場合は、コンテンツを幅に合わせてトリミングし、トリミングされたことを示します(たとえば、最後に3つのドット)文字列、または小さな矢印右)。マウスをホバーすると、完全なコンテンツのバルーンが表示され、必要に応じて(ハード)ラップされます。つまり、バルーンの幅を次のように設定します。 60文字とそれ以上のものはすべて次の行に行きます。

私はあなたのロケールが何であるかわからないし、非常に長い単語(ドイツ語Fussbodenschleifmachinenverleihなど)に苦しんでいる場合は、ほとんどの場合、問題ありません。

1つの提案-テストデータを入力する場合は、実際のデータに似たものを使用してください。段落の場合はlipsum.com、偽の名前とアドレスの場合はmockaroo.com。イベントのテストデータははるかに良く見えます。

0
Mike

少し階層を追加して、@ rcburnの回答に追加します。参考のためにサンプルワイヤフレームを作成しました。

Sample Wireframe

0
Andrew Weibert