新規投稿
フォローする

Form Bridge 入力フィールドの左端に余白を作りたい

フォームを作る際、

 ・ラベルで入力内容について説明

 ・↑のラベルの下に入力フィールドを並べる

といった配置にしたいのですが、kitnoneにはあるスペースフィールドがForm Bridgeには無い為

何も入力していないラベルを置くことで余白を作ってみました。

 

↓の青枠部分です。

この配置にした場合でも十分思った通りのレイアウトにはできているのですが、

スマホでの閲覧時には青枠部分が横1行を占めてしまう為に非表示にしなければならなかったり、

同じ幅に調整することが難しかったりということがあり、

Java ScriptかCSSを用いて調整したいと考えております。

 

任意のフィールドの左に余白を作成するコード例をいただけますと幸いです。

(任意のフィールドなので、Java Scriptでの解決になる気がしています)

宜しくお願いします。

0

1件のコメント

Avatar
三枝正典

以下のようにJava Scriptでコーディングし自己解決しました。

確認画面でもズレてしまうので、確認画面と入力画面でそれぞれ設定し直す必要があります。

 

var targetFields = ['左余白を作るフィールドのフィールドコード1', 'フィールド2'];
targetFields.forEach(function(targetField) {
document.querySelector('[data-vv-name="' + targetField + '"]').style.setProperty('width', '160px', 'important');
document.querySelector('[data-vv-name="' + targetField + '"]').parentNode.style.setProperty('width', '180px', 'important');
});
0
サインインしてコメントを残してください。