質問編集履歴
4
変換後のソースに変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -14,48 +14,71 @@
|
|
|
14
14
|
|
|
15
15
|
###ソースコード
|
|
16
16
|
_form.html.haml
|
|
17
|
-
```
|
|
17
|
+
```html
|
|
18
|
-
|
|
18
|
+
<div class="full_display_container">
|
|
19
|
-
|
|
19
|
+
<div class="item_form">
|
|
20
|
-
= form_for(@item, html: { multipart: true }) do |f|
|
|
20
|
+
<%= form_for(@item, html: { multipart: true }) do |f| %>
|
|
21
|
-
= render 'shared/error_messages', object: f.object
|
|
21
|
+
<%= render 'shared/error_messages', object: f.object %>
|
|
22
|
-
|
|
22
|
+
<div class="field">
|
|
23
|
-
= f.text_field :title, :placeholder => "タイトル", class: 'form-control'
|
|
23
|
+
<%= f.text_field :title, :placeholder => "タイトル", class: 'form-control' %>
|
|
24
|
-
|
|
24
|
+
<ul id="item-tags"></ul>
|
|
25
|
-
|
|
25
|
+
<div class="item_detail">
|
|
26
|
-
|
|
26
|
+
<div class="left">
|
|
27
|
-
|
|
27
|
+
<div class="col-sm-6">
|
|
28
|
-
= f.text_area :content, :placeholder => "本文をマークダウンで入力してください・・・" ,class: 'form-control'
|
|
28
|
+
<%= f.text_area :content, :placeholder => "本文をマークダウンで入力してください・・・" ,class: 'form-control' %>
|
|
29
|
-
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="right">
|
|
30
|
-
|
|
32
|
+
<div class="col-sm-6">
|
|
33
|
+
<div id="preview">
|
|
31
|
-
|
|
34
|
+
<%= markdown(@item.content) %>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
32
|
-
= f.submit "投稿", class: "btn btn-primary"
|
|
40
|
+
<%= f.submit "投稿", class: "btn btn-primary" %>
|
|
41
|
+
<% end %>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
33
44
|
```
|
|
34
45
|
|
|
35
46
|
items.sass
|
|
36
47
|
``` scss
|
|
37
48
|
// Itemフォーム画面
|
|
38
|
-
.item_form
|
|
49
|
+
.item_form {
|
|
39
|
-
margin: 0 auto
|
|
50
|
+
margin: 0 auto;
|
|
40
|
-
.field
|
|
51
|
+
.field {
|
|
41
|
-
.item_detail
|
|
52
|
+
.item_detail {
|
|
42
53
|
// .form-control
|
|
43
|
-
h1, h2, h3, h4, h5, h6
|
|
54
|
+
h1, h2, h3, h4, h5, h6 {
|
|
44
|
-
border-bottom: 2px solid $list_border_top_color
|
|
55
|
+
border-bottom: 2px solid $list_border_top_color;
|
|
45
|
-
/* 下線
|
|
56
|
+
/* 下線 */
|
|
46
|
-
margin: 50px 0 10px 0
|
|
57
|
+
margin: 50px 0 10px 0;
|
|
58
|
+
}
|
|
47
|
-
.left
|
|
59
|
+
.left {
|
|
48
|
-
.col-sm-6
|
|
60
|
+
.col-sm-6 {
|
|
49
|
-
padding-left: 0
|
|
61
|
+
padding-left: 0;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
50
|
-
.right
|
|
64
|
+
.right {
|
|
51
|
-
.col-sm-6
|
|
65
|
+
.col-sm-6 {
|
|
52
|
-
padding-right: 0
|
|
66
|
+
padding-right: 0;
|
|
53
|
-
height: 70vh
|
|
67
|
+
height: 70vh;
|
|
54
|
-
overflow-y: auto
|
|
68
|
+
overflow-y: auto;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
55
|
-
.col-sm-6
|
|
72
|
+
.col-sm-6 {
|
|
56
|
-
@media (max-width: 767px)
|
|
73
|
+
@media (max-width: 767px) {
|
|
57
|
-
padding-left: 0
|
|
74
|
+
padding-left: 0;
|
|
58
|
-
padding-right: 0
|
|
75
|
+
padding-right: 0;
|
|
76
|
+
}
|
|
59
|
-
#item_content
|
|
77
|
+
#item_content {
|
|
60
|
-
height: 70vh !important
|
|
78
|
+
height: 70vh !important;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
61
84
|
```
|
3
sass部分修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Ruby on Railsでアプリを作成しています。
|
|
3
3
|
タイトル、タグ、入力本文という3つだけ入力するコントロールを配置している画面があるのですが、3つ目の「入力本文」だけ可変にして、画面いっぱいになるまで常に大きくしておきたいです。
|
|
4
4
|
一つのボックスだけ画面の高さ100％にするようなことはできるようになったのですが、上記のやり方が分からず困っております。
|
|
5
|
-
現在は
|
|
5
|
+
現在は70vhを設定することである画面サイズの時は全画面表示できているのですが、画面の高さを大きくしたりすると、下の方の空白が大きくなってしまいます。
|
|
6
6
|
ご存じの方いらっしゃいましたら教えていただけますでしょうか。
|
|
7
7
|
|
|
8
8
|
###画像
|
|
@@ -37,40 +37,25 @@
|
|
|
37
37
|
// Itemフォーム画面
|
|
38
38
|
.item_form
|
|
39
39
|
margin: 0 auto
|
|
40
|
-
height: 100%
|
|
41
|
-
.new_item
|
|
42
|
-
height: 85%
|
|
43
|
-
|
|
40
|
+
.field
|
|
44
|
-
height: 100%
|
|
45
|
-
|
|
41
|
+
.item_detail
|
|
46
|
-
height: 100%
|
|
47
|
-
|
|
42
|
+
// .form-control
|
|
48
|
-
height: 100%
|
|
49
|
-
|
|
43
|
+
h1, h2, h3, h4, h5, h6
|
|
50
|
-
|
|
44
|
+
border-bottom: 2px solid $list_border_top_color
|
|
51
|
-
|
|
45
|
+
/* 下線
|
|
52
|
-
|
|
46
|
+
margin: 50px 0 10px 0
|
|
53
|
-
|
|
47
|
+
.left
|
|
54
|
-
.
|
|
48
|
+
.col-sm-6
|
|
55
49
|
padding-left: 0
|
|
50
|
+
.right
|
|
51
|
+
.col-sm-6
|
|
56
52
|
padding-right: 0
|
|
57
|
-
height:
|
|
53
|
+
height: 70vh
|
|
58
|
-
|
|
54
|
+
overflow-y: auto
|
|
59
|
-
height: 85%
|
|
60
|
-
.left
|
|
61
|
-
height: 100%
|
|
62
|
-
|
|
55
|
+
.col-sm-6
|
|
56
|
+
@media (max-width: 767px)
|
|
63
|
-
|
|
57
|
+
padding-left: 0
|
|
64
|
-
height: 100%
|
|
65
|
-
.right
|
|
66
|
-
.col-sm-6
|
|
67
|
-
|
|
58
|
+
padding-right: 0
|
|
68
|
-
max-height: 72vh
|
|
69
|
-
overflow-y: scroll
|
|
70
|
-
.col-sm-6
|
|
71
|
-
@media (max-width: 767px)
|
|
72
|
-
padding-left: 0
|
|
73
|
-
padding-right: 0
|
|
74
|
-
|
|
59
|
+
#item_content
|
|
75
|
-
|
|
60
|
+
height: 70vh !important
|
|
76
61
|
```
|
2
haml部分修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -23,14 +23,12 @@
|
|
|
23
23
|
= f.text_field :title, :placeholder => "タイトル", class: 'form-control'
|
|
24
24
|
%ul#item-tags
|
|
25
25
|
.item_detail
|
|
26
|
-
.container-fluid
|
|
27
|
-
.row-fluid
|
|
28
|
-
|
|
26
|
+
.left
|
|
29
|
-
|
|
27
|
+
.col-sm-6
|
|
30
|
-
|
|
28
|
+
= f.text_area :content, :placeholder => "本文をマークダウンで入力してください・・・" ,class: 'form-control'
|
|
31
|
-
|
|
29
|
+
.right
|
|
32
|
-
|
|
30
|
+
.col-sm-6
|
|
33
|
-
|
|
31
|
+
#preview= markdown(@item.content)
|
|
34
32
|
= f.submit "投稿", class: "btn btn-primary"
|
|
35
33
|
```
|
|
36
34
|
|
1
scss
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
```
|
|
36
36
|
|
|
37
37
|
items.sass
|
|
38
|
-
```
|
|
38
|
+
``` scss
|
|
39
39
|
// Itemフォーム画面
|
|
40
40
|
.item_form
|
|
41
41
|
margin: 0 auto
|