I'm trying to create a feed of posts for my bloglike application. I'm trying to arrange it so posts are grouped by month and there are 3 posts displayed per line.
This is my code for my feed partial:
<% #posts_by_month.each do |monthname, posts| %>
<%= monthname %>
<% posts.each do |post| %>
<div style="width:100%">
<div style="float:left;width:33%"><%= post.created_at %></div>
</div>
<% end %>
<% end %>
& this is the #posts_by_month in my controller:
#posts_by_month = current_user.feed.group_by { |post| post.created_at.strftime("%B") }
This currently styles it like in this screenshot:
When the code reaches a new month I want the month to be on a new line like the arrow demonstrates, rather than part of the same block like it is currently. Does anyone have any suggestions on how to do this?
You could wrap the month name in:
<div style="clear:left"><%= monthname %></div>
This will make the monthname 'clear' anything that is floated left.
You could make it easier on yourself though by using a grid system or using flexbox like this: https://codepen.io/anon/pen/JNZqaM.
You shouldn't have to use floats for this purpose
Related
Screenshot of Page I am trying to recreate a pc part picker type of application using bootstrap and express. When trying to display all the cases available on "my" website, I am loading all of the cases from my database in an ejs file and then displaying them in a thumbnail with four in each row. I have used flexboxes on every four elements to make the heights for all thumbnails in one row the same, however it only works on the first row and does not work after. I have tried to add the code underneath, however this is my first time asking a question so if you have any suggestions to make it more readable please do let me know. I have also included the link to the picture of the page at the beginning of the paragraph.
<% var start = 0 %>
<% cases.forEach(function(qcase) { %>
<% if (start % 4 == 0) { %>
<div class="row text-center display-flex">
<% }; %>
<div class="col-md-3 col-md-6">
<div class="thumbnail">
<img src="<%=qcase.image%>">
<div class="caption">
<h4><%=qcase.name%></h4>
</div>
<div>
More Information
</div>
</div>
</div>
<% if (start % 4 == 3) { %>
</div>
<% }; %>
<% start += 1 %>
<% }); %>
I'm on rails, using the 'twitter-bootstrap-rails' gem, version 3.2.2 which may or may not be relevant to the diagnosis here.
So basically I've used some documentation examples online to get a panel-collapsing functionality on a little data visualization application I've made using the chartkick gem. I got the collapsibility functionality, but now the charts inside of my collapsible divs are getting squeezed into 400px X 200px rect elements despite my instructions for height and width being added.
Here's what the charts should look like. These are the charts that have not been placed into collapsible div elements (I'm the real estate developer here as well so not worried about privacy w/ regards to data)
And here's what the squeezed charts inside of the collapsible divs look like:
What's even stranger is that I had to reload the page to get the bug to show itself, because in the time it took me to write this question, the chart had somehow fixed itself. Happens randomly but normally takes at least a minute. Sometimes I can get it to "fix itself" if I open up the web inspector and point to the elements. This is what it looks like after a spontaneous self-fix:
The self fix only worked for the already-collapsed div elements. The uncollapsed elements remain shrunken after being expanded, at least initially.
code for the index.html.erb page for the properties controller. Nothing proprietary here really.
<h1>Properties</h1>
<% #properties.each do |p| %>
<div class="panel panel-default">
<div class="panel-heading"><h3><%= p.name %> Hard & Soft Costs Per Draw</h3></div>
<div class="panel-body">
<% hard_costs = p.hard_costs %>
<% soft_costs = p.soft_costs %>
<% construction_contract_estimates = hard_costs.map(&:sv_construction_contract) %>
<%= construction_contract_estimates.pctg_change %> Change in Construction Contract Estimate from Draw 1 to Draw <%= hard_costs.last.draw_i %>
<%= column_chart [{:name => "Hard Cost Left to Go", :data => hard_costs.map{|hc| [hc.draw_i, hc.b2f_construction_contract.to_i]}}, {:name => "Hard Cost Draw", :data => hard_costs.map{|hc| [hc.draw_i, hc.cd_construction_contract.to_i]}}, {:name => "Total Hard Cost Estimate", :data => hard_costs.map{|hc| [hc.draw_i, hc.sv_construction_contract.to_i]}} ], :height => "800px" %>
<%= column_chart hard_costs.map{|r| [r.draw_i, r.cd_construction_contract] }%>
<%# collapsible column chart 1%>
<div class="panel panel-default" style="display: block;">
<% softcosts_pd_graph_id = "#{p.name.sanitize}_scpd_chart_id" %>
<div class="panel-heading">Soft Costs Per Draw Graph (<a href="#<%= softcosts_pd_graph_id %>" data-toggle='collapse'>Show/Hide</a>) (click twice to hide the first time)</div>
<div class="panel-body collapse" id="<%= softcosts_pd_graph_id %>">
<%= column_chart p.soft_costs.map{|sc| [sc.draw_i, sc.cd_total_soft_costs.to_i] } , :library => {:xtitle => "Draw #", :ytitle => "Soft Cost Draw", :width => "800px"} %>
</div>
</div>
<%# collapsible series of pie charts %>
<div class="panel panel-default" style="display: block;">
<% softcosts_pd_pies_id = "#{p.name.sanitize}_scpd_pies_id"%>
<%# figure out how to use glyph icons and use 'glyphicon-collapse-down' and '...-up' %>
<div class="panel-heading">Soft Costs Per Draw Pie Charts (<a href="#<%= softcosts_pd_pies_id %>" data-toggle='collapse'>Show/Hide</a>) (click twice to hide the first time)</div>
<div class="panel-body collapse" id="<%= softcosts_pd_pies_id %>">
<ul class="list-group">
<% p.soft_costs.each do |sc| %>
<li class="list-group-item">Draw <%= sc.draw_i %>:
<h4>Soft Cost Draw #<%= sc.draw_i %>: <%= number_to_currency sc.cd_total_soft_costs %> </h4>
<%= pie_chart sc.breakdown_chart_data.sort_by{|x,y| y}.reverse, :library => {:legend => {position: "right"} } %>
</li>
<% end %>
</ul>
</div>
</div>
</div>
</div>
<% end %>
Code taken from client web browser: gist
Thanks! Hope I've made it as easy as possible for someone to assist
Also, while we're on this subject of handling the rect boxes created by chartkick, does anyone know how to edit the height and width of the rect box serving as an outer container for the chart itself? There's too much buffer here.
I had the same problem with Chartkick in foundation-rails. The problem is that the resize event handlers are not triggered when expanding.
For example, I had the following code in a js file for my expandable elements:
$(function() {
$('tr.parent')
.css("cursor","pointer")
.attr("title","Click to expand/collapse")
.click(function(){
$(this).siblings('.child-'+this.id).toggle();
});
$('tr[class^=child-]').hide().children('td'); });
I added the following under the click event to trigger the resize event handlers:
var evt = document.createEvent('Event');
evt.initEvent('resize', true, true);
window.dispatchEvent(evt);
This works just fine:
$(function() {
$('tr.parent')
.css("cursor","pointer")
.attr("title","Click to expand/collapse")
.click(function(){
$(this).siblings('.child-'+this.id).toggle();
var evt = document.createEvent('Event');
evt.initEvent('resize', true, true);
window.dispatchEvent(evt);
});
$('tr[class^=child-]').hide().children('td'); });
There might be a better way to do this, but it's a good start.
I am printing the pdf report where i will be looping each student and i am applying page-break after each student
And my applied page break code is as below
<style type="text/css" >
.page-break { display:block; clear:both; page-break-after: always;}
</style>
And my view is
<% #students.each do |student| %>
<%= student.first_name %>
<div class="page-break"></div>
<% end %>
Problem is i am getting empty page at last in pdf report, i am using wicked-pdf gem for pdf generation i think problem is with page-break css can anyone help me
Quick and dirty solution, but should work fine:
<% #students.each do |student| %>
<%= student.first_name %>
<% if student.id != #students.last.id %>
<div class="page-break"></div>
<% end %>
<% end %>
Also if you can show us the html container of the each loop, we can give a better answer depending on this one.
Just dont add the class that gives page break on your last loop, that way "page-break-after: always" wont take effect
I want to define the width of a status bar dynamically.
First I define the variable:
<% target = (clicks/total_clicks)*100 %>
Then I try to embed the ruby code into a css width tag:
<div class="bar" style="width: <%= target %>%">
However, the html output looks like this
<div class="progress progress-striped">
<div class="bar" style="width: 0%"></div>
</div>
I tried to convert the target var as a string:
<% target = ((clicks/total_clicks)*100).to_s %>
I obviously also tried to assign a not-dynamic value as well:
<% target = 40.to_s %>
But with no success.
How can I embed a ruby var into a CSS style tag?
Thanks for any help.
You are getting 0 because of how you are using the numbers. You are using Integers. Do this:
<%= target = (Float(10)/Float(20))/100 %>
Using floats will allow you to get the percentage you are using. When you use Integers, it will generally round the number off. Hope this helps.
EDIT:
You can also use the .to_f method as well, instead of Float
I'm trying to write a function that returns what menu levels are visible on the page...at the moment I'm using <% if %> statements in the template, ie:
<div class="<% if Menu(1) %>navA<% end_if %> <% if Menu(2) %>navB<% end_if %> <% if Menu(3) %>navC<% end_if %>">...</div>
Which, if there are 3 menu levels on a page, returns <div class="navA navB navC">
What I want is a function that returns just the lowest level menu on the current page, ie <div class="navC">
Thanks
that's perfectly possible.
just add the following to your Page_Controller class:
function LowestLevel() {
$i = 1;
while($this->getMenu($i)->count() > 0) $i++;
return 'level'.($i-1);
}
now you can call it in your template like so:
<div>lowest level: $LowestLevel</div>
$LowestLevel will print 'level1', 'level2' etc.
in case your class names have to be like 'navA', 'navB'... you need to do some matching like 'level1'->'navA', which shouldn't be too hard - come back to me if you need any help on this.
What about the following (untested):
<div class="<% if Menu(3) %>navC<% else_if Menu(2) %>navB<% else %>navA<% end_if %>">...</div>
You might want to consider using some custom code in the Controller for logic-heavy stuff, but this should get you going...