CODEWITHSUNDEEP
reactjsmaterial-ui
Mark Anthony Thrasher
Mark Anthony Thrasher

Reputation: 43

How to implement floating labels on multiline TextField

I am using Meteor/React (with Material-UI), and I have an app that pulls data from a database and populates the TextFields during page loading. When I tried to use the floating labels with multiline, the floating text is on top of the letters in the TextField. I saw a couple of places where people tried to hack their code to avoid this. I decided I didn't want to do that. I then checked on the possibility of "fixing" the floating label in the focused state...because I like the looks of the floating labels. After doing some searching, it seems that the newer version (1.0) no longer supports the fixing of the label. Does anyone have any ideas? If I can't get this resolved, I will try Ant Design. Thanks.

Upvotes: 1

Views: 763

Answers (1)

Harsh Makadia
Harsh Makadia

Reputation: 3443

Here is a simple example of material-UI where floating text can be seen. I'm not sure what are you exactly looking for. Please find the example below and see if it meets your requirement.

import React from 'react';
import {TextField} from "material-ui";
class TestJS extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value : ""
        };
        this.autoFill = this.autoFill.bind(this);
        this.updateTextValue = this.updateTextValue.bind(this);
    }

    autoFill(){
        this.setState({value : "Test me"});
    }

    updateTextValue(event){
        this.setState({value : event.target.value});
    }

    render() {
        return(
            <div>
                <TextField
                    hintText="Message Field"
                    floatingLabelText="MultiLine and FloatingLabel"
                    multiLine={true}
                    rows={2}
                    onChange={this.updateTextValue}
                    value = {this.state.value}
                /><br />
                <button onClick={this.autoFill}> Auto Fill value</button>
            </div>

        );
    }
}

export default TestJS;

Upvotes: 2

Related Questions