新規投稿
フォローする

Javascriptで作成したボタンを下揃え、もしくは中央揃えにしたいです。

現在、スペースフィールド(id=test)にボタン(Button)を以下のように設置していますが、隣のフィールド(文字列1行)と上揃えになっており、フィールドのタイトルの横にあるようになっています。見た目と操作性を踏まえると、フィールドの入力欄の横に置きたいので、下揃え(または中央揃え)にしたいのですが、どのようにすれば良いでしょうか。

kintone.app.record.getSpaceElement('test').appendChild(Button);

CSSの知識がありませんので、それを踏まえてご教示いただけると幸いです。
よろしくお願いいたします。
0

4件のコメント

Avatar
江田篤史

NSさん

ボタンにマージンを当てるのが容易かと思います。

Button.style.marginTop = '33px';

縦方向に揃える場合は、flexbox・inline-blockとvertical-align・positionあたりを使うのが正攻法ですが、kintoneのフィールドにはfloatが効いていたりするので難易度は高いかと思います。

1
Avatar
NS

江田篤史様

ご教示いただきありがとうございます。
下にずらすことが出来ました!

なお、同様なやり方で、ボタンの表示文字の大きさも変えられるのでしょうか?

追加の質問ですみません。

0
Avatar
江田篤史

NSさん

CSSのfont-sizeプロパティで指定できます。

Button.style.fontSize = '50px';

差し出がましいかとは思いますが、「CSS 文字の大きさ」などでGoogle検索すると情報が出てくるので、こちらでの質問より早く情報にたどり着けるかと思います。
CSSでプロパティ名がkebabケースとなっているものは、lower camelケースにすることで、JavaScript内で指定することができます。

CSS

Buttonのセレクタ {
margin-top: 33px;
font-size: 50px;
}

JavaScript

Button.style.marginTop = '33px';
Button.style.fontSize = '50px';
0
Avatar
NS

江田篤史様

ご丁寧にありがとうございます!
非常に助かりました。

デフォルトの文字サイズより小さくできませんでしたが、自力で調べてみようと思います。

ありがとうございました。

2
サインインしてコメントを残してください。