CODEWITHSUNDEEP
htmlcsstextboxpositioncursor
Missy Bur
Missy Bur

Reputation: 221

Cursor in textbox located in the middle instead of the top

I have a text box where users can type in comments; however, when the user clicks in the textbox, the cursor is located in the middle of the box when they type (See picture 1).

How can I position the cursor in the top left of the textbox like it appears in Picture #2?

Any help would be much appreciated!

      <form className="comment-form" action="/comments" method="post">
        <input type="hidden"
               name="authenticity_token"
               value={this.props.token}/>

        <label htmlFor="comment[body]">Comment</label>
        <input name="comment[body]" type="textarea" rows="1" cols="50" wrap="physical" id="comment_text_area" />

        <label htmlFor="image[image]">Image</label>
        <input name="comment[image]" type="file" />

      <div className="request-actions">
        <button>Comment on Request</button>
        <a onClick={this.props.closeEditor}>Cancel</a>
      </div>
      </form>

.comments {
  margin: 20px 0;
}

.comment {
  background-color: $light-grey-5;
  padding: rem-calc(10);
  border-bottom: 3px solid White;
  font-size: 13px;
}

.comment__user {
  color: $black;
}

.request__comment {
  margin-bottom: 20px;
}

.comment-form input[type="textarea"] {
    width: 500px;
    height: 150px;
    font-size: 16px;
    border: 2px solid #ccc;

}

@media #{$screen} and (max-width: #{$medium-breakpoint}) {
  .comments { margin-left: 0px; }
  .comment-content { margin-top: 10px; }
}

Picture 1

Picture 2 - What I want my textbox to look like

Upvotes: 3

Views: 6566

Answers (2)

CodeIgnitor
CodeIgnitor

Reputation: 135

The solution is to use a textarea instead of an input. I found this similar question with the solution and explanation here

It shows to use this:

input {
 padding-top: 0;
 padding-left: 0;
 line-height: 1em; // this probably doesn't matter
}

Upvotes: 0

lumio
lumio

Reputation: 7575

There is no <input type="textarea" />.

Change it to:

<textarea name="comment[body]" rows="1" cols="50" wrap="physical" id="comment_text_area"></textarea>

Upvotes: 5

Related Questions