问题:小程序的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. 洛谷P2184 贪婪大陆

    题目背景 面对蚂蚁们的疯狂进攻,小FF的\(Tower\) \(defence\)宣告失败--人类被蚂蚁们逼到了\(Greed\) \(Island\)上的一个海湾.现在,小FF的后方是一望无际的大海 ...

  2. Groovy xlsx

    如果在JMeter安装的“bin”文件夹下有Excel(xlsx)文件,则test.xlsx可以使用以下方法动态填充请求参数: 将tika-app.jar添加到JMeter Classpath 重新启 ...

  3. CSS(二)关于position

    position有五种取值 前排说一个问题,2017-10-8日更新: transform会影响定位,导致fixed降级为absolute.无论是transform:translate(),scale ...

  4. Asp.net Core 添加 EF 工具并执行初始迁移错误解决方法(Add-Migration Initial---Build failed.)

    1.问题: 首次在ASP.NET Core项目中使用Code First模式的Entity Framework框架,在添加EF工具并做初始化迁移(perform initial migration), ...

  5. java程序调用.net接口服务地址的写法

    参考文章:http://download.csdn.net/detail/davidiao/7424767 http://www.cnblogs.com/mq0036/p/3554002.html . ...

  6. vue——解决“You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file. ”

    在build/webpack.base.conf.js文件中,注释或者删除掉:module->rules中有关eslint的规则 module: { rules: [ //...(config. ...

  7. SPA 介绍

    SQL 性能分析器(SPA)工具概览 作为 Oracle Real Application Testing 选件/特性,这篇文章将提供一个关于 SQL 性能分析器(SPA)工具的简要概览.这是此系列的 ...

  8. JavaScript 给表格排序

    (function(){ var mTable=document.getElementById('table'); var sort=function(el,index,desc){ var mTbo ...

  9. Postman安装步骤

    Postman是一种网页调试与发送网页http请求的chrome插件. 我们可以用来很方便的模拟get或者post或者其他方式的请求来调试接口. 1.Postman_v4.1.3下载地址: http: ...

  10. Shell笔试题2

    1. 从a.log文件中提取包含"WARNING"或"FATAL",同时不包含"IGNOR"的行,然后提取以":"分割的 ...