#PowerApps コンボボックスのスキマをお埋めいたします

前回 はドロップダウンのスキマについて調べました。
少し時間が経ってしましましたが、今回はコンボボックスのスキマについて試してみます。

コンボボックスコントロールさんのココロのスキマをお埋めいたします（違（違わない？

何の話？
という方は 前回 の記事を参照ください。

コンボボックスコントロールのスキマ埋めます

結論ですが、ドロップダウンコントロールと同様にコンボボックスコントロールも［PaddingTop］、［PaddingBottom］プロパティで調整可能です。確かに調整可能なのですが・・・

デフォルトの状態

キャンバスアプリの画面にコンボボックスを配置した直後のデフォルト（初期）状態は上下左右の Padding は 5 です。

［V］をクリックして展開すると、こんな感じです。

スキマの調整

上下の Padding（PaddingTop、PaddingBottom プロパティ）を 0 にします。

ほんの少しだけ上下のスキマが縮小されています。伝わりますか？

とても控えめな感じですが、チョッとだけスキマが無くなってるんですよ汗

並べてみた

ホントにスキマが詰まったのか？並べて比較してみます。

おわかりいただけただろうか・・・。
これでも、すこーしだけスキマが詰まっているんですよ。

拡張も可能

もちろん、ドロップダウンコントロールと同様にスキマ（PaddingTop と Bottom）を広げることも可能です。

コンボボックスのスキマを埋める限界についての考察

ドロップダウンコントロールはデフォルトの上下 Padding が 10 なので、そこを減らせば劇的にスキマが詰まった印象になりました。コンボボックスコントロールに関しては、上下の Padding を減らしても”気持ち詰まったかな？”ぐらいの印象しかありませんよね。

なぜなのか？

Edge ブラウザーの 開発者ツール（DevTool） で HTML の要素を調べてみました。

細かい技術的な話題は割愛しますが Power Apps Studio 上で PaddingTop、PaddingButton をいくら操作しようとも、コンボボックスコントロールの場合は表示している各要素（アイテム）の上下に固定で Padding = 10 が存在しているみたいなんです。以下に開発者ツールで”Item1”を選択した際の一部を貼っておきます。左側の黒背景に四角が重なっているのが HTML 的な構成を視覚化した情報になります。

・Power Apps Studio 上で PaddingTop、PaddingButton を 0 にした場合の解析結果

・Power Apps Studio 上で PaddingTop、PaddingButton を 50 にした場合の解析結果

どちらの図も、右側の Power Apps 側で
　水色の部分 ＝ コントロールのプロパティで変更できるスタイル
　緑色の部分 ＝ 外部から変更不可能なスキマ（Padding = 10）のスタイル
になっている状況が確認できますね。

まとめ

ドロップダウンコントロール同様にコンボボックスコントロールも上下のスキマを調整可能です。ただし、コンボボックスコントロールは必ず上下左右に Padding = 10 が存在しており、その値は現時点の仕様では変更ができない、という結論になります。

結論、コンボボックスコントロールは Power Apps 側で Padding プロパティを操作しても必ず 10 はスキマができてしまう、というコトでした。

コンボボックスのスキマを埋めようとしても、少しだけスキマ残っちゃう。仕様だもの。

それでは、皆さま、素晴らしい Power Platform Life を！