teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

HTML追加いたしました

2019/04/15 10:18

投稿

params_bird
params_bird

スコア26

title CHANGED
File without changes
body CHANGED
@@ -37,7 +37,7 @@
37
37
  どうぞよろしくお願いいたします。
38
38
 
39
39
 
40
- ```view
40
+ ```html.haml
41
41
  .label-box__inner
42
42
  = f.label "画像"
43
43
  %br/
@@ -45,6 +45,14 @@
45
45
  = image.file_field :image_path, multipart: :true, class:"input-default"
46
46
  ```
47
47
 
48
+ ```html.erb
49
+ <div class="label-box__inner">
50
+ <%= label "画像" %>
51
+ <%= f.fields_for :images do |image| %>
52
+ <%= image.file_field :image_path, multipart: :true, class:"input-default" %>
53
+ </div>
54
+ ```
55
+
48
56
  ```scss
49
57
  .label-box__inner{
50
58
  padding: 10px 20px 10px 20px;

2

イメージ画像追加いたしました

2019/04/15 10:18

投稿

params_bird
params_bird

スコア26

title CHANGED
File without changes
body CHANGED
@@ -9,6 +9,12 @@
9
9
  試してみたのですが非表示になりますが、要素自体がなくなっているようで該当エリアをクリックしても
10
10
  ファイル選択の画面が出てきません。
11
11
 
12
+ ###実現したいイメージ
13
+ teratailの画像アップロードのように、任意のボタンの下にファイルアップロードの要素を入れたいのですが、
14
+ 元の要素があり障害になっております。
15
+ ![イメージ説明](d0bc39a076baffe969667cf65b9cbf61.png)
16
+
17
+
12
18
  ####現在の画面
13
19
  ![イメージ説明](13e4a3d0c287a16664eb8434b7acf222.png)
14
20
 

1

viewとscss のコードを追加いたしました。

2019/04/15 10:04

投稿

params_bird
params_bird

スコア26

title CHANGED
File without changes
body CHANGED
@@ -26,4 +26,33 @@
26
26
  他のミニアプリで同じように行った際は表示だけが消えてクリックできてたのですが、
27
27
  何故できないのかわからない状態です。
28
28
  詳しい方いらっしゃいましたらご教授いただきたく存じます。
29
+
30
+ 下記は現在のview(html.haml)とscssになります。
29
- よろしくお願いいたします。
31
+ どうぞよろしくお願いいたします。
32
+
33
+
34
+ ```view
35
+ .label-box__inner
36
+ = f.label "画像"
37
+ %br/
38
+ = f.fields_for :images do |image|
39
+ = image.file_field :image_path, multipart: :true, class:"input-default"
40
+ ```
41
+
42
+ ```scss
43
+ .label-box__inner{
44
+ padding: 10px 20px 10px 20px;
45
+ .input-default{
46
+ width: 100%;
47
+ height: 40px;
48
+ margin: auto;
49
+ padding: 10px 16px 8px;
50
+ border-radius:4px;
51
+ border: 1px solid $light_gray;
52
+ background: #fff;
53
+ line-height: 1.5;
54
+ cursor: pointer;
55
+ outline-width: 2px;
56
+ }
57
+ }
58
+ ```