いつも大変お世話になっております。
下記、質問にて、一覧画面の複数行の表示はできたのですが、
一覧画面で表示している全ての項目ではなく、特定の項目のみを指定して
複数行で表示させることは可能でしょうか？
また、項目の表示幅も変更したいと考えているのですが、
複数行のCSSを参考に単純に下記のように幅の設定を行っても
できないのですが、どのようにしたらできますでしょうか？
div.line-cell-gaia.recordlist-ellipsis-gaia span{ width:20%;}
こちらについても、特定の項目の幅を設定することも可能でしょうか？
お手数でございますが、ご教授お願い致します。
Nao さん
cstapの瀧ヶ平です。
特定の項目のみにスタイルを設定したいのであれば、リンク先のCSSのセレクタをそのまま使うのでは厳しいと思います。やるならば開発者ツールなどで要素のクラスなどを確認して適切に指定できるようなCSSを書くのが手っ取り早いかと。
たとえばレコード一覧の4列目の項目だけ複数行にするのであれば、以下のようにできます。
.recordlist-cell-gaia:nth-child(4) span {
white-space: pre-line;
text-overflow: clip;
}
参考になりますでしょうか
瀧ヶ平様
ご回答ありがとうございます。
開発者ツールで要素のクラスを確認してみると、下記のようになっていました。
*-----------------------------------*
<td class=“recordlist-cell-gaia recordlist-multiple_line_text-gaia value-5147485”>
<div class=“line-cell-gaia recordlist-ellipsis-gaia”>
<span>
こちらにレコードの入力内容が記載されています。
</span>
</div>
</td>
*-----------------------------------*
瀧ヶ平様からご指示あった、下記で設定すると変更が出来なかったのですが、
*-----------------------------------*
.recordlist-cell-gaia:nth-child(4) span
*-----------------------------------*
「適切に指定できるようなCSSを書く」というのは
上記の要素のクラスのどの部分で指定すればよろしいでしょうか。
ご教授お願い致します。
Nao さん
申し訳ないのですが、当該部分のHTML情報だけではCSSの指定を考えるのは難しいです。
適切に制定できるCSSを書くというのは、CSSのセレクタ及び疑似クラスを組み合わせて適切にスタイルを指定するという意味です。
私が提示したCSSの場合、同じ親要素を持つ recordlist-cell-gaiaというクラスを持つ要素のうち4番目の要素の子孫要素のspanタグ要素に対してwhite-space及びtext-overflowの設定を行うというものですが、4を適切な数値に変更すれば問題なく動くはずです。(参考: nth-child疑似クラス , 子孫セレクタ)
また複数行フィールド以外のフィールドだった場合は改行文字が含まれていないので複数行にはならないかもしれません。その場合は要素の高さを指定するか、white-space: pre-wrap等を指定すると良いかもしれません。
CSSには詳細度というより詳細な指定ほど優先して適用されるという仕組みがあるのでもともとあるkintoneのCSSや他に設定しているCSSの指定がどうなっているかによっては適用されない場合もあるのでこちらで原因など判断はできかねます。(一覧画面の要素の幅に関してはこの詳細度の問題でテーブル要素のヘッダ要素に対して!important指定をしない場合CSSで直接は指定できません)
瀧ヶ平様
早速のご回答ありがとうございます。
ご指示いただいた、.recordlist-cell-gaia:nth-child(4) spanの(4)の部分を変更
しましたら、変更ができました。
私の勘違いと勉強不足により、お手数をお掛けして申し訳ございません。。。
また、CSSの詳細度についても、丁寧に教えていただき、ありがとうございます。
お世話になっております。
度々の質問で恐縮ですが、下記質問で、
CSSで「!important」を指定すると、表示幅が固定され、Cybozuのデフォルトで出来る
ユーザーで幅を可変することが出来なくなるのですが、
th.recordlist-header-cell-gaia:nth-child(2) {
width: 100px!important;
}
初期で表示される表示幅を指定しつつ、ユーザーで可変することも
可能なようにすることはできますでしょうか？
ご教授頂けると幸いでございます。