html - 相同的部分在两个相同的应用程序中表现不同

标签 html css ruby-on-rails

在 gems、*.js 和 *.css 文件方面,我有两个相同的应用程序。 编辑 View 在这两种情况下使用相同的 _form 部分。

在这里。

<%= 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 %>

我不明白为什么在第一个应用程序中输入字段呈现在标签字段旁边,但在第二个应用程序中相同的输入字段呈现在标签字段下方?

我没有使用任何 Bootstrap 或类似程序。

这是我的 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 .

我有一个 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",我不知道它是如何添加到那里的。

最佳答案

我在文件夹 config/initializers 下的第二个应用程序中丢失了一个文件。 添加文件 simple_form.rb 后,服务器重新启动,问题就消失了。 非常感谢收到的提示。

关于html - 相同的部分在两个相同的应用程序中表现不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36576528/

相关文章:

html - 将图像放在 div 的右侧,而将其他图像放在中间

html - jQuery UI 弹出窗口自定义和 css 布局

javascript - 推荐一个好的免费和开源 HTML5+JS 游戏框架/引擎?

html - 如何强制 div block 内的 HTML 表格仅扩展到页面底部?

html - CSS 重置会干扰第三方 HTML/CSS 组件

sql - Rails 事件记录查询 : Join on Child Condition to include only matching results

html - 通过单击另一个元素更改元素的样式

ruby-on-rails - 如何在 ActiveAdmin 中添加回应用程序的链接?

ruby-on-rails - Postgresql按不在组中的列排序

css - 如何更好地缩放此图像? ( Bootstrap )