问题:小程序的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 宽度)问题的更多相关文章

  1. 关于小程序 input 组件内容显示不全(显示的长度不满 input 宽度)问题

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

  2. 微信小程序点击控制元素的显示与隐藏

    微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view cla ...

  3. 微信小程序使用wxParse,解决图片显示路径问题

    我们经常用到发布文章,用的是UEditor百度富文本编辑器,方便排版,存储的也是html代码,这样小程序解析出来的也是排版的样式,但是使用wxParse解析html的时候,因为存储的是图片的相对路径, ...

  4. 微信小程序的组件总结

    本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...

  5. 小程序web-view组件

    不久前微信小程序发布了web-view组件,这个消息在各个圈里引起不小的涟漪.近期正好在做小程序的项目,便研究了一下这个让大家充满期待的组件.   1,web-view这个组件是什么鬼? 官网的介绍: ...

  6. [转]小程序web-view组件

    本文转自:https://www.cnblogs.com/-nothing-/p/7910355.html 1,web-view这个组件是什么鬼? 官网的介绍:web-view 组件是一个可以用来承载 ...

  7. 微信小程序自定义组件,提示组件

    微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组 ...

  8. 微信小程序_(组件)icon、text、rich-text、progress四大基础组件

    微信小程序基础组件官方文档 传送门 Learn 一.icon图标组件 二.rich-text富文本组件 三.text文本组件 四.progress进度条组件 一.icon图标组件 type:icon的 ...

  9. 小程序 map组件问题 cover-view问题

    使用小程序的组件map时 在开发者工具上一切顺利 但是在真机预览时 发现地图的层级是最高的 任何标签都覆盖不了它 调整z-index值并没有什么效果 原因是 微信小程序的map.video.canva ...

随机推荐

  1. docker+gitlab的安装和迁移

     docker+gitlab的安装 docker search gitlab docker pull docker.io/gitlab/gitlab-ce docker run --name=: -- ...

  2. JAVA-数据库之MySQL与JDBC驱动下载与安装

    相关资料:<21天学通Java Web开发> MySQL下载地址:https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.19-wi ...

  3. 猪年设计素材:一波免费猪猪icon已为你备好

    马上就要步入猪年,设计圈里又要出现一波可爱的猪猪崽.快来收藏一波吧~ 先来看看下面几只尝尝鲜吧!墨刀准备了141个svg格式的猪猪icon,拉到文末免费获取哦! 猪年日历 (2019 Pig Cale ...

  4. 深入理解Java虚拟机4-chap6-斗者1星

    一.JVM语言无关性 1.以字节码为基础(Class文件为一组以8位字节为基础单位的二进制流),JVM与Class文件关联,而非与Java语言关联 2.代码编译从本地码(Native Code)转为字 ...

  5. python进阶(二) 多进程+协程

    我们大多数的时候使用多线程,以及多进程,但是python中由于GIL全局解释器锁的原因,python的多线程并没有真的实现 实际上,python在执行多线程的时候,是通过GIL锁,进行上下文切换线程执 ...

  6. HDU 2586 How far away(LCA+邻接表)

    How far away &题解: 和上篇是一样的题,这用的是lca方法做的, 不知道为什么,把数组开到80000 就a了 >_< 哈 我现在知道为什么了,因为我的rmq数组没有乘 ...

  7. egg.js基础入门

    之前一直使用koa, 刚刚接触egg, 做了一些入门的笔记 准备工作 1  首先安装脚手架,,并创建项目. $ npm i egg-init -g $ egg-init egg-demo --type ...

  8. CentOS7+Apache+MySQL+PHP环境

    Apache 1.安装Apache:yum -y install httpd 2.开启apache服务:systemctl start httpd.service 3.设置apache服务开机启动:s ...

  9. http返回状态码含义

    http返回状态码 http状态码 200 2开头的都表示这个请求发送成功,最常见的就是200,就代表这个请求是ok的,服务器也返回了. 300 3开头的代表重定向,最常见的是302,把这个请求重定向 ...

  10. dubbo框架整合常见问题

    逆向工程常见问题总结 tomcat7插件启动项目卡在:log4j:WARN See http://logging.apache.org/log4j/1.2/faq.html#noconfig for ...