How to enable border on Textarea and Input in Ionic 4

Ionic Framework
1

I have a UI which consist of 2 text inputs. First is the ion input which has a placeholder of “Title of the discussion”, and the other which is a textarea with a placeholder of “Write a discussion”. See the screenshot below:

image

I wanted to enable a border to both text input elements to make these elements to be visible to the user. Below is my current HTML and CSS code for this UI.

social.component.html

 <div id="topSection">
    <ion-card>
      <ion-card-header>
        <ion-grid item-start>
          <ion-row>
            <ion-col id = "userAvatarContainer" size = "1" size-lg>
              <ion-avatar id = "userAvatar">
                <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
              </ion-avatar>
            </ion-col>

            <ion-col>
              <ion-input id="discussTitle" placeholder="Title of the discussion" pattern="text"></ion-input>
            </ion-col>
          </ion-row>

          <ion-row>
            <ion-textarea wrap="soft" placeholder="Write a discussion...">
            </ion-textarea>
          </ion-row>
        </ion-grid>
      </ion-card-header>

      <ion-card-content>
        <ion-button expand="full">Publish</ion-button>
      </ion-card-content>

    </ion-card>
  </div>

social.component.scss

#topSection > ion-card > ion-card-header{
    width: 100%;
}

#userAvatar{
    width: 50px;
    height: 50px;
}

#topSection > ion-card > ion-card-header > ion-item > ion-list{
    width: 100%;
}

#topSection > ion-card > ion-card-header > ion-item > ion-list > ion-item > ion-textarea{
    height: 150px;
}

#userAvatarContainer{
    vertical-align: middle !important;
}

Hoping someone could help as soon as possible. Thank you.

2

Add this to scss file, it may help

ion-col{
   ion-input{
      border: solid 1px red;
   }
}

ion-row{
   ion-textarea{
      border: solid 1px red;
   }
}
3 Likes
3

Wrap your ion-input and ion-textarea with ion-item tags. This will expose border properties that you can style.

1 Like
4

Looks decent. Thanks!