ブログ

2020/04/20
【プリザンター】 第41回)一覧で余計な幅を取っている列を何とかしたい

一覧画面での余計な列幅

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

以前に第13回のブログで一覧画面で改行をしないように設定する方法を説明しました。改行しないように設定した場合に、「ここの列幅がもう少し狭くなってくれた方が良い」ということはないでしょうか?
プリザンターでは、既定で最小列幅がきまっているものがあり(最大列幅も指定されているのですが)、それに引っ張られて入力内容が少ないのに余計な幅を取っている列がでてきてしまうのです。
この余計に幅を取っている列を小さくする方法を説明します。

列幅を狭くするスタイル

それではスタイルを作成します。
以下の手順で設定を行ってください。

以前説明したように、いくつかは改行をしないような設定にしておきます。その上で一部の列の最低幅を小さく設定します。

1.対象のテーブルを開きます。
2.上記メニューから、[管理]→[テーブルの管理]をクリックします。
3.[スタイル]タブをクリックします。
4.[新規作成]ボタンをクリックします。
5.タイトルに「列幅設定」等を入力します。
6.以下のスタイルをスタイル欄に入力します。
7.出力先の「全て」のチェックを外し、「一覧」にのみチェックを入れます。
8.[変更]ボタンをクリックします。
9.[スタイル]タブに戻り、[更新]ボタンをクリックします。

ここまでで、設定は完了です。
対象テーブルを開き、一覧を確認すると、設定前は余計な幅を取っていた列が狭くなっていることが確認きます。


#Grid > tbody > tr > td:nth-of-type(3),td:nth-of-type(4),td:nth-of-type(5){
 white-space: nowrap;
}
.grid-title-body{
 min-width:50px;
}


1~3行目は以前説明した通りで、改行をさせないように設定をしています。
4~6行目で、grid-title-bodyの要素に対して列幅を最低50ピクセルにするという指定をしています。

まとめ

さて、いかがでしたか?

今回は以前説明した列幅の関係の延長で最低幅の調整について説明しました。一覧が見にくくなると使いづらくなってしまいますので、少し手間ですがスタイルで調整してあげることで、使いやすいシステムになると思います。ぜひ試してみてください。
導入の支援、スクリプト開発などでお困りの場合は、当社で支援もいたします。

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

PAGE TOP