Re: [csswg-drafts] [css-ui-4] Please add vertical auto-resize textarea field

@Nadya678 I've got a simple ES6 definition of this behaviour [here](https://gist.github.com/tomhodgins/a106d938cbab066f1c9621aed1dde883#file-auto-expand-js): 

```javascript
// Auto Expand
let autoExpand = (selector, option) => {

  let styles = ''
  let count = 0
  let features = {
    width: tag => {
      let computed = getComputedStyle(tag)
      tag.style.width = 'inherit'
      let width = parseInt(computed.getPropertyValue('border-left-width'), 10)
                   + parseInt(computed.getPropertyValue('padding-left'), 10)
                   + tag.scrollWidth
                   + parseInt(computed.getPropertyValue('padding-right'), 10)
                   + parseInt(computed.getPropertyValue('border-right-width'), 10)
      tag.style.width = ''
      return `width: ${width}px;`
    },
    height: tag => {
      let computed = getComputedStyle(tag)
      tag.style.height = 'inherit'
      let height = parseInt(computed.getPropertyValue('border-top-width'), 10)
                   + parseInt(computed.getPropertyValue('padding-top'), 10)
                   + tag.scrollHeight
                   + parseInt(computed.getPropertyValue('padding-bottom'), 10)
                   + parseInt(computed.getPropertyValue('border-bottom-width'), 10)
      tag.style.height = ''
      return `height: ${height}px;`
    },
    both: tag => {
      return features.width(tag) + features.height(tag)
    }
  }

  document.querySelectorAll(selector).forEach(tag => {

    let attr = selector.replace(/\W/g, '')
    let evaluated = features[option](tag)

    tag.setAttribute(`data-${attr}`, count)
    styles += `${selector}[data-${attr}="${count}"] { ${evaluated} }\n`
    count++

  })

  return styles

}
```

Here's a live demo: https://codepen.io/tomhodgins/pen/baqMWL

And I also just updated a similar ES5 function for doing the same thing [here](https://github.com/tomhodgins/reprocss/blob/master/mixins/auto-expand.js) today :D

-- 
GitHub Notification of comment by tomhodgins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2141#issuecomment-354326700 using your GitHub account

Received on Thursday, 28 December 2017 17:44:14 UTC