詳細画面が入力項目が多く大きくなって一杯になってしまうため、入力セルのpaddingのcss設定を変更したいのですが、
row-gaia .control-gaia {
position: relative;
float: left;
padding: 0 8px
;
上記の所を
.row-gaia .control-gaia {
padding-right: 0px;
padding-left:t: 0px;
}
としてもpadding-right、padding-left:t: 0px; へ値が変わりません。
尚、他のセレクターの所は変更できています。
ご教示お願いいたします。
White さん
おそらく記述ミスかと思われますが、私の環境では下記を修正し動作確認ができました。
修正箇所
padding-left:t: 0px;
修正後
padding-left: 0px;
以上になります。ご参考になれば幸いです。
ご教示ありがとうございました。単純ミスでした。詳細画面が大きくなってしまうため、計算フィールドを隠したり、標準機能のグループで調整後、詳細画面のカスタマイズやっています。
cssでpadding、margin、font-sizeで最低限なの目標は達成したのですが、可能ならもう少し詰めたいと思っています。
DOM構造の確認の仕方もわからず始めましたが、htmlの中でborder-box; width:でボックスサイズが定義されているようですね。入力フィールド間を詰めるのはここをいじらないと出来ないのでしょうか?私のレベルではチョット無理そうに思っています。
簡単に入力フィールド間(上下、左右)を詰める方法はないのでしょうか?
White さん
入力フィールドの大きさのことでしたら、上下（高さ）を詰めたい場合は、以前似たような質問に回答したことがありましたので、下記リンクをご参照ください。
左右の余白の調整には、上記リンク内のスタイル定義に padding を設定すれば実現できます。
以上になります。ご参考になれば幸いです。
川村 様
ご教示ありがとうございました。
#record-gaia input {
height: 22px;
}
のコードで文字(1行)、数値フィールドは、高さ縮小できました。文字(複数行)も高さを小さくするためelement.style { box-sizing: border-box; width: 189px ; height: 91px ; } をいじったのですが、うまく動作しません。いろいろ試したのですが、セレクタの指定に誤りがあるのでしょうか?
White さん
複数行テキストの高さと幅は、右下にサイズ変更をするUIがあるため、kintone の仕様上 style 属性で width と height が指定されています。それが原因で style 属性のスタイルが優先され、セレクタのスタイルが反映されません。!important を使えばスタイルのプロパティを優先することができますが、その場合サイズが固定されUIが崩れてしまいます。工夫すれば実現可能かと思いますが、ここでは割愛させていただきます。
.input-text-outer-cybozu .textarea-cybozu {
padding: 0;
width: 200px !important;
height: 200px !important;
}
上記スタイルの結果です。
余白のみでしたら問題ありません。
ちなみに、複数行テキストのサイズはアプリ設定のフォームから変更可能です。下と右にカーソルをあてると点線が表示されドラッグアンドドロップでサイズを変更します。（最小サイズはあります）
以上になります。ご参考になれば幸いです。
川村 様
Javascript、html、css等略素人且つ、高齢者の者です。現役時代に少し、ホストコンピューター用のシステム開発(自部門の事務システムを全社の基幹システムへ乗せる)に部署の代表で社内のシステム部門の人たちと一緒にプロジェクト加わったとき、システム仕様書を作ったり、簡単なプログラムを作ったりした程度の知識しかありません。
7月から住んでいる地域の任意団体の事務処理システムをExcel(vba)からキントーンに移行を進めて来ました。費用の関係から外部のプラグインを使ったり、カスタマイズの委託もできませんので、かなりてこずりましたが、ようやく今月から本格運用までこぎつけました。
導入前から入力項目数の関係から入力画面が大きくなってしまう事が予想されたため、サイボウズ様に相談しましたが、私のような素人では、cssで少し制御する程度しか無理そうな感じでした。
入力画面(入力フィールド)の横・縦を詰めるのは後回しで運用を始めましたが、数人で入力事務を実施するため、慣れないと入力漏れ等が発生しやすくなるため、もう少し改善したいと今回の問い合わせをさせていただきました。ご教示いただいた方法で縦方向はカスタマイズ前に対し、30%程度小さくできたように思います。(ノートパソコンでも略全項目が表示できるようになりました)
ご丁寧な解説本当にありがとうございました。
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。