I have seen this question asked before, but none of the solutions seem to work for me or are using an "href", not a "link_to" in Rails, like I am.
I am trying to make my entire card clickable, I have done this by wrapping the contents in a "link_to". The problem is that all the text in the card is appearing as links by inheriting the "a" element's properties.
Thanks!
`
<div >
<% @challenges.each do |challenge|%>
<%= link_to(challenge_path(challenge), class: "test") do %>
<div >
<img src= "<%= challenge.poster_url %>", alt="Challenge poster">
<div >
<div>
<h2> <%= challenge.title %> </h2>
<p> <%= challenge.description %> </p>
</div>
<div >
<%= challenge.category %>
</div>
</div>
</div>
<% end %>
<% end %>
</div>
`
I have tried turning setting text-decoration to "none" on the h2 and p elements, turning off inheritance, and setting a tags to inherit all properties of parent to avoid it passing on its own attributes. But none of this has worked, any suggestions are appreciated!
CodePudding user response:
You have to set the styling to "none" on the anchor tag. Here is an example;
.parent {
padding: 20px;
background: #efefef;
/* unset <a> styling */
text-decoration: unset;
color: inherit;
}
<a href="#" >
<span>Text in anchor tag</span>
</a>
<a href="#">
<span>Default Text in anchor tag</span>
</a>
In your case;
.test {
/* ... your other style */
text-decoration: unset;
color: inherit;
}