diff --git a/example/src/Example/Demo.purs b/example/src/Example/Demo.purs
index 185bb07..d5a17c9 100644
--- a/example/src/Example/Demo.purs
+++ b/example/src/Example/Demo.purs
@@ -40,7 +40,8 @@ render state =
[ HH.text "Input width will grow as you keep typing"]
, HH.div_
[ HH.input
- [ HP.ref inputRef
+ [ style "padding: 0 0.25rem;"
+ , HP.ref inputRef
, HP.placeholder "An elastic input"
, HE.onValueInput $ Just <<< OnValueInput
]
@@ -54,7 +55,8 @@ render state =
[ HH.text "Textarea height will grow as you keep entering new line"]
, HH.div_
[ HH.textarea
- [ HP.ref textareaRef
+ [ style "padding: 0.25rem;"
+ , HP.ref textareaRef
, HP.placeholder "An elastic textarea"
, HE.onValueInput $ Just <<< const OnValueInputTextarea
]
diff --git a/src/Nonbili/DOM.purs b/src/Nonbili/DOM.purs
index 03b77c0..27012c3 100644
--- a/src/Nonbili/DOM.purs
+++ b/src/Nonbili/DOM.purs
@@ -10,6 +10,7 @@ module Nonbili.DOM
import Prelude
+import Control.Apply (lift2)
import Effect (Effect)
import Web.DOM.Element (Element)
import Web.DOM.Element as Element
@@ -37,16 +38,21 @@ foreign import setStyleHeight :: HTMLElement -> Number -> Effect Unit
-- | Fit width to its content width without showing scrollbar.
fitInputWidth :: HTMLElement -> Number -> Effect Unit
-fitInputWidth el minWidth = do
- setStyleWidth el 0.0
- borderAndPaddingWidth <- HTMLElement.offsetWidth el
- scrollWidth <- Element.scrollWidth $ HTMLElement.toElement el
- setStyleWidth el $ max (borderAndPaddingWidth + scrollWidth) minWidth
+fitInputWidth hel minWidth = do
+ setStyleWidth hel 0.0
+ borderWidth <- lift2 (-) (HTMLElement.offsetWidth hel) (Element.clientWidth el)
+ scrollWidth <- Element.scrollWidth el
+ setStyleWidth hel $ max (borderWidth + scrollWidth) minWidth
+ where
+ el = HTMLElement.toElement hel
-- | Fit