OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Rails 7 with turbo

  • Thread starter Thread starter Dev
  • Start date Start date
D

Dev

Guest
I have a rails 7 app and this is my package.json file:

Code:
 {
  "name": "app",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.5.2",
    "@hotwired/stimulus": "^3.2.2",
    "@hotwired/turbo-rails": "^8.0.4",
    "@popperjs/core": "^2.11.8",
    "@rails/ujs": "^7.1.3-4",
    "autoprefixer": "^10.4.19",
    "bootstrap": "^5.3.3",
    "bootstrap-icons": "^1.11.3",
    "esbuild": "^0.21.5",
    "jquery": "^3.7.1",
    "nodemon": "^3.1.3",
    "postcss": "^8.4.38",
    "postcss-cli": "^11.0.0",
    "sass": "^1.77.5"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets",
    "build:css:compile": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
    "build:css:prefix": "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css",
    "build:css": "yarn build:css:compile && yarn build:css:prefix",
    "watch:css": "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\""
  },
  "browserslist": [
    "defaults"
  ]
}

application.html.erb

Code:
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>

when I click on:

Code:
 <%= button_to new_user_registration_path, method: :get, class: 'btn btn-primary' do %>
        <i class="fa-solid fa-user-plus"></i> Register today!
      <% end %>

Everything works fine when I click the button mentioned above. However, when I navigate back to the previous page using the browser's back button, the page scrolls from the top to the position I was previously on that page.

I would like to have the normal behavior without the scrolling part. Specifically, I want to click the browser's back button and return to the position I was on that page without the scrolling.

Is this scrolling behavior normal with Turbo? If so, how can I disable it? I find it quite inconvenient.

<p>I have a rails 7 app and this is my package.json file:</p>
<pre><code> {
"name": "app",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-free": "^6.5.2",
"@hotwired/stimulus": "^3.2.2",
"@hotwired/turbo-rails": "^8.0.4",
"@popperjs/core": "^2.11.8",
"@rails/ujs": "^7.1.3-4",
"autoprefixer": "^10.4.19",
"bootstrap": "^5.3.3",
"bootstrap-icons": "^1.11.3",
"esbuild": "^0.21.5",
"jquery": "^3.7.1",
"nodemon": "^3.1.3",
"postcss": "^8.4.38",
"postcss-cli": "^11.0.0",
"sass": "^1.77.5"
},
"scripts": {
"build": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets",
"build:css:compile": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
"build:css:prefix": "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css",
"build:css": "yarn build:css:compile && yarn build:css:prefix",
"watch:css": "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\""
},
"browserslist": [
"defaults"
]
}
</code></pre>
<p>application.html.erb</p>
<pre><code><%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
</code></pre>
<p>when I click on:</p>
<pre><code> <%= button_to new_user_registration_path, method: :get, class: 'btn btn-primary' do %>
<i class="fa-solid fa-user-plus"></i> Register today!
<% end %>
</code></pre>
<p>Everything works fine when I click the button mentioned above. However, when I navigate back to the previous page using the browser's back button, the page scrolls from the top to the position I was previously on that page.</p>
<p>I would like to have the normal behavior without the scrolling part. Specifically, I want to click the browser's back button and return to the position I was on that page without the scrolling.</p>
<p>Is this scrolling behavior normal with Turbo? If so, how can I disable it? I find it quite inconvenient.</p>
 
Top