小程序 input 组件内容显示不全(显示的长度不满 input 宽度)问题
问题:小程序的input组件经常用到,但在使用input组件的时候会出现一种现象:明明设置了input的宽度,但是输入的内容显示的长度范围却怎么都不到一整个input组件的宽度,而且后面没显示的地方无法聚焦,具体效果如下:

经过尝试,发现是因为input组件默认的样式问题,在设置input组件的宽度的时候 如果是这是width的值,则不能用百分比,而要用真实的数据,如px、rpx等;还有一种情况就是如果真需要用到百分比,那么可设置的input组件的 min-width 和 max-width 属性,但注意:如果设置的是 min-width 或 max-width 属性,不可设置 width 属性,具体代码如下:

1 /*第一种:设置真实值*/
2 .inputstyle1{
3 width:450rpx;
4
5 }
6
7 /*第二种:设置min-width值*/
8 .inputstyle2{
9 min-width:60%;
10
11 }
12
13 /*第三种:设置max-width值*/
14 .inputstyle3{
15 max-width:60%;
16
17 }
18
19 /* 三种选择一种写即可 */

具体效果如下:

小程序 input 组件内容显示不全(显示的长度不满 input 宽度)问题的更多相关文章
- 关于小程序 input 组件内容显示不全(显示的长度不满 input 宽度)问题
问题:小程序的input组件经常用到,但在使用input组件的时候会出现一种现象:明明设置了input的宽度,但是输入的内容显示的长度范围却怎么都不到一整个input组件的宽度,而且后面没显示的地方无 ...
- 微信小程序点击控制元素的显示与隐藏
微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view cla ...
- 微信小程序使用wxParse,解决图片显示路径问题
我们经常用到发布文章,用的是UEditor百度富文本编辑器,方便排版,存储的也是html代码,这样小程序解析出来的也是排版的样式,但是使用wxParse解析html的时候,因为存储的是图片的相对路径, ...
- 微信小程序的组件总结
本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 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 组件是一个可以用来承载 ...
- 微信小程序自定义组件,提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“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 ...
随机推荐
- HTTP协议工作原理
HTTP简介 超文本传输协议(HTTP:Hypertext Transport Protocol)是万维网应用层的协议,它通过两个程序实现:一个是客户端程序(各种浏览器),另一个是服务器 ...
- Linux学习8-CentOS部署自己本地的django项目
前言 自己本地写好的django项目,如何部署到linux服务器上,让其他的小伙伴也能访问呢?本篇以centos系统为例,把本地写好的django项目部署到linux服务器上 环境准备: 环境准备: ...
- 3.1.1 Spring 简介
1. 概念 Spring是一个轻量级控制反转(IoC)和面向切面(AOP)的容器框架. IoC : Inversion of Control AOP : Aspect Oriented Program ...
- 你不知道的JavaScript-1.作用域是什么
作用域是一套规则,用于确定在何处以及如何查找变量.函数等(标识符).如果查找的目的是对变量进行赋值,那么就会使用 LHS 查询:如果目的是获取变量的值,就会使用 RHS 查询. 赋值操作符会导致 LH ...
- Python使用中错误(持续更新.....)
1.在使用requests发送请求,响应数据转成json提示,没有可解码的json 解决办法: 这是由于,发送请求的数据,存在错误,响应出错比如404 400,所以找不到可以解码的json 示例如下: ...
- centos7安装zabbix3.0超详细步骤解析
centos7安装zabbix3.0超详细步骤解析 很详细,感谢作者 以下是我操作的history 622 java -version 623 javac -version 624 grep SELI ...
- python 回调函数,最简单的例子
回调的英文定义: A callback is a function that is passed as an argument to another function and is executed ...
- openGL学习----光照
0.光照处理时候,向量点乘一定要是标准化后的单位向量!!! 1.冯氏光照模型:光照=环境光+漫反射+镜面反射 vec3 result = ambient + diffuse + specular; 一 ...
- 微信小程序一些demo链接地址
校园小情书小程序前端+后端源码 https://www.douban.com/group/topic/116974400/ 小程序源码疯狂猜成语小程序源码UI美观 https://www.douban ...
- 1、Kafka介绍
1.Kafka介绍 1)在流式计算中,Kafka一般用来缓存数据,Storm通过消费Kafka的数据进行计算. 2)Kafka是一个分布式消息队列. 3)Kafka对消息保存时根据Topic进行归类, ...