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;를 변경 한 경우 내가 찾았어요. 그러나 브라우저에있는 것 뿐이므로 을 코드에서 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; 
}

출처

2017-02-08 Richard

그냥 당신이 당신의 질문에 말한대로, 당신의 CSS에 이온 레이블의 CSS를 변경 : ion-label에 대한 검색을 수행하여 CSS 파일에서

, 때 당신은 블록을 찾기 쇼는 overflow: visible;에 코드 overflow: hidden;의 라인을 변경, 그래서 다음과 같습니다

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

또는 당신이 CSS 파일을 편집 할 수없는 경우, 직접이 CSS를 추가하거나 별도의 파일로 :

ion-label { 
    overflow: visible; 
}

출처

2017-02-08 13:35:11

CSS 배경 이미지

답변

관련 문제