Attaching the CSS file to the Haml layout template

I'm currently working on linking a css file to a haml layout template

Within the ApplicationHelper class, I have a method to properly generate html

module ApplicationHelper

  def styletag(sheet_name)
    "<link rel='stylesheet' href='/assets/stylesheets/#{sheet_name}.css'>"
  end

end

Additionally, I'm trying to link it to the layout template

!!! 5
%html
  %head
    %title Rotten Potatoes!
    = stylesheet_link_tag 'application'
    = styletag 'default'
    = javascript_include_tag 'application'
    = csrf_meta_tags
  %body
    = yield

However, it appears that haml is not recognizing it as a tag and is displaying it as text.

htmlcssruby-on-railshaml

Answer №1

To prevent Rails from escaping the HTML in your text, be sure to include html_safe. By adding this, you are informing Rails not to escape the HTML.

For more information, please visit and select "Show Source". If you modify it to look like this:

def styletag(sheet_name)
    "<link rel='stylesheet' href='/assets/stylesheets/#{sheet_name}.css'>".html_safe
end

This should resolve the issue for you.

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

Centering text using CSS Bootstrap

Hey everyone, I've been attempting to center my text using Bootstrap, but for some reason it's not working. Can someone help me figure out what's going on? <footer class="row p-1 mt-3 bg-primary text-white"> <p class= ...

htmlcssbootstrap-4

Javascript continues to execute even after the designated element has been eliminated or substituted

I'm currently working on a WordPress auction site using WooCommerce that needs a countdown timer to display when a specific product auction is ending. Below is the JavaScript code for the countdown timer: const getElem = elem => document.q ...

javascriptphphtmljqueryajax

Using conditional statements in AngularJS, you can check multiple conditions using the

I am attempting to utilize angular in my slim file, but I'm uncertain how to convert an if else block into angular syntax. Although I am aware that angular does not support ng if else statements, is there a method to modify the code below to work with ...

ruby-on-railsangularjsslim-lang

CodeIgniter - Utilizing quotes within a form

Consider a scenario where the database has a field named NAME which contains text with both single and double quotes: TEST1 "TEST2" 'TEST3' Now, if you want to edit this value using the following code in a form: <label for="name">Ful ...

phphtmlformscodeigniter

Using z-index to overlay a background image with transparency

I'm attempting to make a partially transparent div with text on top. My approach involves creating a parent tag with relative positioning. I have one child span with transparency set using the class .body-content-background and another child containi ...

htmlz-index

Storing and accessing nested JSONB data in PostgreSQL within a Rails form

Upon realizing the lack of information on utilizing rails forms to store and retrieve JSON data, I encountered a specific issue: Within my form, I am creating a nested structure in JSON: = form_for(@car) do |cf| = cf.fields_for :locations do | locati ...

ruby-on-railsjsonformspostgresqljsonb

Issue with parameter functionality not working as expected

This code snippet is not functioning as expected. I am trying to extract and print the values from the URL parameter file:///C:/Users/laddi/Desktop/new%201.html?t=vindu&b=thind function GetURLParameterValue(param) { var pageURL = window. ...

javascripthtmlparameters

How can I ensure that an absolutely positioned element [created with React] snaps to the edge of its parent div when the page loads

I am currently developing a unique two-thumb slider bar component using React. Each thumb in the slider snaps to the closest discrete tick so that users can easily select values along a number line visually. One challenge I'm facing is that the thumbs ...

htmlcssreactjs

Minimize the gaps between items within a CSS grid design

I'm struggling with adjusting the whitespace between 'Job Role' and 'Company Name' in my grid layout. Here's a snippet of what I have: https://i.sstatic.net/l55oW.png The container css is set up like this: .experience-child ...

htmlcsscss-grid

When reducing the page size, the Bootstrap columns are colliding with

While resizing the screen, I noticed that these images are overlapping each other. I haven't made any changes to the css for container-fluid or row. <div class="container-fluid bg-grey"> <div class="row center"> <div class= ...

htmlcsstwitter-bootstrap

Top solution for maintaining smooth navigation across web pages

As I dive into the world of web development, I find myself intrigued by the idea of reusing navigation and banners across multiple web pages. However, despite my research efforts, I have yet to come across a definitive answer. My objective is simple: The ...

phpjavascripthtmlasp.netcss

Slippery carousel: Showcase all items in center alignment mode

Currently, I am implementing Slick Carousel with centerMode. Is there a method to ensure that all items are displayed without being cut off on the screen? The setup I have is quite simple: $('.your-class').slick({ centerMode: true, slidesTo ...

jquerycssslick.js

Problem with special characters in Localstorage for Internet Explorer 8

After developing a jQuery script that retrieves data from a service, stores it in local storage, and displays it on the page upon a specific event, I encountered an issue with displaying Chinese characters only on IE8+ browser. Unfortunately, IE is unabl ...

jqueryhtmlcharacter-encodinginternet-explorer-8

Bootstrap is designed to dynamically adjust to the size of the browser window, ensuring a smooth

After completing the construction of a new website, I encountered an issue where the styles and layouts are responsive when adjusting the browser window size. However, upon opening responsive inspect tool, no changes occur - columns refuse to break and t ...

htmlcsstwitter-bootstrapresponsive-design

When clicked, the DIV expands to fit the size of the window

Is there a way to use jQuery to expand a div to full screen when clicked, and change the content or layout of the div? I have a small div on my webpage with text or images inside, and I want it to enlarge when clicked so it fills the entire window with m ...

jqueryhtmljquery-uicss

setting the child div's margin in relation to its parent div

Here is my HTML: <div class='mainDiv'> <div class='subDiv'></div> </div> This is the corresponding CSS code: .mainDiv { margin-top: 200px; width: 700px; height: 800px; background-color: red ...

htmlcssmargin

Rowing and Columning with Bootstrap

Hey there! I'm currently working on creating some stylish boxes to showcase text and possibly an image background. However, I'm encountering an issue where the boxes are not aligning correctly on smaller screens. https://i.sstatic.net/JoYtj.jpg ...

htmlcss

Bootstrap relies on jQuery for its JavaScript functionality, so jQuery must be loaded before using Bootstrap's JavaScript

I encountered an issue while trying to load the Bootstrap library, consistently receiving this error message: Uncaught Error: Bootstrap's JavaScript requires jQuery Even though I have ensured that jQuery is loaded before attaching the Bootstrap li ...

javascriptjqueryhtmltwitter-bootstrap

Utilizing PHP to create a form via email

I have created this form and I would like to know if it is secure enough. I attempted multiple times to implement a captcha system, but unfortunately, it did not work for me. As I am still a student, please refrain from sending overly complex solutions. Q ...

phphtmlforms

Triggering a JavaScript event with every update to the DOM marked as "completed"

I've been having some trouble with a specific task. I'm working on a script where I need to execute some functions after DOM manipulation is complete. The challenge is that I can't make changes to any other scripts on the page, as they might ...

javascriptjqueryhtmlajaxdom