textarea只允许上下调节尺寸
对于extarea,因为如果不做限制的话,它是可以自由调节尺寸的,对于这一点我相信用户是非常喜欢的,因为每个人都有自己认为合适的尺寸,但是对于前端来说就比较头疼了,因为随意调节宽高,就会破坏整体布局,
所以以前一直都是在css,加上一句resize:none,比如像合作意向描述那个框。
但是这样做虽然可以达到页面的绝对控制,但是却失去了设计textarea的初衷,对于如今的pc或移动端(已经占据了80%以上流量入口),我们一般不是担心高度的调节,而是宽度!
所以我们给他一个绝对或相对宽度,而用户只能调节高度(这也是一般用户的需求)
解决方法:
在textarea css中加入min-width:90%(加入你自己的高度), max-width:90%(与前一个高度保持一致),如图:只能上下进行拖动
优点:
1. 不影响原有布局
2. 增加用户体验。
textarea只允许上下调节尺寸的更多相关文章
- Android系统定制之SystemUI修改:下拉通知栏尺寸【转】
本文转载自:https://blog.csdn.net/huil0925/article/details/67632358 最近项目需要修改下拉通知栏面板的宽度,完成后,写个Blog做个总结,也提供给 ...
- 创建支持多种屏幕尺寸的Android应用
Android涉及各种各样的支持不同屏幕尺寸和密度的设备.对于应用程序,Android系统通过设备和句柄提供了统一的开发环境,大部分工作是校正每一个应用程序的用户界面到它显示的屏上.与此同时,系统提供 ...
- 创办支持多种屏幕尺寸的Android应用
创建支持多种屏幕尺寸的Android应用 Android涉及各种各样的支持不同屏幕尺寸和密度的设备.对于应用程序,Android系统通过设备和句柄提供了统一的开发环境,大部分工作是校正每一个应用程序的 ...
- Cocos2d-x使用android拍照功能加载照片内存过大,通过另存照片尺寸大小解决
使用2dx调用android拍照功能,拍照结束后在2dx界面显示拍照照片,如果不对照片做处理,会出现内存过大的问题,导致程序崩溃,如果仅仅另存拍照照片,则照片质量大小均下降,导致照片不够清晰,后来发现 ...
- textarea的中文输入判断与搜狗输入法的特殊行为
虽然要讲解的知识点是通用的,但是还是要介绍下我的应用场景和测试环境. 0.1 应用场景和测试环境 我的应用是一块使用Html Canvas开发的黑板,在黑板上实现简单的文字编辑功能. 操作系统:win ...
- 【BootStrap】 概述 & CSS
BootStrap BootStrap由Twitter开发,基于HTML,CSS,JS,是一套前端框架.它的特点是对浏览器良好的支持(目前市面上所有流行浏览器都可以),兼容移动设备,以及响应式设计(响 ...
- 技巧JS
1. document.referrer可以获得上一页的地址,使用document.anchors获得页面上面所有的链接元素,而不必使用document.getElementsByTagNam ...
- css的margin
1.适合于没有设定width/height的普通block水平元素 2.只适用于水平方向尺寸 例子:一侧定宽的自适应布局 <html> <head> <meta name ...
- lhgDialog窗口组件
应用到你的项目 在页面head引入lhgdialog(如果项目采用jQuery作为框架,则引用jQuery的库). <script type="text/javascript" ...
随机推荐
- 策略模式--List排序
需求:根据姓名进行排序,升序或者降序,如果名字一样,就按照id升序排序,用策略模式 步骤一: 定义一个Person对象 public class Person { private Integer id ...
- python_hello word!
什么是编程? --模拟现实世界,跨时间,地点,不受外界坏境干扰到的虚拟现实世界,数字化的可定制化的世界 编程语言有哪些? python ,java,php ,c++,等 python开发环境准备工作 ...
- scrapy_items
为什么要items? 当数据量多的时候,没有统一的数据管理,统一格式化麻烦 items中除了能添加字段,还能做什么? 1. 进行预先处理 2. 对从items出去的数据进行处理 3. 写上sql语句逻 ...
- fullpage.js的easing参数怎样配置自定义动画
首先看非官方文档 并没有详细的说明怎样去使用easing.js,所以我加的运动属性根本就不起作用, 再看,官方文档 Optionally, when using css3:false, you can ...
- Node-debug方法
本文使用配置node-inspector配合chorme完成debug(编辑器使用SublimeText3). 1.用命令行进入安装node的目录,使用npm install -g node-insp ...
- python自动化运维常用模块安装
1.系统信息性能模块:psutil 源码安装: wget https://pypi.python.org/packages/source/p/psutil/psutil-2.0.0.tar.gz -- ...
- vscode使用笔记
将vue文件添加成html文件识别 "files.associations": {"*.vue": "html"} 插件 view in b ...
- 安装golang的mongodb驱动mgo速记
这里介绍的方法只适用于Centos平台,测试版本为centos 6.5 下载源码安装实在麻烦,这里采用比较简单的方法给GO安装mongodb驱动 安装mgo之前,需要先安装bzr yum -y ins ...
- StringBuffer和String需要注意的
首先,StringBuffer的toString方法和String的subString方法都是在新生成了一个新的String. 最近做的一个功能,多线程的从SQLite数据库中读取数据.将数据拼成在M ...
- BZOJ 4318: OSU! [DP 概率]
传送门 题意:变成了告诉每个操作的成功概率,并且得分是三次方 一样....分别维护$x,\ x^2,\ x^3$的期望就行了 注意$x^3$是我们最终求的得分,即使失败得分也要累加上之前的 #incl ...