0

As you can see I am learning Ruby on Rails and when today I got my first page rendered, I see another frame outside my real html content:

enter image description here

In my layout file I have:

<!-- app/views/layouts/application.html.erb -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 2 | Home Page</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <%= csrf_meta_tags %>

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= stylesheet_link_tag 'AdminLTE', 'bootstrap', '_all-skins', 'font-awesome', 'ionicons' %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  <%= javascript_include_tag 'adminlte', 'bootstrap', 'demo' %>
  <%= stylesheet_link_tag :application, "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic" %>

</head>

<body class="hold-transition skin-blue sidebar-mini">
  <div class="wrapper">
    <%= render "layouts/nav" %>
    <%= render "pages/homepage", :layout => true %>
    <%= render "layouts/footer" %>
  </div>
</body>
</html>

layouts/_nav.html.erb:

<header class="main-header">
    ...
</header>
<aside class="main-sidebar">
    ...
</aside>

layouts/_footer.html.erb:

<footer class="main-footer">
    ...
</footer>

_layouts/_homepage.html.erb:

<div class="content-wrapper">
    ...
</div>

In the Chrome I see:

enter image description here

<shadow> points to the real <head> and <body> below, and the inner "scroll panel" points to <div class="wrapper">...</div>, and the outer "scroll panel" points to <html>. so I think it is not nesting.

So I don't see any nesting here. Why?

EDIT:

After I clicked on this <a></a>, the inner panel expands and merges itself with the outer one, how strange... here is the button:

<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
  <span class="sr-only">Toggle navigation</span>
</a>

And after restarting the server all is fine(fine partially, because I still see the space originally situated between two panels, but now only the outer panel is there). What the hell... I see some class/js file is missing here, somehow they cause the weirdness. Btw, the template sample project (AdminLTE) based on which I modify uses Bootstrap and jQuery, and numerous scripts/plugins. So maybe data-toggle here is the key. I will leave the word to someone better at this.

WesternGun
  • 11,303
  • 6
  • 88
  • 157
  • Have you tried inspecting the inner side bar to see which container it belongs to? You might have some fixed height value (or some other CSS applied to the container) that is causing the inner scroll bar to appear. – mhz Dec 03 '17 at 20:13
  • Maybe this can help you reverse engineer your problem:https://stackoverflow.com/questions/9707397/making-a-div-vertically-scrollable-using-css – mhz Dec 03 '17 at 20:15
  • Thanks for the reply of all. I clicked a button in the page and the inner scroll panel merges with the outer one, i.e., the problem disappears. How strange is this.... The button is to shrink/expand the sidebar(` – WesternGun Dec 03 '17 at 21:12
  • Its definitively something with your Bootstrap/jQuery libraries then. I would double check your HTML to make sure you are not nesting repeated elements... – mhz Dec 04 '17 at 15:30
  • That is my first thought, exactly. But I am not seeing anything. Besides, the way rails organize resources is weird.. I have reserched into rails for more then one week, and today, I turned to python+django, and I did the same project within 10 hours, from 0. Django just loads the static files with a path; that is what I want: I can keep the structure of distributed libs; and in this part, I must say rails f**ks as hell to beginners. – WesternGun Dec 04 '17 at 18:36

0 Answers0