1

import React, { Component } from 'react';

class BigText extends Component {

  constructor(props) {
        super(props);

        this.state = {
            title: '',
            text: '',
            summary: ''
        };

        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleInputChange(event) {

        this.setState({
            [event.target.name]: event.target.value
        });

    }

  render() {
 
    return ( 
      <div>
        <div>
          <h1 className="row px-2">Big Text Notification</h1>
          <hr />
          <div className="row px-1 py-2 animated fadeIn">
  
                <div className="px-1" style={{ width:50 + '%' }}><br />

                    <div className="mb-1">
                      <input type="text"
                       className="form-control" 
                       placeholder="Title"
                       name="title"
                       value={this.state.title}
                       onChange={this.handleInputChange}
                       />
                    </div>

                    <div className="mb-1">
                      <textarea 
                      className="form-control" 
                      placeholder="Text"
                      name="text"
                      value={this.state.text}
                      onChange={this.handleInputChange}
                      />
                    </div>

                    <div className="mb-1">
                      <textarea
                       className="form-control" 
                       placeholder="Summary"
                       name="summary"
                       value={this.state.summary}
                       onChange={this.handleInputChange}
                       />
                    </div>

                    <br />

                    <div className="row px-2" >
                      <div>
                        <button className="nav-link btn btn-block btn-info">Save</button>
                      </div>
                      <div className="px-1">
                        <button className="nav-link btn btn-block btn-danger"> Cancel</button>
                      </div>
                    </div><br />

                </div>
                <div><br />
                  <div className="px-1">
                    <table className="table table-clear table-hover table-striped"
                    >
                      <tbody>
                        <tr>
                          <td>
                            <strong>
                              {this.state.title}
                            </strong><br />
                            {this.state.text}  <br />{this.state.summary}<br /> 
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
          </div>
    </div>
    </div>
    )
    
  }
}

export default BigText;

I want to make a CSS so that following image be used as the border and whenever i type something it will be wrapped in that as well Actually i want to use this CSS with React JS in which on left input fields were there and on the right that will be shown in this phone component as being typed by the user

image to be used as border

5
  • 1
    With border its not possible ... use it as background image and wrap a div inside to make it work Commented Apr 13, 2017 at 7:20
  • can you just tell how? provide the snippet in answer Commented Apr 13, 2017 at 7:34
  • can you tell me in your code which div is going to have that background? Commented Apr 13, 2017 at 9:27
  • i fixed my problem my own Commented Apr 13, 2017 at 12:24
  • stackoverflow.com/questions/43406383/… Commented Apr 14, 2017 at 6:30

1 Answer 1

0

.enjoy-css {
  min-width: 410px;
  max-width: 450px;
  border-style: solid;
border-width: 45px 103px 267px 98px;
-moz-border-image: url(https://d3nj7353mvgauu.cloudfront.net/media/categories/iphone-77-plus-40-b1ac.png) 45 103 267 98 stretch repeat;
-webkit-border-image: url(https://d3nj7353mvgauu.cloudfront.net/media/categories/iphone-77-plus-40-b1ac.png) 45 103 267 98 stretch repeat;
-o-border-image: url(https://d3nj7353mvgauu.cloudfront.net/media/categories/iphone-77-plus-40-b1ac.png) 45 103 267 98 stretch repeat;
border-image: url(https://d3nj7353mvgauu.cloudfront.net/media/categories/iphone-77-plus-40-b1ac.png) 45 103 267 98 stretch repeat;
}

.width-css {
  min-width: 210px;
  max-width: 250px;
    word-break: break-all;
}

This is the thing i wanted to do and i did it successfully

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.