[英]How to make forms stay in place when HTML display data is blank
I'm trying to make a form field stay in place whenever the HTML display data part is blank.每当 HTML 显示数据部分为空白时,我都会尝试使表单字段保持不变。 The form field does stay in place whenever the display data part is filled in, but when it is blank, the form field moves upward and indents slightly to the right.每当填写显示数据部分时,表单域确实会保持原位,但是当它为空白时,表单域会向上移动并略微向右缩进。 I'm trying to code it in a way that when it is blank, the entire form field does not move upward, and does not indent slightly to the right.我试图以这样一种方式对其进行编码,当它为空白时,整个表单域不会向上移动,也不会略微向右缩进。
My code looks like this:我的代码如下所示:
<h2 :title="option.ID">
<image/>
{{ option.Name }}
</h2>
<div class="row">
<label class="bold">Option Name</label>
</div>
<div class="optio ">
<input
v-model="option.Name"
:disabled="isDisabled(option)"
>
</div>
</div>
Any idea how to do this?知道怎么做吗? Thank you!谢谢!
Your form probably moves up when the input is empty because of the rendering of option.Name in the <h2>
.由于在<h2>
中呈现 option.Name ,当输入为空时,您的表单可能会向上移动。 However, this would probably depend on the size of the image contained in it.但是,这可能取决于其中包含的图像的大小。
Could you try to add some dummy text next to {{ option.Name }}
and see if the problem persists?您能否尝试在{{ option.Name }}
旁边添加一些虚拟文本,看看问题是否仍然存在?
for instance:例如:
<h2 :title="option.ID">
<image
id="photo"
alt="`photo picture`"
title="option image"
class="image" />
{{ option.Name }} dummy text
</h2>
If the form doesn't move anymore, you can think of setting setting the height of the h2 in CSS, or force the rendering of some text when option.Name
is undefined:如果窗体不再移动,可以考虑在 CSS 中设置 h2 的高度,或者在option.Name
未定义时强制渲染一些文本:
<h2 :title="option.ID">
<image
id="photo"
alt="`photo picture`"
title="option image"
class="image" />
{{ option.Name || 'placeholder' }} dummy text
</h2>
Here, placeholder can be whatever you want, even a space在这里,占位符可以是任何你想要的,甚至是一个空格
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.