Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8924

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

$
0
0

事象

新規投稿画面で投稿用の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_withmodel: @モデル名,local: truedo|f|
      (略)
      =f.submit'Upload',class: 'submit'
new.scss
.submit{opacity:0;}

参考

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


Viewing all articles
Browse latest Browse all 8924

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>