I am using ember-cli-rails gem. I installed ember-cli-foundation-sass as an addon for ember. Everything works fine but Foundation Js module. I made a layout just for Ember like this:
<!doctype html>
<html dir="ltr" lang="<%= I18n.locale %>">
<head>
<meta charset="UTF-8">
<title>Ember</title>
<%= stylesheet_link_tag 'frontend/frontend' %>
<%= include_ember_script_tags :frontend %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
I tried different settings, but none of them worked. Any help would be appreciated.
I solved the problem. I just forgot to put what it supposed to be put in Brocfile.js
Related
I just started a new rails 7 project with TailwindCSS using the new rails new my-app --css tailwind syntax. Tailwind CSS is working properly. I wanted to add a navbar from tailwind elements, and I followed the steps from https://tailwind-elements.com/quick-start/. The css in the navbar works, but the opening and closing of submenus (which I presume is all run by javascript) does not.
When digging into the details, I am seeing these lines in the rails s logs
Started GET "/TW-ELEMENTS-PATH/dist/js/index.min.js" for 127.0.0.1 at 2023-02-02 09:13:48 -0600
ActionController::RoutingError (No route matches [GET] "/TW-ELEMENTS-PATH/dist/js/index.min.js"):
I did the npm install tw-elements install and the tailwind.config.cs edits, what am I missing? Is there some conflict that with Ruby on Rails that I am not aware of? Do I really need to create a route, or is that a sign that something is not installed correctly?
Here is the application.html.erb where I am inserting my <script> line
<!DOCTYPE html>
<html>
<head>
<title>MyApp</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "tailwind" , "inter-font" , "data-turbo-track" : "reload" %>
<%= stylesheet_link_tag "application" , "data-turbo-track" : "reload" %>
<%= javascript_importmap_tags %>
<!--here is the line I added -->
<script src="./TW-ELEMENTS-PATH/dist/js/index.min.js"></script>
</head>
<body>
<%= render 'layouts/navigation' %>
<main class="container mx-auto mt-28 px-5 flex">
<%= yield %>
</main>
</body>
</html>
I did try the alternate step 4 by putting import 'tw-elements'; in app/javascript/controllers.index.js but nothing is working.
New developper on RoR, I’m using Select2 to display some companies or departments.
Select2 was working fine for some weeks, and now, display is broken on every select2 input.
I used github history to detect why it’s failing now, but no indications of modifications which can explain that.
It's displaying a very small square or nothing. However, selecty2 is working when I click on the small square for exemple.
small square display,
Select2 working but display is broken
I used Github History pomber and inspect all files concerned. Nothing to explain why the display is broken now. Is the a way to detect the cause of the issue ?
I'm using Bootstrap 4 with rails 5.2.1
app/javascript/components/select2.js :
import $ from 'jquery';
import 'select2';
import 'select2/src/scss/core.scss';
import 'select2-bootstrap4-theme/dist/select2-bootstrap4.css';
$('.select2-form').select2({
theme: "bootstrap4"
});
// Requiring CSS! Path is relative to ./node_modules
app/javascript/packs/application.js
import '../components/select2';
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<%= csrf_meta_tags %>
<%= action_cable_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= stylesheet_pack_tag 'application', media: 'all' %>
<%= stylesheet_pack_tag 'application' %>
<!-- bootstrap animation carousel -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- bootstrap animation carousel -->
<!-- Select2 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<!-- Select2 -->
</head>
<body>
<%= render 'shared/navbar' %>
<%= render 'shared/flashes' %>
<%= yield %>
<%= render 'shared/footer' %>
<%= javascript_include_tag 'application' %>
<%= javascript_pack_tag 'application' %>
<%#= javascript_pack_tag "map" %>
</body>
</html>
I expect the input should be display correctly.
If it used to work, and now it doesn't, you can git bisect to determine which commit introduced the regression. When that is done, you should be able to pinpoint the guilty piece of code, again by adding the changes in this commit one by one and see when the regression pops up. Then you might be able to understand the reason for the regression.
I found a layout at https://github.com/evenwu/pinterest-clone-layout that I would like to try. However, I have no idea how to integrate this with my existing rails project. My current layout looks like this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"/>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
How do I use the layout from the github link?
Add gem 'haml' to your Gemfile and run bundle install.
Copy layout and stylesheets, etc. to your project.
Remember to remove your .erb layout; Rails gives .erb precedence over .haml by default.
I'm attempting to keep the application layout in my Rails 3 app for the stylesheets and javascript files I use most frequently (application.js, jquery, style, etc.). However there are plugins I'm using on certain pages and want to include those stylesheets/javascripts properly. For example, I'm looking to use slides only on my homepage. If my application layout is like the one below, what's the best way to include page-specific files?
<!doctype html>
<head>
<title>Title</title>
<link rel="stylesheet" href="http://localhost:3000/stylesheets/style.css" media="screen and (min-width:481px)">
<!--[if IE]>
<link rel="stylesheet" href="http://localhost:3000/stylesheets/style.css" media="all"><![endif]-->
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tag %>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="user-scalable=no,width=device-width">
</head>
<body>
<%= render 'layouts/header' %>
<%= yield %>
<%= render 'layouts/footer' %>
</body>
</html>
the system-created page http://localhost:3000/pages/home shows up fine. but when i change the content of the file home.html.erb and reload the page in the browser and view the source code, i see the content from my home.html.erb file gets added under the automatically created content. so basically there are two pages in the source code. anyone knows what causes that?
my application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>SampleApp</title>
<%= stylesheet_link_tag :all %>
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tag %>
</head>
<body>
<%= yield %>
</body>
</html>
my home.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Ruby on Rails Tutorial Sample App | Home</title>
</head>
<body>
<h1>Sample App</h1>
...
</body>
</html>
Your application.html.erb is fine, but home.html.erb is used to include only what's inside <body> tag. So, in your case it must contain only the
<h1>Sample App</h1>
...
part.