【bug】安卓浏览器键盘输入改变弹出层的定位
bug描述
在安卓浏览器中,有一个在页面底部的弹出层表单,样式如下:
.popup {
position: absolute;
bottom: 0;
}
当在这个弹出层输入内容,键盘自动弹出,弹出层的bottom值会改变成键盘的高度,有可能使输入框超出屏幕的高度。
bug解决
给弹出层添加一个高度
.popup {
position: absolute;
bottom: 0;
max-height: 80%;
}
【bug】安卓浏览器键盘输入改变弹出层的定位的更多相关文章
- ios11,弹出层内的input框光标错位 键盘弹出时,输入信息,光标一直乱跳
之前开发了一个微信项目,维护期中苹果手机突然出现光标错位现象,经过排查,发现是最新的ios11系统的锅. 具体情况:弹出层使用position: fixed:弹出层内附带input/textare ...
- 使用Jq实现弹出层
对于前端程序员来说,弹出层是经常用到的,下面我叫大家如何用实现JQuery实现弹出层的效果,代码如下: CSS:弹出层的效果 .mask { position: absolute; top: 0px; ...
- 微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法(转)
最近在做微信公众号的内嵌页面,发现点击输入框时键盘盖住文本框,找到一段代码解决了这个问题. iOS和android手机都已亲测,需要的可以直接拷贝到代码中使用. js代码如下: $(function ...
- 修改某个UITextField的键盘的返回键类型以及监听键盘的高度变化,取到键盘动画退出弹出的时间,一起随着键盘顶出来或者压下去,
1.修改某个UITextField的键盘的返回键类型: [_bottomTextView setReturnKeyType:UIReturnKeyDone]; 1.1.textFied点击return ...
- [bug]小程序弹出层滚动穿透问题修复
如题,解决方案有两种: 1.如果弹出层没有滚动事件,就直接在蒙板和弹出层上加 catchtouchmove;(方便快捷) <template name="popup-modal&quo ...
- LODOP内嵌挡住浏览器的div弹出层
首先,做一个简单的div弹出层用于测试,该弹出层的介绍可查看本博客另一篇博文:[JS新手教程]浏览器弹出div层 然后加入LODOP内嵌,LODOP可以内嵌,C-LODOP不能内嵌,可以在IE等浏览器 ...
- React native 的弹出层(输入)效果
/*弹出层测试*/ import React,{Component} from 'react'; import { StyleSheet, View, Image, Text, TouchableOp ...
- 火狐浏览器高度&制作简单万年历&弹出层
浏览器高度: FireFox中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高 ...
- 点击图片或者鼠标放上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 ...
随机推荐
- 老板说你的UI设计的不高级?你肯定没用这7个技巧...
对于每个网页设计师而言,在设计过程中总会碰到需要作出设计决策的时候.也许你的公司并没有全职设计师,而需求上则要求设计出全新的UI:又或者你正在制作一个你自己的个人项目,而你希望它比 Bootstrap ...
- vertical-align和text-align
vertical-align只适用于内联元素. 垂直对齐:vertical-align属性(转) 行高与单行纯文字的垂直居中,而如果行内含有图片和文字,在浏览器内浏览时,读者可以发现文字和图片在垂直方 ...
- NET(C#)连接各类数据库-集锦
1.C#连接连接Access程序代码:------------------------------------------------------------------------------- u ...
- 一款非常好用的boostrap的验证插件、再也不用自己手写正则表达式和js了
基于jquery.bootstrap数据验证插件bootstrapValidator教程 bootstrap:能够增加兼容性的强大框架. 因为项目需要数据验证,看bootstrapValidator ...
- 2018.09.10 bzoj1597: [Usaco2008 Mar]土地购买(斜率优化dp)
传送门 终究还是通宵了啊... 这是一道简单的斜率优化dp. 先对所有土地排序,显然如果有严格小于的两块土地不用考虑小的一块. 于是剩下的土地有一条边单增,另外一条单减. 我们假设a[i]是单减的,b ...
- linux上安装jdk1.8
开发环境centos7, jdk1.8 首先去官网下载jdk1.8的linux64位安装包 进入目录/usr/local/mypackage/java 利用winscp上传jdk安装包 命令tar - ...
- SpringMvc中controller之间的方法调用
方法一, return new ModelAndView("redirect:"+新地址); 方法二, response.sendRedirect(新地址); return nul ...
- 万能的ctrl+shift+F(Element 'beans' cannot have character [children], because the type's content type is element-only.错误)
今天在spring-servlet.xml文件中出现了一个莫名其妙的错误:Element 'beans' cannot have character [children], because the t ...
- 团队项目(HCL队)第二周
一.项目介绍 1.内容 我们队选择的题目是经典90坦克大战的java实现,后续会加入ai,以实现更丰富的体验. 2.预期使用数量 原版的经典90坦克大战拥有众多粉丝,我们在其上进行拓展,目前预计用户量 ...
- (二)从分布式一致性谈到CAP理论、BASE理论
问题的提出 在计算机科学领域,分布式一致性是一个相当重要且被广泛探索与论证问题,首先来看三种业务场景. 1.火车站售票 假如说我们的终端用户是一位经常坐火车的旅行家,通常他是去车站的售票处购买车票,然 ...