bug描述

在安卓浏览器中,有一个在页面底部的弹出层表单,样式如下:

.popup {

    position: absolute;
bottom: 0;
}

当在这个弹出层输入内容,键盘自动弹出,弹出层的bottom值会改变成键盘的高度,有可能使输入框超出屏幕的高度。

bug解决

给弹出层添加一个高度

.popup {
position: absolute;
bottom: 0;
max-height: 80%;
}

【bug】安卓浏览器键盘输入改变弹出层的定位的更多相关文章

  1. ios11,弹出层内的input框光标错位 键盘弹出时,输入信息,光标一直乱跳

      之前开发了一个微信项目,维护期中苹果手机突然出现光标错位现象,经过排查,发现是最新的ios11系统的锅. 具体情况:弹出层使用position: fixed:弹出层内附带input/textare ...

  2. 使用Jq实现弹出层

    对于前端程序员来说,弹出层是经常用到的,下面我叫大家如何用实现JQuery实现弹出层的效果,代码如下: CSS:弹出层的效果 .mask { position: absolute; top: 0px; ...

  3. 微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法(转)

    最近在做微信公众号的内嵌页面,发现点击输入框时键盘盖住文本框,找到一段代码解决了这个问题. iOS和android手机都已亲测,需要的可以直接拷贝到代码中使用. js代码如下: $(function ...

  4. 修改某个UITextField的键盘的返回键类型以及监听键盘的高度变化,取到键盘动画退出弹出的时间,一起随着键盘顶出来或者压下去,

    1.修改某个UITextField的键盘的返回键类型: [_bottomTextView setReturnKeyType:UIReturnKeyDone]; 1.1.textFied点击return ...

  5. [bug]小程序弹出层滚动穿透问题修复

    如题,解决方案有两种: 1.如果弹出层没有滚动事件,就直接在蒙板和弹出层上加 catchtouchmove;(方便快捷) <template name="popup-modal&quo ...

  6. LODOP内嵌挡住浏览器的div弹出层

    首先,做一个简单的div弹出层用于测试,该弹出层的介绍可查看本博客另一篇博文:[JS新手教程]浏览器弹出div层 然后加入LODOP内嵌,LODOP可以内嵌,C-LODOP不能内嵌,可以在IE等浏览器 ...

  7. React native 的弹出层(输入)效果

    /*弹出层测试*/ import React,{Component} from 'react'; import { StyleSheet, View, Image, Text, TouchableOp ...

  8. 火狐浏览器高度&制作简单万年历&弹出层

    浏览器高度: FireFox中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高 ...

  9. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...

随机推荐

  1. How Autofs Works

    How Autofs Works Autofs is a client-side service that automatically mounts the appropriate file syst ...

  2. Java数据结构和算法(一)概念

    Java数据结构和算法(一)概念 数据结构与算法目录(https://www.cnblogs.com/binarylei/p/10115867.html) 一.逻辑结构 数据之间的相互关系称为逻辑结构 ...

  3. 5 个关键点!优化你的 UI 原型设计

    当你和你的团队着手开始一个产品开发的时候,最开始的一步一般是绘制线框图,这是大部分产品项目的第一步,它不复杂但是却对整个产品的完成形态和质量有着至关重要的作用. 很多刚开始工作设计师或者产品经理都会提 ...

  4. centos7 jenkins安装和使用

    jenkins 安装和使用 1.先安装jdK1.8 和 maven 此步骤省略 2.进入jenkisn 官网 下载https://jenkins.io/download/ Long-term Supp ...

  5. 2018.09.25 bzoj3572: [Hnoi2014]世界树(虚树+树形dp)

    传送门 虚树入门题? 好难啊. 在学习别人的写法之后终于过了. 这道题dp方程很好想. 主要是不好写. 简要说说思路吧. 显然最优值只能够从子树和父亲转移过来. 于是我们先dfs一遍用儿子更新父亲,然 ...

  6. 多块盘制作成一个lvm

    1.创建pv[root@autodeploy nfs]# pvcreate /dev/vdd1WARNING: xfs signature detected on /dev/vdd1 at offse ...

  7. Spring Cloud基础教程视频教程

    视频课程包含: Spring Cloud基础视频教程24G 目录 获取方式: 关注公众微信号:博涵大数据 或者扫描下面的二维码关注获取. 关注后在公众平台上回复"SpringCloud基础& ...

  8. flac3d自定义变量输出云图

    定义单元体能量为微单元体的应变比能,即当应力和应变满足线性关系时,微单元体在三向应力状态下的应变比能为: (3.1) 下面代码为用户自定义云图显示变量. Flac3d Code new gen zon ...

  9. (并查集) Wireless Network --POJ --2236

    链接: http://poj.org/problem?id=2236 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82830#probl ...

  10. 系统目录APK更新——权限问题

    package com.example.wx; import java.io.File;import java.io.FileOutputStream;import java.io.IOExcepti ...