Ionic 3 - 键盘无缘无故地将内容向上推,并超越其他内容

2024-02-21

我正在 Ionic 中开发一个简单的应用程序。

我有一个问题,键盘将我的输入字段向上推到另一个 div 上,而键盘有足够的空间。我该如何解决?我已经在互联网上浏览过,但无法找到解决我的问题的任何方法。

发生的情况是这样的:

正如您所看到的,文本在图像中,没有理由这么高。它下面有足够的空间。

这是我的代码:

HTML:

<ion-header>

  <ion-navbar>
    <ion-title>Login</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding class="login content">

  <div class="logo-container">
      <img src="assets/imgs/Mikos_logo.jpeg" class="logo-img">
  </div>

  <div class="center">
      <p>Vul hier je naam in:</p>
      <ion-item class="code-field">
          <ion-input placeholder="naam" type="text" (keyup)="nameInput()" [(ngModel)]="name"></ion-input>
      </ion-item>      
  </div>



</ion-content>

CSS:

page-login {

    .login {
        background-color: #EEEEEE;
    }

    .logo-container{
        position: absolute;
        width: 400px;
        left: calc(50% - 400px / 2);
      }

      .logo-img{
        display: block;
        width: 100%;
        height: auto;
      }

    .center{
        position: absolute;
        top: 40%;
        width: 300px;
        left: calc(50% - 300px / 2);
    }

    @media only screen and (max-width: 600px) {
    /* For mobile phones: */

        .logo-container{
            position: absolute;
            width: 300px;
            left: calc(50% - 300px / 2);
        }
    }

}

我尝试过的:

我已经添加了离子本机键盘 https://ionicframework.com/docs/native/keyboard/并将其添加到我的应用程序模块中:

IonicModule.forRoot(MyApp, { scrollAssist: false, autoFocusAssist: false } ),

不幸的是这没有奏效。

Update:

Adding

.scroll-content {
    padding-bottom: 0 !important;
}

也不工作。


这是 Ionic 3 的一个已知错误,可以通过添加以下 CSS 样式来修复:

.scroll-content {
    padding-bottom: 0 !important;
}

我也遇到过类似的问题,这段 CSS 修复了它。

当输入获得焦点时,Ionic 会在输入框的底部添加一些填充scroll-content类,为键盘创造空间。


Update

相对顶部定位也可能会导致问题。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Ionic 3 - 键盘无缘无故地将内容向上推,并超越其他内容 的相关文章

随机推荐

  • .NET Core MVC 自动迁移后,类库在 VS2017 中丢失智能感知

    将具有两个项目 Web 应用程序和类库 的 VS2015 MVC Core 应用程序迁移到 VS2017 后 我失去了类库中所有视图的智能感知 几乎每个视图中的所有内容都被破坏了 所以我确信迁移工具没有为我处理这是相当基本的事情 即便是 m
  • 如何检查指针是否指向正确对齐的内存位置?

    Given a void 对于某些存储 如何检查它是否指向正确对齐的存储而没有任何实现定义的行为 当然我们有std align http en cppreference com w cpp memory align 但是有更有效的方法吗 t
  • 如何将 OAuth 2 令牌映射到资源服务器中的 UserDetails 对象?

    我有 2 个独立的 Spring Boot 应用程序 一个用作 OAuth 2 授权服务器 另一个用作资源服务器 我正在使用Spring的RemoteTokenServices在我的资源服务器中检查来自授权服务器的令牌 现在 我尝试在资源服
  • 如何在双y轴ggplot上显示图例

    我正在尝试使用 ggplot 绘制双 y 轴图表 首先我要说的是 我并不是在寻找关于这样做是否是良好做法的优点的讨论 我发现它们在查看基于时间的数据来识别两个离散变量的趋势时特别有用 我认为对此进行进一步讨论更适合交叉验证 Kohske h
  • 部署 DacPac 时如何将多个 SQLCMD 变量与 SqlPackage.exe 一起使用?

    我正在使用 sqlpackage exe 部署 dacpac 并且需要为 dacpac 中的部署后脚本传递 SqlCMD 变量 我发现了一个相关问题here https stackoverflow com questions 1550265
  • JAR 插件实现

    让我们有一个 Groovy Java 应用程序 它应该使用一组在外部定义的类 jar files 假设它们位于主可执行 jar 附近 所以 主类 让我们称之为Main 应该加载plugin jar在运行时创建文件并调用该 jar 中定义的类
  • PyDev 在 Eclipse 中导入

    我刚刚在 Ubuntu 10 04 LTS 中安装了 Eclipse Indigo 并使用它安装了 Pydev 我做了以下事情 1 通过在 Window gt Preferences gt PyDev gt Editor gt Interp
  • 致命错误:使用 mongodb php 驱动程序 1.1.2 和 PHP 7.0.2 时未找到“MongoDate”类 - Laravel 5.1

    我正在尝试将 MongoDB 配置为与虚拟 Ubuntu 14 04 计算机上的 Laravel 5 1 Homestead 实例配合使用 我能够使用以下命令成功安装支持 PHP 7 0 的最新版本 MongoDBsudo pecl ins
  • 错误:包 javax.servlet 不存在

    我试图按照以下指南在我的 Web 应用程序中使用 jsf 2 实现登录过滤器 https stackoverflow com tags servlet filters info https stackoverflow com tags se
  • Java 字符串用“.”分割(点)[重复]

    这个问题在这里已经有答案了 为什么这段代码的第二行会抛出ArrayIndexOutOfBoundsException String filename D some folder 001 docx String extensionRemove
  • 如何登录? Django TastyPie 与 ApiKeyAuthentication 实际认证流程

    我有一个 Adob e Air 移动应用程序 可以通过 TastyPie 与 Django 进行通信 要使用该应用程序 人们必须先注册 因此他们必须提供他们的电子邮件和密码 之后他们将能够 登录 我认为最好的主意是 在输入成功的用户名 密码
  • 快速构建 error_if_any_output_files_are_specified_they_all_must_be

    当转换为在 Xcode 10 上使用新的构建系统时 我的几个扩展目标的输出中出现以下错误
  • 如何计算SQL Server 2008中记录之间的时间

    对于 sql 2008 中的审计表 我需要计算每个订单在给定步骤中的时间 表示为新列 Old New Time Entered Order Number NULL Step 1 4 30 12 10 43 1C2014A Step 1 St
  • 为什么 0 除以 0 会出错?

    我在代码中进行的计算中遇到了这个问题 如果除数也为 0 则除数为 0 在我的代码中 对于这种情况我返回 0 我想知道 虽然除以零通常是未定义的 但为什么不为这种情况破例呢 我的理解为什么除以零是未定义的基本上是它不能逆转 然而 我在 0 0
  • 在 asp.net 中不使用 ScriptManager 从 JavaScript 调用 WebServices

    我已经为我的 Asp net 项目创建了一个 Web 服务 目前我正在通过引用中的服务从 JavaScript 访问该服务ScriptManager 但我不想添加ScriptManager这样我就可以在任何 HTML 页面中使用它 好的 因
  • 雪花 - 横向不能位于连接的左侧

    我有一个变体数据类型 我正在对其执行横向展平 但随后我需要左连接其中一个 json 元素 以从 Snowflake 中的另一个关系表中查找相应 ID 的值 当我这样做时 它会给我错误 横向视图不能位于连接的左侧 这是没有意义的 因为如果我不
  • 在 varchar 字段而不是数字字段上使用 BETWEEN ?

    我正在使用 ColdFusion 8 和 SQL Server 2008 R2 我正在尝试查询一列值以获取值在一定范围内的行 该列应该是数字 但事实并非如此 它被设置为 varchar 由其他人 有 100 000 多行数据 这是数据的假样
  • 使用正则表达式删除脚本标签

    我正在尝试使用我在该网站中找到的正则表达式 但它似乎不起作用 有任何想法吗 输入字符串 sFetch 123456 Regex sFetch Regex Replace sFetch
  • 将存储为文本数据类型的数字转换为 int

    我有一个导入结果的数据库 数据库是可交付的 我没有自己进行导入 也无法访问原始数据来自己进行导入 也就是说 有一个整数值被导入到文本数据类型中 所有存储的值都是有效整数 我不断得到 Explicit conversion from data
  • Ionic 3 - 键盘无缘无故地将内容向上推,并超越其他内容

    我正在 Ionic 中开发一个简单的应用程序 我有一个问题 键盘将我的输入字段向上推到另一个 div 上 而键盘有足够的空间 我该如何解决 我已经在互联网上浏览过 但无法找到解决我的问题的任何方法 发生的情况是这样的 正如您所看到的 文本在