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

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

ただいまの
回答率

90.52%

  • Ruby on Rails

    7238questions

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

railsのbootstrap file inputの実装が上手くいかない

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 479

MisakiHaruta

score 2

前提・実現したいこと

ここに質問したいことを詳細に書いてください
(例)railsでbootstrap file inputを適用して、かっこいい感じのファイル入力画面を実装しています。
しかし、実装方法を間違えたのか、ボタンが画像の用に重複してしまい、おかしな挙動になっています。
イメージ説明

発生している問題・エラーメッセージ

エラーメッセーじは出力されていません。

エラーメッセージ

該当のソースコード

<!DOCTYPE html>
<html>
<head>
  <title>Kamailer</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <link href="/assets/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />

  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <!-- canvas-to-blob.min.js is only needed if you wish to resize images before upload.
       This must be loaded before fileinput.min.js -->
  <script src="/assets/plugins/canvas-to-blob.min.js" type="text/javascript"></script>
  <!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview.
       This must be loaded before fileinput.min.js -->
  <script src="/assets/plugins/sortable.min.js" type="text/javascript"></script>
  <!-- purify.min.js is only needed if you wish to purify HTML content in your preview for HTML files.
       This must be loaded before fileinput.min.js -->
  <script src="/assets/plugins/purify.min.js" type="text/javascript"></script>
  <!-- the main fileinput plugin file -->
  <script src="/assets/fileinput.min.js"></script>
  <!-- bootstrap.js below is needed if you wish to zoom and view file content
       in a larger detailed modal dialog -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
  <!-- optionally if you need a theme like font awesome theme you can include
      it as mentioned below -->
  <script src="/assets/locales/fa.js"></script>
  <!-- optionally if you need translation for your language then include
      locale file as mentioned below -->
  <script src="/assets/locales/LANG.js"></script>

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>
<div class="text-center">
  <h1>カメーラー</h1>
</div>
<ul class="nav nav-tabs nav-justified">
  <li><a href="/">メール作成</a></li>
  <li><a href="/mail_history/history_list">メール履歴一覧</a></li>
</ul>

<div class = "mainbody">
  <%= yield %>
</div>

</body>
</html>

試したこと

http://plugins.krajee.com/file-input
このサイトの通り、必要なjsとcssファイルをasset以下にそれぞれ配置し、htmlでjs、css呼び出しを実装。
呼び出しの順番を変えてみたが、上手くいかず。

補足情報(言語/FW/ツール等のバージョンなど)

railsバージョン 4.2.7.1

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • s-show

    2017/04/15 23:20

    掲載されたHTMLソースには、ファイルアップロード部分がありません。`<%= yield %>`で表示させるコンテンツ領域のViewファイルに問題のファイルアップロードのコードがあるかと思いますので、その部分を掲載してください。

    キャンセル

まだ回答がついていません

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

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Ruby on Rails

    7238questions

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