質問編集履歴

3

HTML追加いたしました

2019/04/15 10:18

投稿

params_bird
params_bird

スコア26

test CHANGED
File without changes
test CHANGED
@@ -76,7 +76,7 @@
76
76
 
77
77
 
78
78
 
79
- ```view
79
+ ```html.haml
80
80
 
81
81
  .label-box__inner
82
82
 
@@ -87,6 +87,22 @@
87
87
  = f.fields_for :images do |image|
88
88
 
89
89
  = image.file_field :image_path, multipart: :true, class:"input-default"
90
+
91
+ ```
92
+
93
+
94
+
95
+ ```html.erb
96
+
97
+ <div class="label-box__inner">
98
+
99
+ <%= label "画像" %>
100
+
101
+ <%= f.fields_for :images do |image| %>
102
+
103
+ <%= image.file_field :image_path, multipart: :true, class:"input-default" %>
104
+
105
+ </div>
90
106
 
91
107
  ```
92
108
 

2

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

2019/04/15 10:18

投稿

params_bird
params_bird

スコア26

test CHANGED
File without changes
test CHANGED
@@ -17,6 +17,18 @@
17
17
  試してみたのですが非表示になりますが、要素自体がなくなっているようで該当エリアをクリックしても
18
18
 
19
19
  ファイル選択の画面が出てきません。
20
+
21
+
22
+
23
+ ###実現したいイメージ
24
+
25
+ teratailの画像アップロードのように、任意のボタンの下にファイルアップロードの要素を入れたいのですが、
26
+
27
+ 元の要素があり障害になっております。
28
+
29
+ ![イメージ説明](d0bc39a076baffe969667cf65b9cbf61.png)
30
+
31
+
20
32
 
21
33
 
22
34
 

1

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

2019/04/15 10:04

投稿

params_bird
params_bird

スコア26

test CHANGED
File without changes
test CHANGED
@@ -54,4 +54,62 @@
54
54
 
55
55
  詳しい方いらっしゃいましたらご教授いただきたく存じます。
56
56
 
57
+
58
+
59
+ 下記は現在のview(html.haml)とscssになります。
60
+
57
- よろしくお願いいたします。
61
+ どうぞよろしくお願いいたします。
62
+
63
+
64
+
65
+
66
+
67
+ ```view
68
+
69
+ .label-box__inner
70
+
71
+ = f.label "画像"
72
+
73
+ %br/
74
+
75
+ = f.fields_for :images do |image|
76
+
77
+ = image.file_field :image_path, multipart: :true, class:"input-default"
78
+
79
+ ```
80
+
81
+
82
+
83
+ ```scss
84
+
85
+ .label-box__inner{
86
+
87
+ padding: 10px 20px 10px 20px;
88
+
89
+ .input-default{
90
+
91
+ width: 100%;
92
+
93
+ height: 40px;
94
+
95
+ margin: auto;
96
+
97
+ padding: 10px 16px 8px;
98
+
99
+ border-radius:4px;
100
+
101
+ border: 1px solid $light_gray;
102
+
103
+ background: #fff;
104
+
105
+ line-height: 1.5;
106
+
107
+ cursor: pointer;
108
+
109
+ outline-width: 2px;
110
+
111
+ }
112
+
113
+ }
114
+
115
+ ```