tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:lightning:textareaタグの高さ指定を試してみました

lightning:textareaタグの高さ指定を試してみました。lightning:textareaはLighnitngコンポーネント開発でテキストエリアの入力ボックスを表示したいときに利用します。
f:id:tyoshikawa1106:20191112193630p:plain

Component Library


コードはこんな感じ。
f:id:tyoshikawa1106:20191112193523p:plain


表示はこんな感じ。
f:id:tyoshikawa1106:20191112193533p:plain



テキストエリアなので入力欄の幅をもっと広げたいなと思ったら、まさかのrows宣言はサポート外。
f:id:tyoshikawa1106:20191112193806p:plain


それならstyle指定でと思ったのですが、そちらも思ったように行きませんでした。どうしたものかと検索したところ、discussion forumでやり方が紹介されていました。
f:id:tyoshikawa1106:20191112193933p:plain

How to show 5 rows with lightning:textarea? - Salesforce Developer Community


Lighntingコンポーネントでstyleファイルを用意して、下記のように宣言すればいいみたいです。

.THIS .slds-textarea {
    height:100px !important;
}


f:id:tyoshikawa1106:20191112194115p:plain


これでテキストエリアの高さをきれいに調整できました。
f:id:tyoshikawa1106:20191112194156p:plain