コルネの進捗や備忘録が記されたなにか

進捗や成果物や備忘録てきななにかを雑に更新していきます。

Power Appsでテキスト入力項目の高さを自動調整する

Power Apps

スポンサードリンク

はじめに

こちらの記事で以下のようなコメントをいただきました。

koruneko.hatenablog.com

Comments

すみません、リッチテキストエディタの高さが自動で調節される方法はありますか?　同じ文字を入れたラベルを作っても、htmlタグが入るのみで改行されないため困っております…

この記事では、Power Appsの

  • テキスト入力
  • リッチ テキスト エディター

の2つのテキスト入力コントロールの高さを自動調整するやり方についてまとめようと思います。　　

テキスト入力コントロールの高さの自動調整

テキスト入力

テキスト入力コントロールには入力文字によって高さを自動調整するための機能は備わっていません。

しかし、Power Appsにはテキストによって高さを自動調整することが可能なコントロールが存在しています。
そう。ラベルコントロールですね。

ラベルコントロールは AutoHeight という高さの自動調整を行うプロパティを true に設定することでラベルに設定されたフォント設定や幅に従ってラベルの高さを自動調整してくれる機能があります。

これを利用して、テキスト入力の

  • 幅
  • フォント設定
  • 入力文字

を高さの自動調整がオンのラベルのプロパティにセットして、ラベルの高さをテキスト入力に設定してあげればよいです。

Label.AutoHeight

true

Label.Text

TextInput.Text

Label.Font

TextInput.Font

Label.Size

TextInput.Size

Label.FontWeight

TextInput.FontWeight

Label.Align

TextInput.Align

Label.Width

TextInput.Width

Label.PaddingTop

TextInput.PaddingTop

Label.PaddingBottom

TextInput.PaddingBottom

Label.PaddingLeft

TextInput.PaddingLeft

Label.PaddingRight

TextInput.PaddingRight

これでラベルはテキスト入力で入力された文字によって高さが自動調整されるので、テキスト入力の高さにラベルの高さを設定してあげればよいです。
ただしそのまま設定してしまうと、テキスト入力に何も文字が入力されていないとき入力項目が潰れてしまいます。

これを回避するために最低限設定する高さを宣言してあげましょう。

TextInput.Height

Max(Label.Height, 40)

これでテキスト入力に何も入力されていない場合は、40の高さが設定されます。

これでも十分に設定機能しますが、1点考慮事項があります。

それは文末で改行を行ったときの動作です。

例えば複数行入力可能なテキスト入力コントロールに以下のような文章を入力してみてください。

ABC
DEF

* 文章の最後に空の行があります。

このような場合、ラベルでは最後の空の行は無視されるので高さの自動調整が行われません。
これにより、改行を行った瞬間(改行を行って文字をまだ入力していない場合)高さの調整がされずに、スクロールバーが表示されてしまいます。

これを避ける方法の1案として、文末が空行であった場合明示的に改行をラベルに設定するような処理が必要になってきます。

例えば以下のようにすることで、文末が空行であった場合改行を設定することが可能です。

Label.Text

TextInput.Text &
If(
    IsMatch(EncodeUrl(TextInput.Text), ".*%0A$"),
    Char(10),
    Blank()
)

リッチテキストエディタ

リッチテキストエディタにもテキスト入力と同様に高さの自動調整を行うプロパティは存在しません。

なのでテキスト入力と同じような方法で高さの自動調整を行わせます。

テキスト入力ではラベルを利用しましたが、リッチテキストエディタではプレインテキストではなくリッチテキスト(装飾されたテキスト)が設定されるので"HTML テキスト"を利用します。

HTMLテキストでも AutoHeight プロパティによる高さの自動調整が可能なので、テキスト入力と同じ要領でプロパティの設定を行います。

HtmlText.AutoHeight

true

HtmlText.HtmlText

RichTextEditor.HtmlText

HtmlText.Size

RichTextEditor.Size

HtmlText.Width

RichTextEditor.Width

RichTextEditor

Max(HtmlText.Height, 160)

リッチテキストエディタの高さの自動調整で厄介な点は以下のような設定項目がコントロールに存在している点ですね。

これを考慮した高さを加算してあげる必要があります。

例えば以下のようになります。(+ 100 は適当な決め打ちです。)

RichTextEditor

Max(HtmlText.Height + 100, 160)

とはいえすべてに対応できるわけではありません。
上記画像右側の三点リーダーを選択すると、以下のように設定項目の領域が広がります。

ここが広がったこと/選択されたことを外部から取得する術は現時点では存在しないので、どうしてもここの部分だけは高さがずれてしまいます。

回避策としては、展開されても高さが変わらないレベルだけ予めリッチテキストエディタの幅を設定しておくことぐらいですかね。。。

最低966だけ幅をとれば上記のようになることを確認しました。

おわりに

テキスト入力やリッチテキストエディタは他のコントロールと組み合わせることで高さの自動調整を行うことが可能です。

今回のように何か課題に対して1つのコントロールなどで解決しようとするのではなく、何かと組み合わせることで解決することも可能な場合があるので、色々試してみましょう！

ランキング参加中
プログラミング


スポンサードリンク