小程序 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 ...
随机推荐
- LINUX PID 1和SYSTEMD
LINUX PID 1和SYSTEMDhttp://coolshell.cn/articles/17998.html 要说清 Systemd,得先从 Linux 操作系统的启动说起.Linux 操作系 ...
- JDK 1.8源码阅读 HashSet
一,前言 类实现Set接口,由哈希表支持(实际上是一个 HashMap集合).HashSet集合不能保证的迭代顺序与元素存储顺序相同.HashSet集合,采用哈希表结构存储数据,保证元素唯一性的方式依 ...
- Python3.6安装使用tesserocr文件时遇到问题
本机运行环境: Win 10 version 1709; Python 3.6.3 (v3.6.3:2c5fed8, Oct 3 2017, 18:11:49) [MSC v.1900 64 bit ...
- 解决xp突然出现开机登录界面的问题
对系统进行网络相关的设置后,有时会让系统开启时突然冒出登录窗口,即使我们没有对自己的系统设置开机密码,也会冒出这个,需要回车一下才会进入系统:关机时,xp特有的“关机”,“待机”,“重新启动”按钮会变 ...
- HDU 3033 分组背包(至少选一个)
分组背包(至少选一个) 我真的搞不懂为什么,所以现在就只能当作是模板来用吧 如果有大牛看见 希望评论告诉我 &代码: #include <cstdio> #include < ...
- windows程序设计 显示一个窗口
#include <windows.h> HINSTANCE hinst; LRESULT CALLBACK MainWndProc(HWND, UINT, WPARAM, LPARAM) ...
- Centos开机自启动脚本的制作
原文地址:http://www.2cto.com/os/201306/220559.html 我的一个Centos开机自启动脚本的制作 一.切换到/etc/init.d/ 二.制作sh脚本 v ...
- 浅谈react的初步试用
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- JavaScript 神奇的参数
JS函数的参数,和其他语言区别非常大.它不在乎你传过来多少个参数,也不在乎传过来的参数是什么类型.即使你定义的函数只接受两个参数,你调用这个函数的时候可以传递一个.三个甚至不传参数.这是因为JavaS ...
- chm开源文档制作
作为开发人员,API文档是非常关键的^_^,但是很多时候官方提供的文档是html的docs,不方便于携带查询,本章主要介绍chm文档的制作方法. 使用jd2chm制作chm文档 安装之前必须先安装 h ...