CSS background-image

Question

I All,

I am using Ionic2. I am trying to display a message box with an image to the bottom right of it. As you can see from the screen capture below, the image (light green) is being hidden (cut-off) as soon as it is outside the message box.

Question

How do I get the full image to be displayed?

It is as if the ion-list is allowing the message box to be displayed, but not anything beyond the message box.

More info:

The image is: /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"> <span class="message-timestamp">{{item.timestamp | amDateFormat: 'DD MMM YYYY h:mm a'}}</span> <div *ngIf="showTick(item) === true"> <span class="checkmark"> <div class="checkmark_stem"></div> <div class="checkmark_kick"></div> </span> </div> </span> </div> </div> </ion-item> </ion-list> </ion-scroll> </ion-content> 

UPDATE

I did find if I changed overflow: hidden; below to overflow: visible; it fixes my problem. However, that's just in the browser, I am not sure how to change the css on ion-label in the code yet.

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;
}

Answer 1

Just change the CSS of the ion-label in your CSS, just as you said in your question:

In your CSS file, do a search for ion-label , and when you find the block you show, change the line of code overflow: hidden; to overflow: visible; , so it looks like below:

ion-label {
    display: block;
    overflow: visible;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 0;
    font-size: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Or if you can't edit the CSS file, add this CSS either directly, or as a separate file:

ion-label {
    overflow: visible;
}