343303131@qq.com
343303131@qq.com
  • 发布:2018-12-05 10:36
  • 更新:2019-07-03 11:17
  • 阅读:2559

【报Bug】 uniapp, input样式height无效

分类:uni-app

[内容]
uniapp, input样式height无效 ,不管是px upx em都没有效果

IDE运行环境说明
[HBuilder 或 HBuilderX]
[IDE版本号] 1.2.1

2018-12-05 10:36 分享
已邀请:

最佳回复

DCloud_UNI_GSQ

DCloud_UNI_GSQ

关于 input 组件设置高度不生效的问题:input 组件上有默认的 min-height 属性,要一起修改,如果 min-height 的值大于 height 那么高度以 min-height 为准。(相关知识点:https://developer.mozilla.org/zh-CN/docs/Web/CSS/min-height)

  • 丿风轻丶云淡

    然并卵 原因是你们无视了我们设置的样式 强制加了行内样式导致的

    2019-06-27 17:24

  • DCloud_UNI_GSQ

    回复 丿风轻丶云淡: 你说的是H5端吗?曾经的行内样式是根据实际渲染高度计算而来,导致高度不如意的并不是行内样式。为了避免此行内样式造成误解,新版已经优化,着急的话可使用CLI版进行体验。

    2019-06-27 17:42

  • 丿风轻丶云淡

    回复 DCloud_UNI_GSQ: APP和H5都是一样的结果 CLI版在哪

    2019-06-28 10:04

  • DCloud_UNI_GSQ

    回复 丿风轻丶云淡: 在官网快速上手部分

    2019-06-28 11:12

1416956117@qq.com

1416956117@qq.com

这个问题从uni出生到现在都没改,我认为是官方没有能力修改那几行样式,或者他们的电脑坏了

mail@95jw.cn

mail@95jw.cn

这个问题还没有解决,,,顶起来

木木有么

木木有么

input 框外面加一层view,设置view的高度,用flex布局垂直居中对齐,设置超出隐藏

<view class="search-input">  
    <input class="input-controller" type="text"  />  
    <button class="btn-search" @click="getList"><text class="cuIcon-search icon-search"></text></button>  
</view>  
.search-input {  
    display: flex;  
    align-items: center;  
    height: 50px;  
    padding: 12px 13px;  
    border-radius: 5px;  
}  
.input-controller {  
    flex: 1;  
}  
1754421360@qq.com

1754421360@qq.com

这个问题还没有解决大家顶起来啊

wangzhe2163@163.com

wangzhe2163@163.com

现在input想去设置背景色没门,丑死了,高度没法缩小,容器稍小一点全溢出去了,这么久了,这个问题能解决不了?

763656270@qq.com

763656270@qq.com

这个input组件确实没办法设置高度,建议官方去掉input组件的样式,让用户自定义

1632144575@qq.com

1632144575@qq.com

这个问题对于开发 PC或者H5的小伙伴来说,简直就是灾难性的...
为什么要预设一个固定高度呢?
可以设置PC端不显示呀.
希望uniapp官方可以帮我们解决这个问题.

1416956117@qq.com

1416956117@qq.com

官方难道看不到这个帖子吗?为什么不回一句呢?不回也好,那你倒是默默的把input的内联样式的最低高度去掉啊!整整一年了!!!

1850419251@qq.com

1850419251@qq.com

同样遇到类似问题。。。坐等解释或者更新

哈利蔺特

哈利蔺特

uni-input {
height: 112upx;
line-height: 112upx;
div{
height: inherit;
}
}

tiandiweb@qq.com

tiandiweb@qq.com

这么大的bug,我 在 群里 @ 官方各位管理,没有人回应啊! 估计官方解决不了

343303131@qq.com

343303131@qq.com (作者) - 王土大木工

这不是bug吗, 就应该这样?

  • 343303131@qq.com (作者)

    高度是有,但是都是固定的,审查元素里有个element.style {

    height: 22.3906px;

    line-height: 22.3906px;

    color: rgb(255, 255, 0);

    }。不管我写的多少值,他都是这个数。 这不是我想要的高度

    2018-12-05 16:15

  • mail@95jw.cn

    回复 343303131@qq.com:uni-app 我知道input组件的高度问题解决方案,在input外部嵌套一层view,然后input设置很高就可以了'

    2018-12-25 00:10

  • wangzhe2163@163.com

    回复 mail@95jw.cn:你试试把input背景色改一下,看看变成神马样子

    2019-04-01 18:05

Trust

Trust - 少说废话

请提供一下测试demo,这边测试的结果只是 H5 上浏览器的光标高度不太一样,组件的高度是正确的。

  • 343303131@qq.com (作者)

    应该是有最小高度。我在1440的浏览器上面 element.style {

    height: 98px;

    line-height: 98px;

    color: rgb(0, 0, 0);

    }。最小高度是98 .如果我写的小于98都是98. 大于98就按我写的

    2018-12-05 16:26

  • 343303131@qq.com (作者)

    一个input98px高度。 很好看么

    2018-12-05 16:30

  • Trust

    回复 343303131@qq.com:我测试的是50px和100px,以及你提到的98px,都是预期高度。

    2018-12-05 16:31

  • Trust

    回复 343303131@qq.com:切换成手机模拟器,并不会适配PC的大屏浏览器。

    2018-12-05 16:34

  • wangzhe2163@163.com

    手机上,input组件的高度没法缩小(似乎有最小高度,大概一指宽)。如果没有背景色或边框,从布局上看不出来什么,但加上边框和背景色,您再看看成什么样了?

    2019-04-01 18:11

mail@95jw.cn

mail@95jw.cn

顶起来.

海阔天空99999

海阔天空99999 - 80后

没有解决

315959139@qq.com

315959139@qq.com

强列建议官方的/src/core/view/components/input/index.vue的第173~181行代码不要设置input及里面的元素高度,用户自已定义就行了哇。。。

OnlyFree何

OnlyFree何

我也遇到类似问题,input在初始化时如果是隐藏的,结果计算出placeholder的height=0 line-height=0,我都赋值高度了还被改成0,建议官方高度由用户自己定义,不要把我改了

243644435@qq.com

243644435@qq.com

这个输入框搞死我了,高度死活自定义不了

是在下输了

是在下输了

直接给input加上一个类名,通过类名去设置高度和行高好像能行

wangzhe2163@163.com

wangzhe2163@163.com

这个该死的问题,我倒是一直觉得我css还不够纯熟……但也没有这样打击人的。

1041865683@qq.com

1041865683@qq.com

对于h5的话,我用这个代码就可以操作uni-input里的input元素

input div, input div * {
min-height: 0;
height: 100% !important;
line-height: 100% !important;
}

18715478049@163.com

18715478049@163.com

input的样式也无法覆盖
uni-input {
height: inherit !important;
min-height: 40px !important;
border: 1px solid red;
}

uni-input>div {
min-height: inherit !important;
}

uni-input>div>input {
height: 40px !important;
line-height: 40px !important;
min-height: 40px !important;
}

uni-input>div>div {
min-height: 40px !important;
font-size: 14px;
}

uni-input,
uni-input input {
font-family: UICTFontTextStyleBody;
min-height: 40px !important;
}

yaqingshao@163.com

yaqingshao@163.com

uni-input, uni-input *{
font-family:PingFangSC-Regular !important;
height:inherit;
min-height:14px !important;
}
试过能改

3283059328@qq.com

3283059328@qq.com - 90新手uniapp

height: 50px;
minhight: 50px;
这两个样式同时使用可改高度,再把改为flex布局,把显示的内容上下居中

3283059328@qq.com

3283059328@qq.com - 90新手uniapp

height: 50px;
minhight: 50px;
这两个样式同时使用可改高度,再把改为flex布局,把显示的内容上下居中

3283059328@qq.com

3283059328@qq.com - 90新手uniapp

height: 50px;
minhight: 50px;
这两个样式同时使用可改高度,再把改为flex布局,把显示的内容上下居中

3283059328@qq.com

3283059328@qq.com - 90新手uniapp

height: 50px;
minhight: 50px;
这两个样式同时使用可改高度,再把改为flex布局,把显示的内容上下居中

tiandiweb@qq.com

tiandiweb@qq.com

我也 出现这个问题,H5端审查发现 input高度控制不生效,而uni-input 确实是我设置的尺寸,子元素input就不是。

1321434849@qq.com

1321434849@qq.com

使用less,/deep/ 穿透 .text是我input 的class ,强制选择下面的 所有元素
.text {
width: 100%;
position: absolute;
z-index: 2;
left: 0;
box-sizing: border-box;
/deep/
{
height:10upx!impotant; (这里必须加important。因为他是行内元素)
position: absolute;
width: 100%;
left: 0;
padding-left: 180upx;
box-sizing: border-box;
}
}
我是这样改的。。目前没找到很好的办法。。。。这个有问题点恶心

  • 1321434849@qq.com

    /deep/ 后面有个 星号没显示出来,就是小键盘减号旁边的那个

    2019-07-03 11:18

  • DCloud_UNI_GSQ

    参考最佳回复

    2019-07-03 15:20

该问题目前已经被锁定, 无法添加新回复