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