关于小程序 input 组件内容显示不全(显示的长度不满 input 宽度)问题
问题:小程序的input组件经常用到,但在使用input组件的时候会出现一种现象:明明设置了input的宽度,但是输入的内容显示的长度范围却怎么都不到一整个input组件的宽度,而且后面没显示的地方无法聚焦,具体效果如下:
经过尝试,发现是因为input组件默认的样式问题,在设置input组件的宽度的时候 如果是这是width的值,则不能用百分比,而要用真实的数据,如px、rpx等;还有一种情况就是如果真需要用到百分比,那么可设置的input组件的 min-width 和 max-width 属性,但注意:如果设置的是 min-width 或 max-width 属性,不可设置 width 属性,具体代码如下:
/*第一种:设置真实值*/
.inputstyle1{
width:450rpx; } /*第二种:设置min-width值*/
.inputstyle2{
min-width:60%; } /*第三种:设置max-width值*/
.inputstyle3{
max-width:60%; } /* 三种选择一种写即可 */
具体效果如下:
以上内容供学习总结分享,有什么不对的地方或可优化的地方,欢迎各位多多指教。
关于小程序 input 组件内容显示不全(显示的长度不满 input 宽度)问题的更多相关文章
- 小程序 input 组件内容显示不全(显示的长度不满 input 宽度)问题
问题:小程序的input组件经常用到,但在使用input组件的时候会出现一种现象:明明设置了input的宽度,但是输入的内容显示的长度范围却怎么都不到一整个input组件的宽度,而且后面没显示的地方无 ...
- 微信小程序的组件总结
本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...
- 小程序web-view组件
不久前微信小程序发布了web-view组件,这个消息在各个圈里引起不小的涟漪.近期正好在做小程序的项目,便研究了一下这个让大家充满期待的组件. 1,web-view这个组件是什么鬼? 官网的介绍: ...
- [转]小程序web-view组件
本文转自:https://www.cnblogs.com/-nothing-/p/7910355.html 1,web-view这个组件是什么鬼? 官网的介绍:web-view 组件是一个可以用来承载 ...
- 微信小程序点击控制元素的显示与隐藏
微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view cla ...
- 微信小程序自定义组件,提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组 ...
- 微信小程序_(组件)icon、text、rich-text、progress四大基础组件
微信小程序基础组件官方文档 传送门 Learn 一.icon图标组件 二.rich-text富文本组件 三.text文本组件 四.progress进度条组件 一.icon图标组件 type:icon的 ...
- 小程序 map组件问题 cover-view问题
使用小程序的组件map时 在开发者工具上一切顺利 但是在真机预览时 发现地图的层级是最高的 任何标签都覆盖不了它 调整z-index值并没有什么效果 原因是 微信小程序的map.video.canva ...
- 微信小程序倒计时组件开发
今天给大家带来微信小程序倒计时组件具体开发步骤: 先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段 ...
随机推荐
- PHP下载远程图片的几种方法总结
1. 使用file_get_contents function dlfile($file_url, $save_to) { $content = file_get_contents($file_url ...
- 7、python数据类型之集合set
数据类型之集合setset 不允许重复的无序集合,不能通过下标取值,因为无序1.创建 创建空集合 s ={} 默认类型为字典,所以不是空集合,空集合如下 s = set() s = { ...
- mysql /etc/my.cnf
[client] port=3306 socket = /tmp/mysql.sock default-character-set=utf8 [mysqld] # 1 general config p ...
- mycat1.6.5分片(字符串拆分hash)
https://blog.csdn.net/webnum/article/details/78313525 分片规则:字符串拆分hash 一.conf/schema.xml文件 <?xm ...
- JS——定时器
定时器在JS中的作用: 1)制作动画.时钟.倒计时 2)异步操作 3)函数缓冲与节流 定时器类型: 1)setTimeout 只执行一次的定时器 2)clearTimeout 关闭只执行一次的定时器 ...
- vbox 挂载共享文件时可能出现的问题以及对应的解决办法
VMBox挂载共享文件时可能出现的问题以及对应的解决办法 如果出现“未能加载虚拟光盘***.iso 到虚拟电脑的错误” : 左边一栏,右键光盘,eject,再安装
- (转)深入浅出linux系统umask值及其对应的文件权限讲解
浅出linux系统umask值及其对应的文件权限讲解 原文:http://blog.51cto.com/oldboy/1060032 缘起:1.此文的撰写特别为感谢51cto的博客工作人员和领导,老男 ...
- boot and loader
boot and loader boot 程序的所有作用 清屏 将光标移到屏幕左上角 显示 Start Boot 提示信息 加载 loader 程序的代码到 0x10000 物理内存地址 将CPU的段 ...
- <linux下内置命令和外部命令>
Linux下内置命令和外部命令 1.linux的命令可以分为内部命令和外部命令: 内部命令在系统启动时就调入内存,是常驻内存的,所以执行效率高. 而外部命令是系统的软件功能,用户需要时才从硬盘中读入内 ...
- Vmware 可用的激活码
4F207-8HJ1M-WZCP8-000N0-92Q6G 0A6Z5-8H1EJ-WZCL1-PK072-23DJG 0F0Q9-8F38L-RZXT9-4U054-ACW5F JA02E-09H4 ...