How do you display an Inline element right next to an input field in Elixir/Phoenix?

calebjosue

Hello there all,

I followed the steps depicted at mix phx.gen.auth — Phoenix v1.8.8 in order to get started with an authentication system.

I would like to achieve the feature of showing a little icon in the password field as portrayed in the next picture.

The above it’s just plain HTML with CSS (For POC purposes), no Phoenix app in place.

Still, when I try to replicate the above behavior within the aforementioned Phoenix generated code. I don’t get the expected results, instead I am seeing the eye below the password field and it seems to be rotated as well. Have a look.

I’ve placed the following CSS code in the assets/css/app.css file.

.see::before {

    margin-left: -25px;
    cursor: pointer;
    content: "\1F441";
    font-weight: bold;
}

The relevant code inside lib/my_app_name_web/live/user_login_live.ex is as follows:

<.input field={@form[:password]} type="password" label="Password" required /><i class="see"></i>

Please note the use of the see class inside the i HTML tag (Which is an inline element), right next to the password field.

So, what do you guys think is happening?
I know this question is heavily related to CSS and not Phoenix per se but I am pretty sure you guys know how to integrate CSS within a Phoenix app effectively.

Thank you very much for your answers in advance.

–
Caleb (https://www.calebjosue.com)

3 comments

/phoenix #forms #css

0 1611 3

2023-08-17 02:30:28 UTC

Showing Posts 1 to 3

Show Best Posts
Show All (oldest first)
Show All (newest first)

coen.bakker

Have you considered using absolute positioning of the icon? And/or using a wrapper around the input tag?

Usually there are many ways of getting things done with CSS.

I personally like to use display grid and flex-box to ensure proper placement of all elements relative to each other. If you don’t want the input text to appear behind the icon, that might be a good option.

Post #1

codeanpeace

The default display value for an <input> is inline-block which allows elements to its left and right, but the <.input> function component from core_components.ex sets the display value to block which forces a line break.

Default style sheet for HTML 4:
input, select { display: inline-block }

# core_components.ex
  # All other inputs text, datetime-local, url, password, etc. are handled here...
  def input(assigns) do
    ~H"""
    <div phx-feedback-for={@name}>
      <.label for={@id}><%= @label %></.label>
      <input
        ...
        class={[
          "block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
           ...

Post #2

calebjosue

People!

Yeah, I ended using the approach mentioned by both of you fellows.

@coen.bakker, wrapping around the input tag, absolute positioning, did it for me. And of course documenting myself about what @codeanpeace said in the process.

Thank you very much, I really appreciate it.

–
Caleb

Post #3

— All posts loaded —