fixed auto-resizing of blog title input field
@@ -40,6 +40,8 @@ export class NewBlog extends Component {
this.returnHome = this.returnHome.bind(this);
this.addInvites = this.addInvites.bind(this);
this.blogSubmit = this.blogSubmit.bind(this);
+
+ this.titleHeight = 52;
}
blogSubmit() {
@@ -109,6 +111,11 @@ export class NewBlog extends Component {
}
titleChange(evt){
+ this.titleInput.style.height = 'auto';
+ this.titleInput.style.height = (this.titleInput.scrollHeight < 52)
+ ? 52 : this.titleInput.scrollHeight;
+ this.titleHeight = this.titleInput.style.height;
+
this.setState({title: evt.target.value});
}
@@ -155,13 +162,16 @@ export class NewBlog extends Component {
style={{height: 'calc(100% - 124px)', top: 124}}>
<div className="h-inner dt center mw-688 w-100">
<div className="flex-col dtc v-mid">
- <input autoFocus
- className="header-2 b--none"
+ <textarea autoFocus
+ ref={(el) => {this.titleInput = el}}
+ className="header-2 b--none w-100"
+ style={{resize:"none", height: this.titleHeight}}
+ rows={1}
type="text"
name="blogName"
placeholder="Add a Title"
- onChange={this.titleChange}
- />
+ onChange={this.titleChange}>
+ </textarea>
<hr className="gray-30" style={{marginTop:32, marginBottom: 32}}/>
@@ -202,13 +212,16 @@ export class NewBlog extends Component {
style={{height: 'calc(100% - 124px)', top: 124}}>
<div className="h-inner dt center mw-688 w-100">
<div className="flex-col dtc v-mid">
- <input autoFocus
- className="header-2 b--none"
+ <textarea autoFocus
+ ref={(el) => {this.titleInput = el}}
+ className="header-2 b--none w-100"
+ style={{resize:"none", height: this.titleHeight}}
+ rows={1}
type="text"
name="blogName"
placeholder="Add a Title"
- onChange={this.titleChange}
- />
+ onChange={this.titleChange}>
+ </textarea>
<p className="body-regular-400" style={{marginTop:25, marginBottom:27}}>
Who is invited to read this notebook?
