質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

664閲覧

投稿アプリで画像のみの投稿をするとビューが崩れてしまう

s6quma

総合スコア2

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/02/22 00:25

画像のみの投稿をするとチャットのフォームが崩れてしまいます

  • 数値の投稿

https://gyazo.com/7bd2787f87dbeaf730ac1ac0a8dfed38

  • 数値と画像の投稿

https://gyazo.com/a14df30c63eecc28c90dcd665a342a54

  • 画像のみの投稿

https://gyazo.com/3015bb2ca9358f1c513b5ddd9a6ea80e

試したこととして、modelには:was_attached?の記入

Ruby

1class Message < ApplicationRecord 2 belongs_to :user 3 belongs_to :room 4 has_one_attached :image 5 6 validates :content, presence: true, unless: :was_attached? 7 8 def was_attached? 9 self.image.attached? 10 end 11 12end 13

HTML

1<div class="lower-message"> 2 <div class="message-content"> 3 <!-- 投稿したメッセージ内容を記述する --> 4 <% if message.content %> 5 <%= @room.currency.name %><%= message.content %><br> 6 <div class="lower-sub-message"> 7 <%= "換算額は¥#{(message.content / @room.price * 100).floor}" %><br> 8 <%= "#{@room.number}人で割った1人分の金額は#{@room.currency.name}#{message.content / @room.number}" %><br> 9 <%= "#{@room.number}人で割った1人分の換算額は¥#{(message.content / @room.price * 100 / @room.number).floor}" %> 10 <% end %> 11 </div> 12 </div> 13 <%= image_tag message.image.variant(resize: '300x300'), class: 'message-image' if message.image.attached? %> 14 </div>

<%= image_tag message.image.variant(resize: '300x300'), class: 'message-image' if message.image.attached? %>の部分を他のdivで囲むと良いのかなど考えてみました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

<div class="lower-message"> <div class="message-content"> <!-- 投稿したメッセージ内容を記述する --> <%= "YOU ON ME!" %><br> <% if message.content %> <%= @room.currency.name %><%= message.content.to_s(:delimited) %><br> <div class="lower-sub-message"> <%= "換算額は¥#{(message.content / @room.price * 100).floor.to_s(:delimited)}" %><br> <%= "#{@room.number}人で割った1人分の金額は#{@room.currency.name}#{(message.content / @room.number).to_s(:delimited)}" %><br> <%= "#{@room.number}人で割った1人分の換算額は¥#{(message.content / @room.price * 100 / @room.number).floor.to_s(:delimited)}" %> </div> <% end %> </div> <%= image_tag message.image.variant(resize: '300x300'), class: 'message-image' if message.image.attached? %> </div>

<% end %>タグの位置の変更により解決しました。

<div class="message-content">の閉じdivタグの中(1行前に<% end %>記入していたこと)によりビューが崩れてしまっていました。

投稿2021/02/24 03:31

s6quma

総合スコア2

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問