Question

我全部，

我正在使用Ionic2。我正在尝试在其右下角显示一个带有图像的消息框。正如您从下面的屏幕截图中看到的那样，图像（浅绿色）一旦在消息框之外就被隐藏（切断）。

问题

如何显示完整图像？

好像ion-list允许显示消息框，但消息框之外没有任何内容。

更多信息：

图片为：/assets/message-me.png

＆＃13;

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

＆＃13;

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

＆＃13;

更新

我确实发现如果我将下面的overflow: hidden;更改为overflow: visible;它会解决我的问题。但是，这只是在浏览器中，我不知道如何在代码中更改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;
}

Answer 1

只需更改CSS中离子标签的CSS，就像您在问题中所说的那样：

在您的CSS文件中，搜索ion-label，当您找到所显示的块时，将代码行overflow: hidden;更改为overflow: visible;，如下所示：

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

CSS背景图像

1 个答案: