How to make forms stay in place when HTML display data is blank

Question

I'm trying to make a form field stay in place whenever the HTML display data part is blank. 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!

Answer 1

Your form probably moves up when the input is empty because of the rendering of option.Name in the <h2> . 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?

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:

<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