I'm trying to wrap a link around an li in my rails app, and I thought the following would work:
<%= link_to project_path(remix) do %>
<li>
<div class="remix-list-image"><%=link_to image_tag(remix.default_image.image_path_url(:preview), :class=>"img-polaroid"), project_path(remix) %></div>
<div class="remix-list-title"><%=link_to remix.title, project_path(remix) %> by <%= link_to remix.author, user_path(remix.user) %></div>
</li>
<% end %>
But it's producing the following html:
<a href="/projects/206">
</a>
<li>
<div class="remix-list-image">
<img alt="Preview_2013-06-18_08.25.02" class="img-polaroid" src="">
</div>
<div class="remix-list-title">Video Test Remix by tiff
</div>
</li>
I expect it to do something like the following:
<a href ="/projects/206">
<li>...</li>
</a>
What am I doing wrong?
Are you looking at the Inspector, or the actual generated code? If the former, it's probably what the browser is interpreting your HTML as, rather than what it actually is in the source code.
The reason it's wonky is because you can't put an li into an anchor in that way; the only thing a ul or ol is allowed to contain is an li. Change the code to this, and it should work:
<li>
<%= link_to project_path(remix) do %>
<div class="remix-list-image"><%=link_to image_tag(remix.default_image.image_path_url(:preview), :class=>"img-polaroid"), project_path(remix) %></div>
<div class="remix-list-title"><%=link_to remix.title, project_path(remix) %> by <%= link_to remix.author, user_path(remix.user) %></div>
<% end %>
</li>
Related
I have the following code for showing the header image in my index.html.erb for my articles:
<% #articles.each do |article| %>
<% if article.public? %>
<%= link_to article_path(article), class: 'text-decoration-none' do %>
<div class="card mt-3 post-card">
<div class="card-body">
<div class="row">
<div class="col-md-2">
<% if article.header_image.present? %>
<div class="header-img"
style="background-image: url(<%= url_for(article.header_image) %>);">
</div>
<% end %>
</div>
<div class="col-md-10">
<h5 class='card-title mb-1 text-dark'><%= article.title %></h5>
<p class='text-secondary mb-0'><%= article.body %> </p>
</div>
</div>
</div>
</div>
<% end %>
<% end %>
<% end %>
I am following the tutorial by Techmaker Studio, and the desired output is at this timestamp: https://youtu.be/MCEzxY9BbiU?t=5059
The code is correct because I inspected and see the example image (the ruby icon) shows up in the inspector but not in the background image.
inspect screenshot proves url is working
The one difference between my project and the tutorial I am following is that I am using Rails 7 and importmaps. Does anyone have an idea why it isn't showing up? when I use image_tag, it works but not with the background-image style I desire.
I have a page with bootstrap div's and 2 images and buttons on the page. In full screen, the page works fine. But when I resize the page only one of the images and 1 of the 2 buttons work. The images are side by side in full screen but when they resize one is on top of the other ant the top button and image cannot be pressed. Here is the view.
<div class="jumbotron">
<div class="center-block">
<img src="https://s3.amazonaws.../Frontpage_logo.png" class="img-responsive" alt="...">
</div>
<div class="text-center">
<br/>
<br/>
<% if user_signed_in? %>
<%= link_to 'Your Dashboard', users_dashboard_url, class: 'btn btn-primary' %>
<% elsif manager_signed_in? %>
<%= link_to "Your Dashboard", managers_dashboard_url, class: 'btn btn-primary' %>
<% elsif admin_signed_in? %>
<%= link_to "3rd Party/Supplier Dashboard", admins_dashboard_url, class: 'btn btn-primary' %>
<br/>
<br/>
<%= link_to 'Monitoring', sidekiq_web_path %>
<% else %>
<div class="container-fluid">
<div class="col-md-5">
<div class= "pull-left">
<h3><strong>See how we ...!</strong></h3>
<img src="https://s3.amazonaws.../manager_video.jpg" class="img-responsive">
<br>
<%= link_to "Manager", managers_why_url, class: 'btn btn-primary' %>
</div>
</div>
<div class="col-md-2">
<div class="text-center">
<h2>or</h2>
</div>
</div>
<div class="col-md-5">
<div class= "pull-right">
<h3><strong>See how we are helping ...!</strong></h3>
<img src="https://s3.amazonaws.../user_video.jpg" class="img-responsive">
<br>
<%= link_to "Tenant", users_why_url, class: 'btn btn-primary' %>
</div>
</div>
</div>
</h2>
</div>
<% end %>
</div>
If you wish to have the images side by side without overlapping when resized, change col-md-* to col-xs-*. Do so with rest.
I hope this helps.
I hope this should work for you.
Please try this code instead of yours. i made some small changes.
See how we ...!
or
See how we are helping ...!
When we create table using Bootstrap then it should go in side the "row" class. and when you re-size the window some other element is coming above of all the screen. that's way you was not able to click images. and on the End of your code 4th line from the bottom. there is no stating tag for closing "h2" tag.
If a User creates a bunch of <ul></li>:results</li></ul> those bullets will overlap the <div> below it. How can we stop this from happening? Will you save the <div> before it's too late?!? dun dun dun
index.html.erb
<!-- Default bootstrap panel contents -->
<div id="values" class="panel panel-default">
<div class="panel-heading"><h4><b>AVERAGE</b></h4></div>
<% #averaged_quantifieds.each do |averaged| %>
<% if averaged.user == current_user %>
<div style="float:left; width:150px;">
<%= link_to edit_quantified_path(averaged) do %>
<b><%= averaged.name %> (<%= averaged.metric %>)</b>
<% end %>
<ul>
<% averaged.results.each do |result| %>
<li>
<%= result.date_value.strftime("%b.%y") %>
<%= result.result_value %>
</li>
<% end %>
</ul>
</div>
<% end %>
<% end %>
</div>
# The line breaks only work if the User only adds a few rows, but I want to encourage the User to creates as many rows as his heart desires.
<br>
<br>
<br>
<br>
<!-- Default bootstrap panel contents -->
<div id="values" class="panel panel-default">
<div class="panel-heading"><h4><b>INSTANCE</b></h4></div>
<% #instance_quantifieds.each do |instance| %>
<% if instance.user == current_user %>
<div style="float:left; width:150px;">
<%= link_to edit_quantified_path(instance) do %>
<b><%= instance.name %> (<%= instance.metric %>)</b>
<% end %>
<ul>
<% instance.results.each do |result| %>
<li>
<%= result.date_value.strftime("%b.%y") %>
<%= result.result_value %>
</li>
<% end %>
</ul>
</div>
<% end %>
<% end %>
</div>
<div class="values-button">
<%= link_to new_quantified_path, class: 'btn' do %>
<b><span class="glyphicon glyphicon-plus"</span></b>
<% end %>
</div>
you have a the code <div style="float:left; width:150px;">. this is what makes it overlflow to the div below it. float style takes it out of the normal flow of the dom (floats above the natural structure of the dom is a way of describing it) and the div below it doesnt pay attention to it. removing that line of code (you have it twice) will solve your problem
My posts appear on my index page as one element. I would like to make each individual post behave as a different element for style purposes. (Side note: I am trying to display each post vertically, and display a border around each post) I will post my code below.
Index view:
<li class="thought">
<% #thoughts.each do |f| %>
<span class="title"><%= f.title %></span>
<span class="content"><%= f.content %></span>
<span class="timestamp">
Posted <%= time_ago_in_words(f.created_at) %> ago.
</span>
<% end %>
</li>
Controller CSS:
.thought {
float: left;
display: block;
width:300px;
height:150px;
}
index action:
def index
#thoughts = Thought.order('created_at desc')
end
Thanks.
Simply put the list-item tags inside of the each loop:
<% #thoughts.each do |f| %>
<li class="thought">
<span class="title"><%= f.title %></span>
<span class="content"><%= f.content %></span>
<span class="timestamp">
Posted <%= time_ago_in_words(f.created_at) %> ago.
</span>
</li>
<% end %>
I'm not sure I totally understand your intentions, but ERB + rails gives you the beauty of iterating through each of your #thoughts
for example you can do:
<% #thoughts.each do |thought| %>
<h1 class="thought"> thought.attributes </h1>
<%end%>
This would result in each of your thoughts being in it's own h1 with its own css.
Hope this helps.
I have these markup on my rails application these form is not working when i tr
<div class="span5 mg myform">
<div class="span5 mg">
<ul class="clearfixremo formmenu">
<li class="lefty blocky boldy rightbrd"><i class="icon-pencil"></i> Post</li>
<li class="lefty blocky boldy myphotoupload "> <i class="icon-camera"></i> Photo</li>
</ul>
</div>
<div class="span5 mg">
<div class="row">
<div class="span4">
<%= simple_form_for(current_user.posts.new, :remote => true ,:html => { :multipart => true } ,:class=>"form-horizontal" ) do |f| %>
<div class="field">
<%= f.text_area :body ,:rows=>1%>
<%= f.select :privacy,["public","friends","only me"] %>
</div>
</div>
</div>
</div>
<div class="span5 mg">
<div id="pactions" class="actions">
<%= f.submit "#{t 'share'}",:id=>"share"%>
</div>
<% end %>
</div>
</div>
it shows to me on html markup that the form is closed before the select menu and when I move the submit button before the select menu and inside the field div its working
Fix the formatting and indentation of your ERB and the problem should become obvious: opening tags (including <%= ... do %>) must match their closing tags (including <% end %>). You can't:
<div>
<form>
</div>
</form>
you need to:
<div>
<form>
</form>
</div>
Your <form> opens one <div>
<%= simple_form_for(current_user.posts.new, :remote => true ,:html => { :multipart => true } ,:class=>"form-horizontal" ) do |f| %>
<div class="field">
and then tries to close four of them:
</div>
</div>
</div>
</div>
When the browser sees that invalid HTML, it will attempt to fix it by closing the <form> behind your back and it will pretend that you said:
</div>
</form>
</div>
</div>
Once that happens, your form is broken and nothing works the way you're expecting it to.
Fix your tag nesting so that everything is closed in the opposite order that the tags are opened. And start formatting your code properly so that the structure is obvious, the computer won't care but you will.