背景
我有一个活动组件,它基本上是一个带有几个text input
s 和一个提交按钮的表单。我的界面看起来有点像我想要的方式,但是有一个问题:我无法在文本输入字段中输入任何内容。
我不知道为什么。
代码
如您所见,我有 2 个文本输入字段。
我的代码如下:
defmodule WebInterface.Live.Window.Main.Authenticate do
@moduledoc """
LiveView subcomponent for the Authenticate page as part of the Main subcomponent.
This subcomponent has the forms for the user's authentication.
"""
use WebInterface, :live_component
alias Elixir.Phoenix.LiveView.Rendered
@spec render(map) :: Rendered.t
def render(assigns) do
~H"""
<div class="header">
<h2>Description</h2>
<p><%= @selected_command.description %></p>
</div>
<div class="body">
<form>
<div class="intro">
<h3>Authentication</h3>
<p>Fill the Cookie and token. Lorem Ipsum.</p>
</div>
<label for="cookie">Cookie: </label>
<input type="text" id="cookie" name="cookie"/>
<label for="token">Token: </label>
<input type="text" id="token" name="token"/>
</form>
<button
phx-click="execute_command"
phx-value-command={@selected_command.id}
>
Save
</button>
</div>
"""
end
end
起初我以为发生这种情况是因为我没有使用text_input
,但是,在 <input type="text" id="cookie" name="cookie"/>
用它替换之后,同样的情况发生了。
CSS
经过更多调查,我发现由于 CSS 代码,文本输入不起作用:
.hidden {
opacity: 0;
height: 0px;
}
.show {
opacity: 1;
transition: opacity 0.6s linear;
}
相反,如果我使用 Phoenix 的内置 CSS 类fade-in
并且fade-out
问题不会发生。
不过,我的应用程序中确实有巨大的空白(因为div
s 刚刚淡出,它们没有被删除),这是另一个问题。
问题
- 为什么我的 CSS 弄乱了文本输入字段?
- 我怎样才能解决这个问题?