CSSを用いたコントロールサイズの設定

背景色を設定するには「-fx-pref-width」「-fx-pref-height」を使用します。


-fx-pref-width  [ コントロール幅を指定   ]
-fx-pref-height [ コントロール高さを指定 ]

各種コントロールのsetStyleメソッドで「-fx-background-color:green;-fx-pref-width:100;-fx-pref-height:100;」を設定した実行結果を以下に示します。(実行結果をわかりやすくするために、背景をgreenに設定しています)


			 setStyle( "-fx-background-color:green;-fx-pref-width:100;-fx-pref-height:100;" )

実行例

【 Label 実行結果】

【 Button 実行結果】

TextFieldの横幅は「-fx-pref-width」出来ないようです。TextField横幅は「-fx-max-width」を使用してください。

【 TextField 実行結果】

TextAreaの横幅は「-fx-pref-width」出来ないようです。TextArea横幅は「-fx-max-width」を使用してください。

【 TextArea 実行結果】

【 CheckBox 実行結果】

【 RadioButton 実行結果】

【 ChoiceBox 実行結果】

ListViewの横幅は「-fx-pref-width」出来ないようです。ListView横幅は「-fx-max-width」を使用してください。

【 ListView 実行結果】

【 ComboBox 実行結果】

Sliderの横幅は「-fx-pref-width」出来ないようです。Slider横幅は「-fx-max-width」を使用してください。

【 Slider 実行結果】

【 Progress 実行結果】

ToolBarの横幅は「-fx-pref-width」出来ないようです。ToolBar横幅は「-fx-max-width」を使用してください。

【 ToolBar 実行結果】

TreeViewの横幅は「-fx-pref-width」出来ないようです。TreeView横幅は「-fx-max-width」を使用してください。

【 TreeView 実行結果】

TreeTableViewの横幅は「-fx-pref-width」出来ないようです。TreeTableView横幅は「-fx-max-width」を使用してください。

【 TreeTableView 実行結果】