Search field and box in Nav bar using zurb has black background - ruby-on-rails

I ran into a weird bug with my ruby on rails app where I want to display the search field and button in the navbar but the view looks like this image
The problem is that it has black in the background for just the search box and button.
The following code is below:
<section class="top-bar-section">
<ul class="left">
<%= form_tag('/search') do %>
<li>
<%= text_field_tag :query, nil ,:placeholder => "Search for designs", :id=>"nav_search_box" %>
</li>
<li>
<%= submit_tag 'Search', :class=>"round button", :id=>"nav_search_btn" %>
</li>
<% end %>
</ul>
</section>
Any insight on fixing this bug would be much appreciated!

This is explained in the official docs, under other elements.
http://foundation.zurb.com/docs/components/top-bar.html
"can use a small Foundation button in the nav, just include has-form as a class for its parent li."

Related

link_to rails_blob_path when clicked does not match the same image of image_tag inside the swiper slide div

In my view when i click the link_to (the slides i see side by side), does not match the slide. I am using active storage each home has many attached home_photos. This is ok. But my issue is i don't know how to implement this on my swiper slider. My images are showing on my slide side by side perfectly, but when i click a slide, it's supposed to pop-out, and it does, but it only shows one image, the first one from home_photos[0]. Please help.
<div class="swiper-wrapper">
<!-- Slides-->
<% #home.home_photos.each do |photo| %>
<div class="swiper-slide">
<%= link_to rails_blob_path(#home.home_photos[0]), "data-toggle" => "gallery-top" do %>
<%= image_tag photo, class: 'img-fluid' %>
<% end %>
</div>
<% end %>
</div>
<div class="swiper-pagination swiper-pagination-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
I think you have to change #home.home_photos[0] to photo in link_to:
<%= link_to rails_blob_path(photo), "data-toggle" => "gallery-top" do %>

Why does my link break (stop navigating to its location) when I use data-toggle attribute?

I am having a play around with Bootstrap 4 in Rails 5 and I am trying to get a data-toggle to work on nav-pills.
With my code below, the pill toggle works and it breaks the link_to part of the code and the link doesn't work.
<div class="card">
<div class="card-block">
<ul class="nav nav-pills nav-justified" role="tablist">
<%= link_to 'All Things', all_things_path, class: 'nav-link nav-item active' %>
<%= link_to 'Some Things', some_things_path(#things[0]), class: 'nav-link nav-item', "data-toggle" => "pill" %>
</ul>
</div>
</div>
If I remove the "data-toggle" => "pill" the link works fine and routes to the collection as required.
I have also tried using data: { toggle: "pills" } but this also breaks the link.
Anyone got any ideas?
If by "breaking the link", you mean that browser no longer navigates to a new page, then it's because bootstrap's javascript intercepts the click on the link to do the toggling.
Clicking on a link takes you to its location, a new page. Clicking a toggle element shows/hides some other element on the current page. You can't have both.

Rails 4 - Font Awesome Icons in Links

Im trying to figure out how to make a link in my show page.
I want a link to
<%= #project.external_link %>.
I want to display it as:
<%= link_to '<i class="fa fa-link"></i>' %>
I've tried at least 20 variations on combining these two and I can't find a way that works.
Does anyone know how to display a font awesome icon, with a link to a dynamic field?
Try this:
<%= link_to #project.external_link do %>
<i class="fa fa-link"></i>
<% end %>
Try using :
<i class="fa fa-link"></i>

Linking Font Awesome icon to Rails attribute

I'm trying to have a Font Awesome icon be hyperlinked with the string of a Rails attribute.
I have tried this,
<%= link_to do %>
<i class="fa fa-link"><% school.website %></i>
<% end %>
this,
<i class="fa fa-link" href="<% school.website %>"></i>
and this:
<i class="fa fa-link" href="<%= school.website %>"></i>
among other variations, and can't seem to get the syntax right.
Would really appreciate some help with the syntax here, can't seem to find a specific answer to how linking with attributes works, only actual static text hrefs.
PS: I'm new to Rails / using Rails 4.2.
Try this:
<%= link_to ('<i class="fa fa-link"></i>').html_safe, desired_path %>
Considering school.website is a URL and you have included icons in CSS, the following will do:
<%= link_to(school.website) do %>
<i class="fa fa-link"></i>
<% end %>
Passing it as a block works too.
<%= link_to school.website do %>
<%= '<i class="fa fa-link"></i>'.html_safe %>
<% end %>
Assuming school.website is a URL that you would like to link to and display the link as well alongside the link icon from font awesome:
<%= link_to("<i class='fa fa-link'></i> #{school.website}".html_safe,school.website) %>
I am going to suggest something a little different.
I am personlly using glyphicons/fa a lot on my website, so I decided to create a little helper in application_helper.rb
application_helper.rb
def fa(glyph, text = nil)
html = "<i class=\"fa fa-#{glyph}\"></i>"
html << " #{text.to_s.html_safe}" if text
html.html_safe
end
And actually the correct syntax to use in views becomes either :
<%= link_to(school.website, class: "xxx") do %>
<%= fa('link') %>
<% end %>
OR (more compact)
<%= link_to(school.website, class: "xxx"){ fa('link') } %>
You can use a block as well if your link target is hard to fit into the name parameter. ERB example:
try this:
<%= link_to(school.website) do %>
<%= fa_icon "fas link" %>
<% end %>

BS3 glyphicon padding

I have a navbar in a rails app using glyphicons. I can't seem to set the spacing between the glyph and the link label unless I put a " " in front of the label.
Can anyone suggest a better solution. Thanks!
<li>
<%= link_to "Maintenance", dashboards_path, :class=> "glyphicon glyphicon-wrench" %>
</li>
If you have tag and content in a single line it produces no padding.
Make sure you anchor looks something like:
<li>
<a href="#" class="glyphicon glyphicon-wrench">
Maintenance
</a>
</li>
Or using link_to
<li>
<%= link_to dashboards_path, class: 'glyphicon glyphicon-wrench' do %>
<span>Maintenance</span>
<% end %>
</li>
Though it seems strange but
Maintenance
produces no spaces between icon and text
bootply

Resources