kintoneのレコード一覧画面では、横幅は自由に変更できますが、縦幅は変更できません。
ユーザー選択や添付ファイルが沢山指定されていると縦長になって少し見づらいです。
CSSを使えば縦幅を固定できます。
枠を溢れるものはスクロールして表示できます。
さらに、文字列複数行も改行して全て枠内に表示できます。
この記事ではCSSを使い、レコード一覧画面の行の縦幅を固定する方法を解説します。
- kintoneのCSSカスタマイズでは、レコード一覧画面の行の縦幅を固定できます。
- 枠を溢れるものはスクロールして表示します。
- 文字列複数行は改行して全て枠内に表示します。
kintoneのレコード一覧画面の列幅と行幅の調整
kintoneのレコード一覧画面では列の横幅は左右に調整することができます。
フィールド名の間の境界線にマウスカーソルを持っていき、ドラッグすると列幅を自由に調整できます。
一方で、行の縦幅を調整することはできません。
ユーザー選択、組織選択、グループ選択、添付ファイルなどは、フィールドに指定したものが全て表示されるため、沢山指定すると縦長になっていきます。
そこで、CSSを使い、行の縦幅が均一になるように固定してみます。
枠を溢れるものはスクロールして表示できるようにします。
さらに、文字列複数行は通常は1行で表示されますが、これを改行して全て枠内に表示できるようにします。
こちらも枠を溢れるものはスクロールして表示できるようにします。
レコード一覧画面の行の縦幅を固定する
CSSを使い、レコード一覧画面の行の縦幅を固定してみます。
/* レコード一覧の縦幅を変える */
.recordlist-cell-gaia > div, .recordlist-cell-gaia > ul {
height: 50px; /* 行の高さ */
overflow-y: scroll; /* 文字が溢れたらスクロールバーを表示 */
}
/* 文字列複数行を改行する */
.recordlist-cell-gaia span {
white-space: pre-wrap;
}
/* 文字列複数行のツールチップを非表示にする */
.recordlist-tooltip-gaia {
display: none;
}各セルはrecordlist-cell-gaiaクラスが付いており、その配下にdivまたはul要素で構成されています。
それらのクラスに対して、heightで高さを固定します。
枠を溢れるものは縦スクロールできるようにするため、overflow-yにscrollを指定します。
次に、文字列複数行に対してCSSを設定します。
文字列複数行には、white-spaceにpre-wrapを指定し、枠内で改行されるようにします。
文字列複数行は通常は1行で表示されますが、横幅を溢れるときはマウスカーソルを当てることで全行がツールチップ表示されます。
このツールチップ表示は不要になるため非表示にします。
recordlist-tooltip-gaiaクラスのdisplayにnoneを指定します。
上図の通り、対応者（ユーザー選択）や添付ファイルが行の縦幅を超えても、全ての行幅は均一に固定されています。
また、対応内容（文字列複数行）は途中で改行され、縦スクロールできています。
- kintoneのCSSカスタマイズでは、レコード一覧画面の行の縦幅を固定できます。
- 枠を溢れるものはスクロールして表示します。
- 文字列複数行は改行して全て枠内に表示します。
