How to make placeholder in input scroll from left to right?
I want my the text in my input, to scroll from left to right, you'll find below my html and css a a picture of the code.
<div class="input-div">
<ion-input [disabled]="chat_room_status === 'closed'" [placeholder]="chat_room_status === 'closed' ? 'Chat has ended. Cannot send new messages.' : 'Type your message here'" class="custom-input" type="text" [(ngModel)]="new_message"></ion-input>
<ion-button [disabled]="new_message === '' || chat_room_status === 'closed'" (click)="sendMessage(room_id, new_message)">
<ion-icon src="../../../assets/icon/send.svg"></ion-icon>
</ion-button>
</div>
.input-div
{
display: flex;
align-items: center;
position: fixed;
/* Keeps the input field at the bottom */
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
background: #3D4F57;
/* Match the background to avoid gaps */
padding: 10px;
}
.custom-input
{
flex: 1;
/* Ensures the input takes up remaining space */
color: #fff;
border: 2px solid #7FCBBF;
border-radius: 20px;
--padding-start: 10px;
--highlight-color-valid: none;
margin-right: 10px;
--placeholder-color: #fff;
}
ion-button
{
--background: #7FCBBF;
--color: #fff;
width: 50px;
height: 50px;
--border-radius: 50%;
}
