0
私は宝石、* .js、* .cssファイルの点で2つの同一のアプリケーションを持っています。 編集ビューは、どちらの場合も同じ_form部分を使用します。2つの同じアプリケーションで同じ部分的な動作が異なります
ここにあります。
<%= simple_form_for @assessment do |f| %>
<% if @assessment.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(@assessment.errors.count, "error") %> prohibited this assessment from being saved:</h2>
<ul>
<% @assessment.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<table>
<tbody>
<tr>
<td>
<%= f.input :question, label: 'Question' %>
</td>
</tr>
<tr>
<td>
<%= f.input :answer, label: 'Answer' %>
</td>
</tr>
</tbody>
</table>
<div class="actions">
<%= f.submit 'Save'%>
<%= f.button :button, 'Reset', :type => 'reset', :class => 'btn' %>
</div>
<% end %>
最初のアプリに入力フィールドがラベルフィールドの隣にレンダリングされるが、2番目のアプリで同じ入力フィールドをラベルフィールドの下にレンダリングされる理由を私は理解できないのですか？
私はブートストラップなどを使用していません。ここで
は、両方のアプリケーションのための私のapplication.jsファイル、次のとおりです。
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
私は両方のアプリケーションのための同じ1つのCSS/SCSSファイル、scaffolds.scssを、持っている、ここにある：
body {
background-color: #fff;
color: #333;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 13px;
line-height: 18px;
}
p, ol, ul, td {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 13px;
line-height: 18px;
}
pre {
background-color: #eee;
padding: 10px;
font-size: 11px;
}
a {
color: #000;
&:visited {
color: #666;
}
&:hover {
color: #fff;
background-color: #000;
}
}
div {
&.field, &.actions {
margin-bottom: 10px;
}
}
#notice {
color: green;
}
.field_with_errors {
padding: 2px;
background-color: red;
display: table;
}
#error_explanation {
width: 450px;
border: 2px solid red;
padding: 7px;
padding-bottom: 0;
margin-bottom: 20px;
background-color: #f0f0f0;
h2 {
text-align: left;
font-weight: bold;
padding: 5px 5px 5px 15px;
font-size: 12px;
margin: -7px;
margin-bottom: 0px;
background-color: #c00;
color: #fff;
}
ul li {
font-size: 12px;
list-style: square;
}
}
ファイルapplication.html.erbは、両方のアプリで同じです（titleを除く）。
<!DOCTYPE html>
<html>
<head>
<title>LeviTest02</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
</head>
<body>
<%= yield %>
</body>
</html>
ここには何が欠けていますか？
レンダリングされたページを調べると、どちらの場合でもHTMLが同じではないことがわかりました。ここ は、次のラベルに正しく入力フィールドをレンダリングしているアプリ1でHTMLです：
：<input class="string optional" type="text" value="Yes" name="assessment[answer]" id="assessment_answer">
そしてここでは、入力フィールドがラベルの下にレンダリングされるアプリ2のHTMLコードの同じ行であります
<input class="string optional" maxlength="255" size="255" type="text" value="Yes" name="assessment[answer]" id="assessment_answer">
補足パラメータ私はそれがそこに追加されるか見当もつかないmaxlength="255"としてこのライン。
同じブラウザのバージョンを含むすべてが同じですか？私は要素を調べ、コンソール内のcssクラスを調べます。 –
はい、Safariブラウザを使用して両方のアプリを実行しています。 –
Google Chromeブラウザで両方のアプリケーションを実行すると、同じ奇妙な動作が起こります。 –