我的ionic 3聊天项目中的文本区域有问题。
当我打开聊天窗口时，文本区域看起来不错，并位于页面底部（如预期）。当我单击文本区域（iOS Simulator）时，该文本区域会向上移动，直到打开键盘-但是，该文本区域不再可见。
当我单击应该是文本区域的区域时，我只会看到其中的一部分（占位符值和一些背景）。
我真的很努力，改变了css（z-index），启动了整个项目，因为我认为这与其他一些问题有关.......我无法解决。
你们中有人遇到过同样的问题吗？如果是的话，该如何解决？另外在谷歌我找不到任何足够的链接。
所以，请帮忙！！！我真的很感激！！！
First screen - everything is ok Second screen - the textarea is invisible (but still there) If I click into the area where the textbook is placed a rudiment of it is showing up
我的html如下
<ion-toolbar class="messages-page-footer" position="bottom" style="z-index:1000 !important;">
<!-- defaultHeight, defaultPixelsToGrow, defaultLinesToGrow are inputs to directive inputAutoGrow -->
<ion-textarea defaultHeight="41" defaultPixelsToGrow="12" defaultLinesToGrow="6"
class="message-editor" placeholder="Type your message here!" [(ngModel)]="messageText" style="z-index:1000 !important;"></ion-textarea>
<ion-buttons end>
<button ion-button round secondary class="message-editor-button" (click)="sendMessage(messageText)">
<ion-icon name="md-send"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
和我的CSS
page-chat {
.input-cover {
position: static;
}
.chat-title {
text-align:left;
padding-left: 30px;
img {
border-radius: 20px;
width:40px;
height:40px;
float:left;
margin:2px 4px 0;
}
h1, h2 {
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
margin:0;
font-weight:400;
text-align:left;
}
h1 {
font-size:20px;
}
h2 {
font-size:12px;
}
}
.chat-room {
background: #f0ecea url('../assets/img/chat-bg.png') 50% 50% repeat;
.scroll-content {
margin-bottom:60px;
}
.messages-block-date {
display:block;
text-align:center;
font-size:12px;
margin: 20px 40px 15px;
border-top:solid 1px #b4b1af;
padding-top: 12px;
}
.message-wrapper {
display:block;
margin:10px 15px;
clear:both;
border:solid 1px #c9c9c9;
background:#FFF;
border-radius: 0 6px 6px 6px;
padding:6px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
position:relative;
.message-avatar {
img {
position: absolute;
border-radius: 50%;
width: 30px;
height: 30px;
top: 0;
}
.left {
left: -37px;
}
.right {
right: -37px;
}
}
&:before {
display:block;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 8px 0;
border-color: transparent #ffffff transparent transparent;
position:absolute;
top:0;
left:-10px;
z-index:2;
}
&:after {
display:block;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 0 11px 10px 0;
border-color: transparent #c9c9c9 transparent transparent;
position:absolute;
top:-1px;
left:-12px;
z-index:1;
}
.message-user {
color:#00897b;
font-size:10px;
margin-bottom:2px;
display:block;
}
.message-content {
margin-right:30px;
font-size:14px;
line-height:14px;
.message-content-text {
white-space: pre-line;
}
.media-container {
margin:4px -30px 4px 0;
border-radius:4px;
overflow:hidden;
}
img {
display:block;
width:100%;
}
}
.message-timestamp {
float:right;
clear:both;
font-size:10px;
}
&.left {
float:left;
margin-left:40px;
}
&.right {
float:right;
background:#e1ffc7;
border-color:#b9da9d;
margin-right:40px;
border-radius: 6px 0 6px 6px;
&:before {
border-width: 8px 10px 0 0;
border-color: #e1ffc7 transparent transparent transparent;
left:auto;
right:-10px;
}
&:after {
border-width: 10px 11px 0 0;
border-color: #b9da9d transparent transparent transparent;
left:auto;
right:-12px
}
}
}
}
.messages-page-footer {
padding:8px 12px 8px 8px;
position: relative;
bottom: 0;
left: 0;
width: 100%;
ion-textarea {
height: 41px;
}
textarea {
height: 75% !important;
overflow: hidden !important;
}
.toolbar-background {
background:none;
border:none;
}
.toolbar-content {
margin-right:10px;
}
.message-editor {
background:#FFF;
border:solid 1px #c9c9c9;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
position:relative;
padding-left:10px;
&:before {
display:block;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 8px 10px 0 0;
border-color: #ffffff transparent transparent transparent;
position:absolute;
top:0;
right:-10px;
z-index:2;
}
&:after {
display:block;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 10px 11px 0 0;
border-color: #c9c9c9 transparent transparent transparent;
position:absolute;
top:-1px;
right:-12px;
z-index:1;
}
input {
border:none;
margin:12px 8px 13px 0;
line-height:15px;
}
}
.message-editor-button {
background:#ff8181;
color:#FFF;
font-size:.7em;
width:40px;
height:40px;
border-radius:20px;
}
}
}
ion-list.chats-participants {
.item {
padding-left:0;
border-bottom: 1px solid #c8c7cc;
.item-inner {
padding-left:16px;
border-bottom:none
}
ion-avatar {
width:30px;
height:30px;
min-width:0;
min-height:0;
border-radius:15px;
background: #ced8db;
margin:8px -5px 8px 16px;
img {
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
border-radius: 50%;
}
}
&.group-info {
padding:16px 16px 30px;
ion-avatar {
width:100px;
height:100px;
border-radius:50px;
margin:8px 10px 8px 0px;
position:relative;
img {
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
border-radius: 50%;
}
button {
position:absolute;
width:100%;
text-align:center;
bottom:-25px;
left:0;
color: #4083c9;
padding: 0;
margin: 0;
font-size:1.4rem
}
}
h2 {
font-size:2rem;
}
}
}
}