CODEWITHSUNDEEP
javascripthtmluser-interfacereactjsfrontend
Guillermo
Guillermo

Reputation: 387

Strange behavior with textareas

I'm having the following problem with the textareas in this form. The first image is in my computer and the forms seem to be looking ok, however in the second image, the textareas look really strange. I would like to know what is the cause for this behavior, and how I can improve this.

html

<div className="information-wrapper col-md-12 col-sm-12 col-xs-12">
  <div className="icon-container col-md-3 col-sm-3 col-xs-3">
    <img src="/name-image.png"/>
  </div>
  <div className="text-container col-md-9 col-sm-9 col-xs-9">
    <textarea className="information-textarea" placeholder={I18n.t('name')} />
  </div>
</div>

css

.information-wrapper{
  padding-right: 0;
  padding-left: 0;
  width: 100%;
  height: 51px;
  border-radius: 4px;
  background-color: #ffffff;
  margin-bottom: 10px;
  .icon-container{
    max-width: 53.65px;
    padding-right: 0;
    padding-left: 0;
    height: 51px;
    border-right: 0.5px solid #e7e5e8;
    text-align: center;
    img{
      margin-top: 15px;
      width: 22px;
      height: auto;
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
    }
  }
  .text-container{
    padding-right: 0;
    padding-left: 0;
    height: 51px;
    .information-textarea{
      height: 95%;
      width: 100%;
      font-size: 17px;
      font-weight: bold;
      padding-left: 5.5px;
      padding-top: 15px;
      border: 0;
      border-radius: 4px;
      resize: none;
      white-space: nowrap;
      overflow-x: scroll;
    }
  }
}

Upvotes: 0

Views: 64

Answers (1)

David Gilbertson
David Gilbertson

Reputation: 4883

overflow: scroll will show scrollbars always*, even if they're not needed.

*However on macs, if you don't have a mouse plugged in, then scrollbars auto-hide anyway. This is why you see different results.

You probably want overflow: auto which will only show the scrollbar if it's required. Or as one of the comments said, you probably really just want an <input>.

Upvotes: 2

Related Questions