Proposal to fix "jumping content" effect affecting forms with invalid inputs

Environment

Elixir version (elixir -v): n/a
Phoenix version (mix deps): 1.7.14
Operating system: n/a

Actual behavior

When a simple_form input fails validation, an error is displayed under that input, pushing all the downstream content down and causing a "jumping content" effect.

This creates a frustrating experience because, as a user, I have to readjust to the new position of the submission button

Expected behavior

Input validation errors don't affect downstream content.

Potentially, we can fix that with a relative/absolute position. I'm not a CSS expert, but I'm happy to open PR if you folks find the approach below reasonable.

--- a/lpriv/templates/phx.gen.live/core_components.ex
+++ b/priv/templates/phx.gen.live/core_components.ex
@@ -367,7 +367,7 @@ defmodule <%= @web_namespace %>.CoreComponents do
   # All other inputs text, datetime-local, url, password, etc. are handled here...
   def input(assigns) do
     ~H"""
-    <div>
+    <div class="relative">
       <.label for={@id}><%= @label %></.label>
       <input
         type={@type}
@@ -381,7 +381,9 @@ defmodule DreamHouzWeb.CoreComponents do
         ]}
         {@rest}
       />
-      <.error :for={msg <- @errors}><%= msg %></.error>
+      <div class="absolute w-full">
+        <.error :for={msg <- @errors}><%= msg %></.error>
+      </div>
     </div>
     """
   end
@@ -474,7 +476,7 @@ defmodule DreamHouzWeb.CoreComponents do

   def error(assigns) do
     ~H"""
-    <p class="mt-3 flex gap-3 text-sm leading-6 text-rose-600">
+    <p class="mt-1 flex gap-3 text-sm leading-6 text-rose-600">
       <.icon name="hero-exclamation-circle-mini" class="mt-0.5 h-5 w-5 flex-none" />
       <%= render_slot(@inner_block) %>
     </p>

Hi @lessless,

I've seen you mentioning this in the Elixir Slack where you've already got some feedback. I agree with what @sevenseacat wrote:

I’m not sure how that proposal will go - simple form is meant to be just that, simple. It’s really hard to account for error messages of varying lengths with absolute positioning.

This is a pretty considerable downside, therefore I don't see us going with this proposal.

Finally,

Customise your own core components however you like, that’s the point of them after all, but not sure the template would be changed in such a way

is also good advice: if this solution works fine in your project, absolutely go for it! But if we did this by default, it probably wouldn't take long before a new issue about clipping error messages would come up.

Thank you!

phoenixframework / phoenix