Appearance of a second input on click (issue)


#1

Hi, I am creating a chat, but I got a problem with my input box. When I click the input a second input seems to appear and it looks horrible, how can I solve this?
IssueInput

I just have in HTML
<ion-input placeholder="Escribe un mensaje" class="in" value=":)"> </ion-input>

and SCSS:

.in
{
    position: fixed;
    bottom: 5%;
    background: white;
    border-radius: 19px;
    width: 340px;
    box-shadow: 2px 2px 2.5px #6F6F6F;
}

I do not have anything else. Is this a bug? How can this be fixed?


#2

remove class attribute and then see what happens ?


#3

I experimented with the attributes in the class. I discovered that “position: fixed” was the problem so I changed it to “position: absolute”. Thanks :slight_smile: