布尔马输入忽略大小属性

Question

使用Bulma v0.7.1，input="text"类会使<label class="label">Short input1</label> <input class="input" name="short_input1" type="text" size="3"> 控件扩展到可用的列宽，即使指定了size属性也是如此。

{{1}}

示例：

Good Form Design的4th Commandment指出，文本输入应“根据其预期输入的大小” 。

如何使用布尔玛适当调整文本输入的大小？

Fiddle

Answer 1

我找不到如何在Bulma中本地设置输入宽度的方法，并且嵌套列导致各个标签换行（并且嵌套不提供<input type="text">宽度的微调控制）。

所以，我结束了hard coding a style attribute。 :/

<input style="width:3em;" class="input" name="inp1" type="text"  placeholder="123">

Answer 2

很遗憾，布尔玛还没有该功能。
但是，您可以使用 onkeypress 事件：

<input type="text" class="input" placeholder="Type your Name" name="short_input1" value='' onkeypress="this.style.width = ((this.value.length + 3) * 8) + 'px';">

注意：此解决方案仅在每个字符正好为8px宽时有效。
看看我的fiddle。