W3C home > Mailing lists > Public > public-css-archive@w3.org > December 2017

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

From: Tommy Hodgins via GitHub <sysbot+gh@w3.org>
Date: Thu, 28 Dec 2017 17:44:12 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-354326700-1514483051-sysbot+gh@w3.org>
@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

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:21 UTC