ブログ

2019/12/02
【プリザンター】 第22回)一覧画面の列幅の固定方法

一覧画面の列幅

こんにちは、CCS田中です。

前回、一覧画面での編集について説明しましたが、今回は一覧画面での列幅の設定について説明します。
プリザンターを使っていると、一覧画面では指定した項目は指定した順番で一覧表示されるのは非常に便利ですが、思ったような列幅にならずに、表示が崩れてしまうことがあると思います。
以前、「第13回)一覧表示での改行させたくない場合の設定方法 」で、余計な改行をさせない方法は説明しましたが、これだけだとうまく行かない場合に、列幅を固定する方法で調整するのがよいと思います。
第13回の時と同様にスタイルを使って設定していきます。

スタイルで列幅を指定する

以下の手順で設定します。

1.列幅を固定に設定する対象のテーブルを開きます。
2.「管理」→「テーブルの管理」をクリックします。
3.「スタイル」タブを選択します。
4.「新規作成」ボタンをクリックし、ダイアログを表示します。
5.「タイトル」に「列幅固定」等の任意のタイトルを入力します。
6.「スタイル」に以下を参考にスタイルを入力します。
下記は、「タイトル」を80px、「分類A」を100pxに固定にする場合の例です。

[data-name="Title"] {
width: 80px;
}
[data-name="ClassA"] {
width: 100px;
}

※data-name= の後ろに指定している名前は、調整する列の名前(以下参照)を指定します。

分類:ClassA~ClassZ
日付:DateA~DateZ
チェック:CheckA~CheckZ
数値:NumA~NumZ
説明:DescriptionA~DescriptionZ
状況:Status
タイトル:Title
※この名前が分からないときは、プリザンターの一覧画面のソースのthタブにあるdata-nameの部分を確認してください。

7.出力先の「全て」のチェックを外して、「一覧」にチェックします。
8.ダイアログの「変更」ボタンをクリックします。
9.画面下部にある「更新」ボタンをクリックします。

ここまでで、設定が完了しますので、その後列幅固定したテーブルの一覧画面を開き、列の幅を確認します。

まとめ

さて、いかがでしたか?

今回は一覧画面の列幅の固定方法について説明しました。一覧画面がくずれていると気分がよくありませんが、きれいに表示されると仕事のやるきも変わってくると思います。間違いも少なくなるのではないでしょうか?

導入の支援、スクリプト開発などでお困りの場合は、当社で支援もいたします。

☆☆ブログ内容への質問や追加説明をご希望の方は
【問い合わせフォーム】 こちら からお気軽にお問い合わせください☆☆

PAGE TOP