As you see the picture, The pagination comes right next to the content.
How can I start it at new line? I mean the bottom of content.
HTML
<% #communities.each do |community| %>
<%= render 'communities/community', :community => community %>
<% end %>
<div class='pagination-centered'>
<%= paginate #communities, :window => 4, :outer_window => 5, :left => 2, :right => 2 %>
</div>
Apparently, your communities container uses float:left.
you should use clear:both for pagination containger
Related
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
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 writing a form with three text input fields. I have used text_field_tag to create them
<%= text_field_tag(:input_first) %>
<%= text_field_tag(:input_second) %>
<%= text_field_tag(:input_first) %>
Am using bootstrap css. I want to make the second input larger than the first and the third input. How can I achieve that?
I have tried the below, and even more and the input field size is not changing.
first
<%= text_field_tag(:input_second, :input_html => { :class => "input-large"}) %>
second
<%= text_field_tag(:input_second, nil, :class => "input-large") %>
third
<%= text_field_tag(:input_second, nil, :size=> 30) %>
fourth
<span class="input-large">
<%= text_field_tag(:input_second) %>
</span>
What wrong am I doing? Am a beginner in rails/css/html
ps: should I use text_field_tag or text_field ?
Bootstrap utilizes specific classes to control the width of input elements:
In a Rails template, you'd invoke a text_field_tag in the following manner:
<%= text_field_tag('input_second', nil, class: 'input-large') %>
I'm using the nice Select2 for multiple select fields on my web applications search page. One can search for people by company/industry/school. Because there are hundreds of searchable values for each, it is taking time for the correct select2 css to load (about 1 second). The old ugly select fields can be seen in a flicker before the pretty select2 fields display. Attached are two screenshots that show the transition.
Here is my view code:
<%= form_tag('', :method => :get) do %>
<div class="row-fluid">
<div class="span4">
<label>What industries have they worked in?</label>
<%= select_tag "industry_ids", options_for_select((#visible_industries), params[:industry_ids]), { :placeholder => "Type to search...", :multiple => true, :id => "e3", :onchange => 'this.form.submit();' } %>
<%= hidden_field_tag :&, params[:industry_ids] %>
</div>
<div class="span4">
<label>What companies have they worked at?</label>
<%= select_tag "company_ids", options_for_select((#visible_companies), params[:company_ids]), { :placeholder => "Type to search...", :multiple => true, :onchange => 'this.form.submit();' } %>
<%= hidden_field_tag :&, params[:company_ids] %>
</div>
<div class="span4">
<label>Where did they go to school?</label>
<%= select_tag "school_ids", options_for_select((#visible_schools), params[:school_ids]), { :placeholder => "Type to search...", :multiple => true, :onchange => 'this.form.submit();' } %>
<%= hidden_field_tag :&, params[:school_ids] %>
</div>
<div class="row-fluid">
<% end %>
</div>
</div>
And controller code:
def people
#current_user = current_user
#visible_positions = Position.where{ is_visible.eq('true') }
#visible_educations = Education.where{ is_visible.eq('true') }
#visible_companies = #visible_positions.order("LOWER(company)").all.map { |p| [ p.company, p.company ] }.uniq
#visible_industries = #visible_positions.order("LOWER(industry)").all.map { |p| [ p.industry, p.industry ] }.uniq
#visible_schools = #visible_educations.order("LOWER(school)").all.map { |e| [ e.school, e.school ] }.uniq
#c = #visible_positions.where{company.in(my{params[:company_ids]})}.map(&:user_id)
#i = #visible_positions.where{industry.in(my{params[:industry_ids]})}.map(&:user_id)
#s = #visible_educations.where{school.in(my{params[:school_ids]})}.map(&:user_id)
unless #c.empty? && #i.empty? && #s.empty?
#users = User.find([#c,#i,#s].reject(&:empty?).reduce(:&))
end
end
Finally, I have this javascript in my assets directory (in addition to the select2 css):
$(document).ready(function(){
$('select').select2({
minimumInputLength: 1
});
});
What can I do to prevent this flicker from happening? Thank you.
I'll post my comment as an answer since it solved your issue.
My suggestion would be to hide the selects till the page is fully loaded (and select2 applied).
In the stylesheet, add a input {display:none;} rule to hide them (although visibility:hidden might be better). Then with jQuery override that rule $('input').css("display","inline");.
How I can get the generated view code below to place the editor-field to the right of the editor-label, on the same row? I don't want to mess with the generated defaults, e.g. remove the divs, as I am still in very early dev and regenerate views quite often.
<div class="editor-label">
<%: Html.LabelFor(model => model.Suburb) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.Suburb) %>
<%: Html.ValidationMessageFor(model => model.Suburb) %>
</div>
You could try floating both the .editor-label and .editor-field divs left, and having the .editor-label clear left