Having trouble enclosing a div within anchor tags in a Rails project

I am facing an issue in my rails app where I have a view containing a div with various content, including links. My goal is to make the entire div clickable.

Here is a snippet of code from my view.html.erb file:

<a href="/google">
  <div class="container">
    content with other anchor tags
  </div>
</a>

However, when rendered, it appears like this:

<a href="/google"></a>
<div class="container">
  <a href="/google"></a>
  content with other anchor tags
</div>

Does anyone have any suggestions on how to resolve this?

htmlcssruby-on-rails

Answer №1

To properly format your code, make sure to enclose it within a block:

<%= link_to "/google" do %>
  <div class="container">
    content
  </div>
<% end %>

When executed, this code snippet will generate the following HTML structure:

<a href="/google">
  <div class="container">
    Content
  </div>
</a>

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

jQuery technique for loading images

Here is the issue at hand: I am attempting to utilize jQuery to accelerate image loading on my webpage. To achieve this, I have a code snippet specifying an initial image that should be replaced with another image once the page has finished loading. < ...

javascriptjqueryhtml

Error encountered when attempting to trigger a Bootstrap dropdown within a designated div

When using React JS, I encountered an issue when trying to trigger a dropdown that was nested inside a div with the class name "row". Initially, I placed the data-toggle and data-target attributes inside the div, like so: <div className="row"> < ...

javascripthtmlcssreactjsbootstrap-4

Adjust the color of the border surrounding the icon within a button

Is there a way to customize the color border of an SVG icon within a button to match the text of the button? My code snippet can be found on JSFiddle, along with my usage of Bootstrap: JSFiddle @import 'https://maxcdn.bootstrapcdn.com/bootstrap/4 ...

htmlcssbuttonsvgbootstrap-4

Steps for setting all textareas on a website to "readonly" mode

My website contains numerous textareas but they currently do not have the read-only attribute. It would be very time-consuming to manually add the readonly attribute to each one. Is there a more efficient method to make all textareas read-only? ...

javascripthtmlcss

If the td element contains text, add a comma (,) and wrap the text in HTML tags. If there

Currently diving into some jQuery code and have come across a few uncertainties. Here is what I've managed to put together so far: var html = ''; data.entities.forEach(function (value, index, array) { html += index !== data.entities.len ...

javascriptjqueryhtml

Invert the motion within a photo carousel

Is there anyone who can assist me with creating a unique photo slider using HTML, CSS, and JS? Currently, it includes various elements such as navigation arrows, dots, and an autoplay function. The timer is reset whenever the arrows or dots are clicked. Ev ...

javascripthtmlcss

Identify and target a particular DIV based on the URL for customization

My webpage has a collection of frequently asked questions (FAQs) on a page called faq.html. Here is an example structure: <div id="faq1">...</div> <div id="faq2">...</div> I am looking to create a pulsating or highlighting effect ...

jqueryhtmlcss

How to customize the hover and active properties of a checked checkbox in Vue 3 using Tailwind CSS and PUG?

It seems that checkboxes have a level of sophistication that I never anticipated, or perhaps my brain just can't quite grasp the nuances of checkboxes. After spending a significant amount of time researching and experimenting with checkboxes in a Vue ...

cssvue.jscheckboxpugtailwind-css

<div><!-- including: unknown --></div>

Need some assistance with this issue. The ng-include path I am using is "http://localhost:8080/coffeeprojects/calc.html". I tested the path and it seems to be working. However, despite organizing the files and improving the path as suggested in some resp ...

javascriptjqueryhtmlangularjscoffeescript

The content has spilled over from the div and leaked into the adjacent div

When the left div's content exceeds the right div's, it spills over into the next container div. Sample HTML: <div class="musictemplate_container"> <div class="musictemplate_left"> something<br> omething< ...

htmlcss

Having trouble retrieving the content of this.text from the html template

I am attempting to include two buttons that should only be visible if there is text in the input field, otherwise they should remain hidden or disabled by default. However, I am encountering an error. <div class="card card-body"> `<form>` ...

htmlangularbootstrap-4

Deactivate event handling for viewport widths below a specified threshold

Currently, I am attempting to deactivate a script when the width of the window falls below 700px. Despite reviewing suggestions from various sources, I have not been successful so far. window.onresize = function () { if(window.innerWidth < 700) { ...

javascriptjquerycssevent-handling

Styling certain UL and LI elements with CSS properties

Greetings everyone! I constantly struggle when it comes to making my CSS cooperate. I have some code that involves using ul and li tags. However, I only want to apply that styling to specific sections of my HTML code rather than all instances of the ul and ...

htmlcsscss-selectors

What is the best way to center align my button using CSS?

I'm struggling with aligning this button in CSS to the center: .btn { background-color: #44c767; -moz-border-radius: 28px; -webkit-border-radius: 28px; border-radius: 28px; border: 1px solid #18ab29; display: inline-block; cursor: poi ...

css

Tips for organizing checkboxes in rows horizontally

My question is related to this issue I am trying to arrange my checkboxes in 4 columns horizontally <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> ...

javascripthtmlcssbootstrap-5

Select option at the top of the Bootstrap dropdown

I recently implemented Bootstrap on my website. I encountered an issue with a form in the footer section where the select options are extending out of the page boundaries. <footer> <form role="form" method="GET"> <div s ...

csstwitter-bootstrap

What safety measures should be implemented when granting users permission to modify HTML and CSS on your site?

I'm really impressed by the customization options on Tumblr. Users can edit the HTML and CSS of their profiles, which is something I'd love to incorporate into my own site. However, I'm concerned about the security implications of allowing t ...

htmlcsscustomizationsecurity

Cordova encountered an error: Execution of inline script was denied due to violation of Content Security Policy directive

As I delve into the world of Cordova and jquery mobile, I encountered a perplexing error that reads: Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self' data: gap: 'un ...

javascriptjqueryhtmlnode.jscordova

How can I change the color of a designated column in a Google stacked bar chart by clicking a button?

I am in the process of creating a website that compares incoming students at my university across different academic years. We have successfully implemented a pie chart to display data for the selected year. Now, we aim to include a stacked bar chart next ...

javascripthtmlchartsgoogle-visualization

Prevent the bootstrap header in a table from scrolling by enclosing it in

I am encountering an issue with fixing the headers of multiple tables in a page within their dedicated divs. Despite trying various methods, I haven't been successful as the fixed header overflows the div. I want to confine it within the div. Additio ...

jqueryhtmlcsshtml-tablebootstrap-4