0
我正在使用Ionic2。我試圖在右下角顯示帶有圖片的消息框。正如您從下面的屏幕截圖中可以看到的那樣，圖像（淺綠色）一旦在消息框外面就被隱藏（截斷）。
問題
如何獲得完整的圖像顯示？
就好像ion-list允許顯示消息框，但不是消息框之外的任何東西。
更多信息：
的形象是：/assets/message-me.png
.messages-page-content {
> scroll-content {
padding: 0;
}
.messages {
height: 100%;
background-color: #E0DAD6;
background-repeat: no-repeat;
background-size: cover;
}
.message-wrapper {
margin-bottom: 9px;
&: : after {
content: "";
display: table;
clear: both;
}
}
.message {
display: inline-block;
position: relative;
max-width: 236px;
border-radius: 7px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
&.message-me {
float: right;
background-color: white;
&: : before {
right: -11px;
background-image: url(/assets/message-me.png);
}
}
&.message-you {
float: left;
background-color: blue;
&: : before {
left: -11px;
background-image: url(/assets/message-you.png);
}
}
&.message-you::before,
&.message-me::before {
content: "";
position: absolute;
bottom: 3px;
width: 12px;
height: 19px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
}
.message-content {
padding: 5px 7px;
word-wrap: break-word;
&: : after {
content: " \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
display: inline;
}
}
.message-timestamp {
position: absolute;
bottom: 2px;
right: 17px;
font-size: 11px;
color: gray;
}
}
}<ion-content padding class="messages-page-content">
<ion-scroll scrollY="true" class="messages">
<ion-list>
<ion-item class="message-item" *ngFor="let item of firelist | async">
<div [ngClass]="{'message message-me':(item.uid == me.uid)}">
<div [ngClass]="{'message message-you':(item.uid == you.uid)}">
<div class="message-content">{{item.message_text}}</div>
<span class="time-tick">
\t <span class="message-timestamp">{{item.timestamp | amDateFormat: 'DD MMM YYYY h:mm a'}}</span>
<div *ngIf="showTick(item) === true">
<span class="checkmark">
\t \t \t \t \t \t \t \t <div class="checkmark_stem"></div>
\t \t \t \t \t \t \t \t <div class="checkmark_kick"></div>
\t \t \t \t \t \t \t </span>
</div>
</span>
</div>
</div>
</ion-item>
</ion-list>
</ion-scroll>
</ion-content>UPDATE
我確實發現，如果我更改如下overflow: hidden;到overflow: visible;它修復了我的問題。但是，這只是在瀏覽器中，我不知道如何在代碼中更改ion-label上的css。
ion-label {
display: block;
overflow: hidden;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin: 0;
font-size: inherit;
text-overflow: ellipsis;
white-space: nowrap;
}