离子使模态页面适合内容高度

Question

我构建了一个模态页面，就像一个自定义警报。我需要在警报中添加图像，因此我按照此操作制作自定义警报窗口：How to make customized alert in ionic 2?

问题是模态被拉伸以适应屏幕高度。有没有办法让它始终适合自己的内容高度？那么高度是它必须达到的最小值？

这是页面的scss：

modal-alert.scss

page-modal-alert {
    background-color: rgba(0, 0, 0, 0.5);
    ion-content.content{
        top: 10%;
        left: 10%;
        width: 80%;
        height: 375px; // <-- fixed
        //height: 75%; // <-- will stretch to screen size
        border-radius: 10px;
        .scroll-content {
            border-radius: 20px;
        }
    }
}

页面模板：

modal-alert.html

<ion-content padding>
  <img src="assets/img/20pointsBox.png">    
  <div>
    <p>{{ text }}</p>
    <ion-buttons>
      <button full ion-button color="secondary" (click)="dismiss()">
        OK
      </button>
    </ion-buttons>
  </div>
</ion-content>

修改

当上面的类设置为模态时，它看起来像这样（但带有图像，文本和一个按钮）：

文本和图像内容是动态的，我在运行时更改它们，因此有时此模态的固定高度与其内容的实际高度不匹配。

有没有办法让模态高度适合其内容的总高度？

Answer 1

例如，个人资料页包含更新个人资料模式。 当您将模式创建为

时，让我们为您的模态添加自定义类

const modal = this.modalCtrl.create(UpdateProfilePage, {}, { 
    cssClass: 'update-profile-modal'
}

现在这个模型没有作为个人资料页的孩子插入dom。

因此， profile.scss 中的代码无效

profile-page{
    .update-profile-modal .modal-wrapper{
        min-height: 400px;
        height: auto;
    }
}

所以解决它的一种方法是添加相同的代码** app.scss **

.update-profile-modal .modal-wrapper{
    min-height: 400px;
    height: auto;
}

Answer 2

我个人最喜欢的方法是使用card然后将你的模态组件的<ion-content> background设置为transparent。

Answer 3

在遇到很多麻烦之后，我做到了，您可以自定义自己的变体，但它基本上可以正常工作（ 在IONIC 3中，请也检查并更新ionic 4 ）：

public class ErrorDetails {
    private String message;
    private String details;
    private Date timestamp;

    public ErrorDetails(String message, String details, Date timestamp) {
        super();
        this.message = message;
        this.details = details;
        this.timestamp = timestamp;
    }

    public String getMessage() {
        return message;
    }

    public String getDetails() {
        return details;
    }

    public Date getTimestamp() {
        return timestamp;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public void setDetails(String details) {
        this.details = details;
    }

    public void setTimestamp(Date timestamp) {
        this.timestamp = timestamp;
    }
}

@ControllerAdvice
public class GlobalExceptionHandler {

    @ExceptionHandler(UnauthorizedException.class)
    public ResponseEntity<ErrorDetails> unauthorizedException(UnauthorizedException e, WebRequest webRequest) {
        ErrorDetails errorDetails = new ErrorDetails(e.getMessage(), webRequest.getDescription(false),new Date());
        return new ResponseEntity<>(errorDetails, HttpStatus.UNAUTHORIZED);
    }

    @ExceptionHandler(Exception.class)
    public ResponseEntity<?> globalExceptionHandler(Exception e, WebRequest webRequest) {
        ErrorDetails errorDetails = new ErrorDetails(e.getMessage(), webRequest.getDescription(false),new Date());
        return new ResponseEntity<>(errorDetails, HttpStatus.INTERNAL_SERVER_ERROR);
    }
}



@ResponseStatus(value = HttpStatus.UNAUTHORIZED)
public class UnauthorizedException extends Exception {

    private static final long serialVersionUID = 1L;

    public UnauthorizedException(String message) {
        super(message);
    }
}

Answer 4

只需添加 'auto-height' cssClass 并将此 css 添加到您的 global.scss 中：

ion-modal.auto-height {
    &.bottom {
        align-items: flex-end;
    }

    --height: auto;

    .ion-page {
        position: relative;
        display: block;
        contain: content;

        .inner-content {
            max-height: 80vh;
            overflow: auto;
            padding: 10px;
        }
    }
}

将 <ion-content></ion-content> 改为 <div class="inner-content"></div>