I'm having trouble with HAML nesting a link within another link. The indentation is completely correct in the HAML, but the HTML is being output very wrong.
The original HAML code:
.item
=link_to page_path do
.item-info
%h3 Item name
=link_to 'Link', different_page_path
When I view the HTML in Chrome's inspect element, this is what I get:
<div class="item-info">
<a href="/page">
<h3>Item name</h3>
</a>
Link
</div>
But when I view the source, it show's up correctly, but is still messed up when viewing the page:
<a href="/page">
<div class='item-info'>
<h3>Item name</h3>
Link
</div>
</a>
I'm at a loss and any help would be great. Thanks.
If you really want a link within a link you could use haml directly instead of the rails (or what framework you are using) method link_to:
.item
%a{ :href => '/page' }
.item-info
%h3 Item name
%a{ :href => '/different_page' } Link
link_to is helping you to do the right thing visavi the browser as discussed above. It may be good to realize that this is not a haml issue but rather the link_to implementation.
UPDATE: clarification - it will still not be rendered nicely by the browser but the markup produced will be as asked for.
Related
I'm generating a hypertext link to an individual article via ERB with the link_to helper method, yet when the link is displayed in the view it renders as an HREF clickable link, but it's not clickable (arrow doesn't even turn to a pointer)
I've tried manipulating the link_to helper and specifically the article_path(:id), but the href path in the dev tools is rendering the correct path with the code below.
I've also double checked my routes, as well as permitted params.
<% #articles.reverse.each do |article| %>
<div class="article_card">
<div>
<%= markdown(article.text[0..405]<<"...") %>
</div>
</div>
# This is the link that isn't clickable
<%= link_to 'Show full article', article_path(article) %>
<% end%>
and this is what it renders in dev tools:
Show full article
I expect the rendered href to be clickable and GET the articles/:id
inspect the element using the browser's dev tools, maybe you have some invisible element above the A tag, maybe you have some javascript messing things up, the generated html looks fine, I don't think it's a rails issue
EDIT: check J.R. Bob Dodds answer below
Credit goes to #arieljuod
The issue was a CSS issue.
Inspecting the A element in dev tools resulted in the dev tools focusing on the HTML element, not the A element.
Looking at the CSS rules for a div element that was an ancestor of the A tag, I noticed a z-index of -2 and vaguely recalled z-index influencing the clickability of its descendant tags.
I was able to set The z-index to 0, then add a positive z-index to a different element entirely, and regained the functionality of the link.
I am working with Semantic UI in a rails project and wanted to create a dropdown menu with items that would link to other view pages. Most of the problems i've seen with the dropdown stemmed from users not initializing the dropdown menu which I was able to do.
Here's my code:
<div class="ui floating dropdown button">
Course<i class="dropdown icon"></i>
<div class="menu">
<% #topics.each { |topic| %>
<a class="item" href="articles/<%= topic.id %>">
<span class="text"> <%= topic.name %></span>
</a>
<% } %>
</div>
</div>
Different things i've tried:
Creating a separate hardcoded links / a tags like <a href="articles/4"> outside of the dropdown menu. This creates a working link and directs me to the article show view page with the id of 4.
Changed the wrapping 's class as "ui floating dropdown item" as well
I've also looked up other users' posts that shows they have the same exact problem. But when i try their solution, my dropdown menu items still do not work and i'm not sure what i'm doing wrong. Here are their posts:
https://github.com/Semantic-Org/Semantic-UI/issues/3234
https://github.com/Semantic-Org/Semantic-UI/issues/453
The two most important things seem to be:
Not putting the dropdown class definition as part of an anchor tag (inserting an anchor tag inside an anchor tag in the dropdown menu)
Not surrounding each anchor tags with their own <div class="items"> tags but to integrate them into one line like <a class="item" href="#"> # </a>
Can anyone help me understand what i might be overlooking? Let me know if i left out any critical information, would love to update the post with the relevant data right away, thank you!
After doing more and more research, I came to the conclusion that the links were not working in my semantic-ui dropdown menu because of some code, most likely Javascript, that i had inserted before.
Of course, i ruled this way out of the realm of possibility because there was no way i would forget about such code but i decided to go through all of my .js files just in case.
Lo and behold, i had a jQuery selector return false when a .item was being clicked...
I felt really silly and i didnt want to believe it at first but if you're having this problem and you've checked everything else like i have, it's probably your javascript!
I have problem with Ruby on rails link effects.
My current code is:
<header class="navbar navbarfixed navbar-default navstyle>
<%= link_to "Cocktails",root_path, class:"btn btn-lg", id: "logo" %>
<nav class="cl-effect-5 container">
<span data-hover="new">new</span>
<span data-hover="test">test</span>
<span data-hover="test">test</span>
</nav>
</header>
So i need to convert the current html link style to ruby, so the effect is still there(cl-effect-5). I tried using this solution, but i get syntax error for some reason, even though i double checked everything...
One difference I noted with your code and the linked solution is that you have the hovers in the <span> versus in the <a> tag.
= link_to '#', data: { hover: 'test' } do
'Test'
I think that's what you may be looking for (not that the span is wrong per se). Also, make sure your application.css and application.js manifests are including bootstrap (or whatever front end UI kit you're using)!
Rails noob here. I'm attempting to create create single-page scrolling site similar to this ...but, you know, not nearly as attractive :-)
Anyway, I've got my javascript working however I've developed much of the content (contact form, about us page etc etc) in different views which are hanging out in various html.erb files. Rather than cut and paste the contents of each into a single home.html.erb, I was wondering if there was a clean way to just embed the content from each view into my homepage view. Something like this:
<h1>My awesome homepage!</h1>
<div>
<div id="about">
<%= put_page_here page=about_us %>
</div>
<div id="our_product">
<%= put_page_here page=about_us %>
</div>
<div id="contact">
<%= put_page_here page=contact %>
</div>
</div>
If you would recommend going about this entirely differently, please let me know.
Many thanks in advance!
This should work:
<%= render partial:"shared/contact_us", locals:{variable:value} %>
Note that it will look for a view in app/views/shared/_contact_us.html.erb - notice the _ before the view. Pass the variables the view needs in through locals. More information on passing variables around here.
Rails 2.3.5 (Running in Development Mode on localhost)
I haven't been able to find an answer for this. In IE8 and FF, the alts (tooltips) do not appear on mouseover. Yet for some reason in IE7 they do. I'd guess this is some basic knowledge I'm missing or there's something in my stylesheets that's killing the tooltips in IE7/IE8? I'm not using a tooltip script or plugin.
The two main ways I'm using image_tags:
<%= image_tag("show_group.png", :size => "64x64", :alt => "Show Group") %>
<%=link_to image_tag ("menu_icon_make_new_item.png", :size => "38x27", :alt =>
"Make new item", :id => 'item_select_menu', :class => 'nothing2'), {},
:onclick =>'dialog_back_to_new_item_select_menu(); return false' %>
Although I'm pretty sure it's not a Rails thing because even this hand coded img tag doesn't show it's alt on hover in IE8/FF (but does show it in IE7).
<span id="show_user_panel_arrow"><img src="\images\user_panel_expand.png"
alt="show bulk user panel" id="user_panel_arrow" /></span>
Thanks!
alt is the wrong attribute for tooltips. Old versions of IE improperly used the alt attribute for mouseover titles. alt is the alternative text that gets displayed if the image does not come up.
Use the title attribute.
example:
<img src="mypic.jpg" alt="Description" title="This shows up on mouseover" />
Use title option to display text in rails 3.
<%= image_tag 'show_group.png',:title => 'show_group' %>
When mouse hover over the show_group.png , it will show the text "show_group".
This "feature" was removed in IE8 and other browsers never had it. The alt attribute is for text to display instead of the image and wasn't intended as additional information. That is what the title attribute is for.