0
マテリアライズCSSのアイコンを表に使用すると非常に奇妙な問題が発生します。彼らは正しく整列していないようです。RailsとMaterialize CSSアイコンの配置が奇妙になる
スクリーンショット：（。すべての個人情報は、ぼかし）
ここでは私のスリムテンプレートです：ここでは
.container
h1
| View Users
= form_for :user, url: "/users" do |f|
table
tr
th width="30px" ID
th width="80px" User ID
th Email Address
th First Name
th Last Name
th Type
th Notes
th width="20px" class="material-icons" delete
th width="20px" class="material-icons" mode-edit
- @users.each do |i|
tr
td = i.id
td = i.uid
td = i.email
td = i.first_name
td = i.last_name
td = i.user_type
td = i.notes
td = link_to 'delete', user_path(i), method: :delete, data: { confirm: 'Are you sure?' }, :class => "material-icons", :style => 'color: black'
td = link_to 'mode-edit', [:edit, i], :class => "material-icons", :style => 'color: black'
br
tr
td
input type="text" value="ID" readonly="readonly"
td
== f.text_field :uid, :id => "uid", :placeholder => "User ID"
td
== f.text_field :email, :placeholder => "Email Address"
td
== f.text_field :first_name, :id => "fname", :placeholder => "First Name"
td
== f.text_field :last_name, :placeholder => "Last Name"
td
== f.text_field :user_type, :placeholder => "Type"
td
== f.text_field :notes, :placeholder => "Notes"
.row
.actions
.col.s2
a class="waves-effect waves-light btn"
== f.submit "Add"
.col.s7
span
.col.s3 align="right"
a class="waves-effect waves-light btn" href="https://stackoverflow.com/users/new" Open Form
は私application.html.erbです：
<!DOCTYPE html>
<html>
<head>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body>
<%= yield %>
</body>
</html>
助けてください私はこの非常に奇妙な問題を解決します。
入力がある行は、前の行よりも 'td'が少ないようです。そこに空の 'td'を2つ追加できますか？ –
@MuradYusufov私はそれを少し実験しましたが、問題はまだあります。それを今試みている。 –
@MuradYusufov絶対に何もしなかった –