Unable to style text-input field
IdaraNabuk opened this issue · 4 comments
IdaraNabuk commented
I have been trying to embed a text input field in a box or create a border around the text input field but it seems impossible. Is there a way to do this?
Here's one of the ways I tried achieving it in this temperature converter PR
sanette commented
yes, widgets are always put in layouts, and you may style the layout, using the ~background
option of functions like Layout.resident
, Layout.flat_of_w
etc.
sanette commented
For instance:
open Bogue;;
let t = Widget.text_input () in
let style = Style.(of_bg (color_bg Draw.(opaque (find_color "beige")))
|> with_border
(mk_border ~radius:12
(mk_line ~width:3 ~color:Draw.(opaque blue) ()))) in
let l = Layout.resident ~w:200 ~background:(Layout.style_bg style) t in
let house = Layout.flat ~margins:50 [l] in
Bogue.(run (of_layout house));;
and if you want more space around the text_input, you may use the sep
parameter of flat_of_w
:
let t = Widget.text_input () in
let style = Style.(of_bg (color_bg Draw.(opaque (find_color "beige")))
|> with_border
(mk_border ~radius:12
(mk_line ~width:3 ~color:Draw.(opaque blue) ()))) in
let l = Layout.flat_of_w ~sep:20 ~background:(Layout.style_bg style) [t] in
let house = Layout.flat ~margins:50 [l] in
Bogue.(run (of_layout house));;
IdaraNabuk commented
Thank you. This could be added to the example repo. It will be a lot helpful.
sanette commented
good idea, I'll try to do this