Ruby on Rails displaying landing page with variations between localhost and HTML file

I've been putting together a landing page for a website project and stumbled upon an amazing template online. After loading everything up and ensuring that the file links were set correctly, I decided to double click on the HTML file within my views folder. To my delight, everything loaded perfectly with all the CSS and JS elements working flawlessly. However, the real issue arises when I start the brick server and try to run it from localhost as the actual landing page - suddenly, everything appears skewed and oddly proportioned.

Most of the files that are being loaded come from external sources rather than locally, except for two files which are referenced directly from my local directory. Below is a snippet of the code extracted directly from my file.

Here is the landing page template I am attempting to implement: .

Below is the code:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<title>Grayscale - Free One Page Theme for Bootstrap 3</title>

<!-- Bootstrap Core CSS -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">

<!-- Fonts -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

<!-- Custom Theme CSS -->
<link href="../../assets/stylesheets/grayscale.css" rel="stylesheet">

</head>

... (omitted for brevity)

<div id="map"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRngKslUGJTlibkQ3FkfTxj3Xss1UlZDA&sensor=false"></script>

<script src="../../assets/javascripts/grayscale.js"></script>

My main concern revolves around what could be going wrong here. Could it be an issue with how Bootstrap is being executed? Are there any conflicting files causing this discrepancy between running it through a server versus just opening the file directly? I'm quite baffled by this situation, but I have a hunch that it might boil down to something relatively simple.

If you require access to the files I'm utilizing, they can be downloaded from the provided link on the Bootstrap site.

javascripthtmlcssruby-on-railstwitter-bootstrap

Answer №1

Insight

The issue arises when you click on the HTML file within your views folder and the landing page loads correctly.

This poses a problem because Rails relies on layouts, unobtrusive CSS, and various other elements to guarantee that your application is highly extensible.

If the standalone view loads without any issues, it suggests that other components of your application may be causing interference, particularly the Layout and external CSS files.

--

Solution

An effective way to troubleshoot this is by disabling the layout for your specific landing action -

#app/controllers/application_controller.rb
Class ApplicationController < ActionController::Base
   layout false, only: :landing
end

This will revoke the layout for your landing page, allowing you to determine if the issues persist. If they do disappear, it would be advisable to restructure your code to align better with the layout specifications.

Referencing this Railscast can provide valuable insights:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Do I have to additionally check the data type using typeof when implementing PropTypes in my code?

I have a custom method called onNotifyChange that is triggered in the onChange event of an input element. This method has been defined with a PropType of func. MyComponent.propTypes = { onNotifyChange: PropTypes.func, } When invoking the onNotifyCha ...

javascriptreactjsreact-proptypes

How to dynamically update form select options using Zend Framework 2 (2.3) and AJAX

I'm facing an issue with concatenating 3 dynamic selects - state, country, city - using an ajax request. It seems more complex without zf2! The function works fine when $idState is manually set within stateCountryCityAction (e.g. $idState = 1;), but d ...

javascriptphpjqueryajaxzend-framework2

When implementing the Slick Carousel with autoplay within an Isotope grid, the height of the image slides may occasionally reduce to 1 pixel when applying filters

I've been struggling with this issue for more than a day now, and despite searching through similar posts and trying their solutions, I still haven't been able to resolve it. Here's an example of the problem: https://jsfiddle.net/Aorus/1c4x ...

jquerycssbootstrap-4jquery-isotopeslick.js

The left margin in Carousel is malfunctioning when it comes to hovering

I would like to achieve an effect where, on hover, my images shift the other images to both the left and right. However, currently when hovered, all the images shift to the right only. The code snippet in question is as follows: .item-img:hover { trans ...

javascripthtmlcssbootstrap-4carousel

Step-by-Step Guide: Customize the Background Color in an Angular 4 Select Dropdown Based on the Selected Option

I'm facing a challenge in setting the background color of a select element based on the color attribute of its currently selected option. I'm using Angular 4 for this task. An example of what I am attempting to accomplish is shown below: <se ...

htmlangular

Styling with CSS to format a table so that each cell occupies one row when viewed on narrower

I've come across some HTML that resembles this structure <html><body><table> <thead><tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr></thead ...

htmlcsshtml-table

Assign the JSON data to a variable before passing it

Consider the following code snippet: yAxis : { title : { text : 'Exchange rate' }, plotLines : [{ value : 0.6738, color : 'green', dashStyle : 'shortdash', width : 2, ...

javascriptjqueryjsonhighcharts

Stop the padding of list items from wrapping when displayed in a horizontal list

My goal is to create a horizontal unordered list (<ul>) with four columns in each row. The number of list items (<li>) may vary and change during runtime. Existing Code and Outcome ul { -webkit-columns: 4; /* Chrome, Safari, Opera */ -m ...

htmlcss

"Create a function that allows for the dynamic addition of elements to a

I want to dynamically add more li elements, similar to the first one, by simply clicking a button. Unfortunately, the example provided on jsfiddle is not functioning as intended. document.onload = init; function init(){ document.getElementById('a ...

javascripthtml

The code is functioning properly, however it is returning the following error: Anticipated either

Can you explain why this code is resulting in an unused expression error? <input style={{margin:'25px 50px 0',textAlign:'center'}} type='text' placeholder='add ToDo' onKeyPress={e =>{(e.key ==='En ...

javascriptreactjs

Encountering issues while attempting to pass a function into axios.then and catch and receiving errors

axios.post('http://localhost:3000/api/v1/login', { email: this.state.email, password: this.state.password }, { headers: { "Access-Control-Allow-Origin": "*", ...

javascriptreactjsaxios

Issues encountered when using v-model with JavaScript functions

Being a newcomer to Vue JS, I have been immersing myself in the official documentation to learn more about it. My current project is a straightforward task management web application. However, I seem to be encountering issues with the v-model directive a ...

javascriptvue.jsvuejs2v-modelvue-sfc

Ensuring that the content fits perfectly inside a div using either Bootstrap or

I am facing an issue with two nested divs. One of them has a button that I want to stick to the bottom of the parent div, while the other contains text or a list of persons. The problem arises when the text is lengthy, causing it to overflow the div. I am ...

javascripthtmlcssvue.jsbootstrap-4

How can I implement a redirect back to the previous query page post-authentication in Next.js 13?

To enhance security, whenever a user tries to access a protected route, I plan to automatically redirect them to the login page. Once they successfully log in, they will be redirected back to the original protected route they were trying to access. When w ...

javascriptreactjstypescriptnext.js

Unnecessary list elements generated by dazzling navbarPage

While developing an app with shiny using navbarPage, I noticed that there are some unwanted li tags in the HTML that are not defined in my code. Could this be a known bug? How can I go about fixing it? <nav class="navbar navbar-default navbar-stati ...

htmlcssshiny

What are some ways to retain data while navigating between different online pages?

Can anyone provide guidance on how to maintain the contents of a shopping cart as I navigate between pages, all without losing the information? Is this achievable using solely JavaScript? ...

javascripthtml

Strip away all HTML attributes within a string

I am in the process of developing an internal tool that allows a designer to input exported svg code into a text area and have the html code displayed in a syntax highlighter () When they paste their code like this <svg xmlns="http://www.w3.org/20 ...

javascriptregexstringvue.js

Checkboxes within div elements are unresponsive to clicks

As a novice, I am facing a simple issue. When I place an input checkbox inside the #container div, it functions correctly. However, when I try to put them within the #container div > #section div, they fail to work. *, html, body { box-sizing: b ...

htmlcss

Using a dynamic image source in an Ionic 3 background

I am using ngFor to display a list of posts, each of which should have a unique background image. The getBackgroundStyle function is responsible for extracting the URL of the image from the post array. <div class="singlePost" *ngFor="let post of da ...

javascriptcssangularionic2ionic3

Leveraging Ajax to enhance the functionality of datatables

I am currently working with a datatable in my project, but I'm facing difficulty in retrieving data from my ajax file to the datatable codes. Below are the snippets of my codes: AJAX <?php function functionClass($id) { // create sql query ...

javascriptajaxdatatable