ドロップダウンの表示位置を調整したい

[edogawa-itpro]

改善内容

ラベル付きの文字フィールドの横にドロップダウンを配置すると上下がずれてしまう。

期待する動作

同じ高さで表示される。

画面ショット

[edogawa-itpro]

いくつかの解決方法があります。

1. 文字フィールドのラベルを非表示にして、別途ラベルを付ける
2. スペースのCSSを修正する
3. ドロップボックスのCSSを修正する

１が一般的な解決方法です。ただし「必須」チェックも外す必要があります。

2は以下のCSSをアプリに設定します。

.control-spacer-field-gaia  {
  display: flex;
  align-items: flex-end;
}

これは、Kintone標準のスペースの表示を下段に変更します。
フォームの設計でスペースの下の高さを文字フィールドと同じか若干低めにします。
アプリ内の他のスペースにも影響する点が注意です。

3もCSSの書き換えです。

.kintoneplugin-select-outer-box-ui {
  display: inline-block;
  padding: 30px 8px 0 8px !important;
}

ドロップダウンは、51-modern-default.css の select box を使っていますので、標準のドロップボックスには影響しません。
padding で上下左右のマージンを調整できます。
!important を書かないと優先されません。