2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

submitボタンにdisplay: noneを付与すると送信できない問題の解決方法

Posted at

事象

新規投稿画面で投稿用のsubmitボタンを用意するときform_with(for)をよく使いますが、
fontawesomeなどでアイコンを付与したい場合はレイアウトがうまく決まりません。
そこで下記のようにstyle: 'display: none'を付与してみたのですが、
そうすると送信ボタンが効かず投稿ができなくなってしまいました。

new.html.haml
= f.submit 'Upload', class: 'submit', style: 'display: none'

因みにf.label下にあるfile_fieldはstyle: 'display: none'を付与しても問題なく動作します。

解決策

下記のようなhamlファイルの場合、style: 'display: none'を付与するのではなく
scss(css)ファイルでsubmitを透明化すればボタンを無力化することなく隠すことができました!

new.html.haml
  (略)
    = form_with model: @モデル名, local: true do |f|
      (略)
      = f.submit 'Upload', class: 'submit'
new.scss
.submit {
  opacity: 0;
}

参考

【CSS】opacityで画像や文字などを透過させる方法

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?