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

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

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

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

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

  3. 小程序web-view组件

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

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

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

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

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

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

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

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

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

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

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

  9. 微信小程序倒计时组件开发

    今天给大家带来微信小程序倒计时组件具体开发步骤: 先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段 ...

随机推荐

  1. AnkhSVN使用手册

    (一) 安装: Subversion客户端安装------AnkhSVN AnkhSVN是一款在VS中管理Subversion的插件,您可以在VS中轻松的提交.更新.添加文件,而不用在命令行或资源管理 ...

  2. linux使用echo指令向文件写入内容

    echo "aaa">test.sh 该指令会覆盖文件原内容,如果文件不存在,则创建 echo "aaa">>test.sh 追加文件内容 h ...

  3. NewStar 信息分发系统设计

    目录 NewStar 信息分发系统设计 我想要怎么做 系统流程图 解释和初步的模板展示 NewStar 信息分发系统设计 我们在全世界发布网站本质就是向全世界分发我们的信息给客户/潜在客户,然后希望促 ...

  4. java Smaphore 控制并发线程数

    概念: Semaphore(信号量)是用来控制同事访问特定资源的线程数量,它通过协调各个线程,已保证合理的使用公共资源. 应用场景: Semaphore 可以用于做流量控制,特别是共用资源有限的应用场 ...

  5. Docker | 第五章:构建自定义镜像

    前言 上一章节,主要是介绍了下Dockerfile的一些常用命令的说明.我们知道,利用Dockerfile可以构建一个新的镜像,比如运行Java环境,就需要一个JDK环境的镜像,但直接使用公共的镜像时 ...

  6. JS展示预览PDF。

    刚好遇到需求,需要在手机端--展示一个电子收据,电子收据返回是PDF格式的,所以需要在前端上面去做PDF预览. 在学习过程中,了解到一种很简单,不需要任何插件的方法做PDF预览,但是这方法有局限性. ...

  7. 10.&与&&以及位运算符。

    这是单独的一块,因为一条讲不清楚(虽然内容也不够一篇),而且我之前也没好好弄清楚,所以有必要写出来. 说位运算符也是从&与&&(|与||类似)之间的区别讲起的.事实上,对于两个 ...

  8. 给 Magento 2 添加缓存层的分析与尝试

    虽然黑色星期五有惊无险的过去了, 但是 Magento 2 社区版无法读写分离这个限制, 始终是悬在整个网站上的一把利剑. 我之前尝试过给 Magento 2 写一个 MySQL 读写分离的插件, 在 ...

  9. 前端seo基础规范

    基本规范 TDK代码规范 A: 关键词,一般3~4个最好,要与当前页面内容相关(根据实际情况,不适宜过多堆积关键词): B: 杜绝不同URL的页面标题重复现象,作为搜索结果摘要的重要选择目标之一,一定 ...

  10. FRM-92050错误

    使用IE8在打开EBS Form界面时,窗口提示信息“Internet Explorer 已对此页面进行了修改,以帮助阻止跨站脚本.单击此处,获取详细信息...”或者R12 IE8中出"FR ...