0
Iすべて、CSS背景画像
私は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: visible;するには、以下のoverflow: hidden;を変更した場合、私が見つけました。しかし、それはブラウザの中だけで、cssをコード内でion-labelに変更する方法がわかりません。
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;
}