当它有 2 个输入时，给一个样式以在 AlertController 上显示完整的按钮

Posted 2023-03-06

【中文标题】当它有 2 个输入时，给一个样式以在 AlertController 上显示完整的按钮

【英文标题】：Give a style to show full buttons on AlertController when it has 2 inputs

【发布时间】：2019-04-29 06:48:58

【问题描述】：

我使用 AlertController 和 2 个输入框。因此，我只能看到一半的按钮。那么，当设备上打开键盘时，如何设置它以显示完整的按钮？

我已经尝试过：但它从未应用于运行时。

1.scss

   .alert-button-group 
        margin-top: -25px !important;
    

.ts

myAlert()

const alert = this.alertCtrl.create(
      title: this.enterApiKeyText,
      inputs: [
        
          name: 'apiKey',
          placeholder: this.apiKey
        ,
        
          name: 'apiName',
          placeholder: this.apiName
        ,
      ],
      buttons: [
        
          text: 'Cancel',
          handler: data => 
          
        ,
        
          text: 'Save',
          handler: (data) =>            

            
          
        
      ]
    );
    alert.present();

.html

<ion-row>
    <ion-col col-3 tappable (click)="myAlert()">
      <button ion-fab mini>
        <ion-icon name="add"></ion-icon>
      </button>
    </ion-col>
  </ion-row>

【问题讨论】：

拥有 30k 的声誉，我希望您现在知道在您的问题中提供更多细节，例如代码、您尝试过的内容等。这就是我对您的问题投反对票的原因。话虽如此，看起来需要在.alert-wrapper 类中添加overflow: hidden 和可能的height: auto。

我也强烈反对使用负边距属性。这确实是一个 hack，可能会加剧您的问题。

您的解决方案也不起作用。 @SandraWillford

好吧，没有可重现的代码块、stackblitz、codepen 或其他不涉及图片的东西，这只是猜测:)

@SandraWillford 我一般不会劝阻使用负边距，因为实际上在某些情况下，您会需要它。如果您尝试“修复”某些东西，那么您应该只避免它们，因为它在其他地方被破坏了。但是，如果您希望该图像突出一点？为什么机器人使用负边距？

【参考方案1】：

我找到了解决方案。

文档is here.

variables.scss

$alert-md-message-padding-bottom:0;
$alert-ios-message-padding-bottom:0;