As you see the image. The result of pagination comes right next to the shops list.
It has to be below that.
How can I do that?
view
<div class='pagination-centered'>
<%= page_entries_info(#shops).html_safe %>
<%= paginate #shops, :window => 4, :outer_window => 5, :left => 2, :right => 2 %>
</div>
<% #shops.each do |shop| %>
<%= render 'shops/shop', :shop => shop %>
<% end %>
<div class='pagination-centered'>
<%= paginate #shops, :window => 4, :outer_window => 5, :left => 2, :right => 2 %>
<%= page_entries_info(#shops).html_safe %>
Image
UPDATE: This is the HTML that is generated. pagination has to be started at new line.
It shouldn't be at the same line as Shops.
<div class='pagination-centered'>
Displaying <b>all 4</b> shops
</div>
<span class='shop'>
<div class="List">
…shop A...
</div>
<div class="List">
…shop B...
</div>
<div class="List">
…shop C...
</div>
</span>
<div class='pagination-centered'>
Displaying <b>all 4</b> shops
</div>
If your span or list contain a float thats the problem
try
<div class='pagination-centered'>
Displaying <b>all 4</b> shops
</div>
<span class='shop'>
<div class="List">
…shop A...
</div>
<div class="List">
…shop B...
</div>
<div class="List">
…shop C...
</div>
</span>
<div class="clearfix"></div>
<div class='pagination-centered'>
Displaying <b>all 4</b> shops
</div>
Related
I trying to move pagination to footer on my website.
I don't want to ready solution, I would like to make this alone, but I do not know where to start, how can a real programmer handle this?
*I finished this site lately from book, and now i trying to do something alone.
code:
<div id="pins" class="transitions-enabled">
<% #pins.each do |pin| %>
<div class="box">
<div class="panel panel-default">
<%= link_to image_tag(pin.image.url(:medium)), pin %><br/>
<div class="panel-body">
<%= pin.description %><br/>
<br/>
<strong><%= pin.user.name if pin.user %></strong><br/>
</div>
<% if pin.user == current_user %>
<div class="panel-footer">
<%= link_to 'Edit', edit_pin_path(pin) %><br/>
<%= link_to 'Delete', pin, method: :delete, data: { confirm: 'Are you sure?' } %>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
<br/>
<div class="center">
<%= will_paginate #posts, renderer: BootstrapPagination::Rails %>
</div>
screen:
You havent showed your containers. If you pass all content in order and into containers:
<div class="container">
<div class="row">
<div class="col-md-12">
Stff..
</end>
</end>
</end>
All should be fine. As a fast fix try to:
<div class="center col-md-12">
<%= will_paginate #posts, renderer: BootstrapPagination::Rails %>
</div>
But this just a fast fix, not solution...
And your code is a bit messy, and you have one closing div, but havent showed where it was opened
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.
I want to create a pair of bootstrap columns inside another bootstrap column.
My output is not as desired for some reason.They look completely goofy for some reason. Did I make a rookie mistake in my formatting?
I am iterating over a #user object and having the profile picture be on the left and the profile info be on the right. There are many users so it should ideally style for all the iterations of the users in the database.
I feel this code should work but it doesn't, any idea as to what happened:
<div class="row">
<div class="other-box col-sm-6">
<p>Random text!!!</p>
</div>
<div class="index-user-container col-sm-6">
<div class="row">
<% #users.each do |user| %>
<div class="index-picture col-sm-4">
<%= image_tag user.image.thumb('150x185#').url if user.image_stored? %>
</div>
<div class="index-info-box col-sm-8">
<%= user.first_name %>
<%= user.last_name %>
<%= user.email %>
<%= link_to 'Go to profile', user_path(#user) %>
</div>
<% end %>
</div>
</div>
</div>
I am using twitter bootstrap. Here is a screen shot of the goofyness:
If you want a new row for each user in the list, then put the iterator above the row div, not inside it - otherwise, you might get some funky results.
<div class="index-user-container col-sm-6">
<% #users.each do |user| %>
<div class="row">
<div class="index-picture col-sm-4">
<%= image_tag user.image.thumb('150x185#').url if user.image_stored? %>
</div>
<div class="index-info-box col-sm-8">
<%= user.first_name %>
<%= user.last_name %>
<%= user.email %>
<%= link_to 'Go to profile', user_path(#user) %>
</div>
</div>
<% end %>
</div>
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.
My members index page is simply a list of members, but I'd like every 3 members to be wrapped in a containing div (that will act like a row). So rather than:
<div class="member"></div>
<div class="member"></div>
<div class="member"></div>
<div class="member"></div>
<div class="member"></div>
I need the markup to be:
<div class="row">
<div class="member"></div>
<div class="member"></div>
<div class="member"></div>
</div>
<div class="row">
<div class="member"></div>
<div class="member"></div>
</div>
I do have a solution, but I'm not happy with it. I have actually seen a better way to do it in ERB before, but can't find it again.
My current code:
<div class="row">
<% #members.each do |member| %>
<div class="member"><%=member.name%></div>
<%= cycle("", "", "</div><div class=\"row\">".html_safe) %>
<% end %>
</div>
How about this:
<% #members.each_slice(3) do |slice| %>
<div class="row">
<% slice.each do |member| %>
<div class="member">
...your markup here
</div>
<% end %>
</div>
<% end %>
I found the method I was looking for. It's basically identical to each_slice() posted by #HargrimmTheBleak, but has a more friendly name:
in_groups_of()
Sounds like a great chance to use a modulus
<div class="row">
<% for(i=1, i<=#members.size, i++ %>
<% if i%4 == 0 %>
</div>
<div class="row">
<% end %>
<div class="member"><%=#members[i-1]%></div>
<% end %>
</div>