I'm using the bootstrap tab-pane inside of my rails application. Inside of each tab I want to use the Masonry GEM. However, all the items are stacking on top of eachother.
.container
%ul.nav.nav-tabs
- if #project.user == current_user
%li
%a{href: new_project_room_path(#project)} <i class='fa fa-plus-circle'></i> Add Room
- #rooms.each do |room|
%li
%a{"data-toggle" => "tab", href: "##{dom_id(room)}"}= room.title
.tab-content
- #rooms.each do |room|
.tab-pane{id: dom_id(room)}
.container-fluid.page.page-block
.masonry-container.centered.transitions-enabled.infinite-scroll.clearfix
- room.products.each do |product|
.box.col3
= product.title
If I resize the page, they display side by side, the way I want them to. How can I get it to display like this all the time?
Also as an FYI, when I use similar code not inside of a tab-pane, everything works fine.
.container-fluid.page.page-block
.masonry-container.centered.transitions-enabled.infinite-scroll.clearfix
- if current_user.is_designer?
= link_to new_project_path do
.box.col3.create_projects_well#add_project
%span.text-center#create_project
%i.fa.fa-plus-circle.fa-3x
%br
Add a project
- #projects.each do |project|
.box.col3
- if project.image_url != nil
= link_to(image_tag(project.image_url, class: "img-responsive opaq"), user_project_path(project.user, project))
- else
= link_to(image_tag("150.png", class: "img-responsive opaq"), user_project_path(project.user, project))
Try removing fluid.
.container.page.page-block
.masonry-container.centered.transitions-enabled.infinite-scroll.clearfix
- if current_user.is_designer?
= link_to new_project_path do
.box.col3.create_projects_well#add_project
%span.text-center#create_project
%i.fa.fa-plus-circle.fa-3x
%br
Add a project
According to the bootstrap fluid grid documentation, "Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column."
Not sure if I understand correctly. But if you want to have the masonry to always be the same width you may want to checkout the isFitWidth Property
link to masonry doc
http://masonry.desandro.com/options.html#isfitwidth
"isFitWidth": true
/* center container with CSS */
#fit-width .masonry {
margin: 0 auto;
}
codepen demo
http://codepen.io/desandro/pen/nGLvx
Related
I have an issue with my loop on a Bootstrap tab.
%ul.nav.nav-pills.nav-fill{role: "tablist"}
- #matrices.each_with_index do |matrice, i|
%li.nav-item
= link_to "#matrice_#{matrice.id}", class:"nav-link #{"active show" if i.zero?}", "data-toggle" => "tab" do
= matrice.name
.tab-content
- #matrices.each_with_index do |matrice, i|
%div{id:"matrice_#{matrice.id}", class:"tab-pane #{"active show" if i.zero?}", role: "tabpanel"}
= matrice.name
First tab is display well with the content but when I click on the second tab, first tab content is also display. I want to hide the previous tab content at click.
How to fix it? Can I make one loop over two HTML div?
Haml strictly follows indentation. Seems the loop in the second tab is put under same line where first tab is.
Try the below way.
%ul.nav.nav-tabs
%li.active
%a{"data-toggle": "tab", href: "#tab_menu1"}
Graphical View
%li
%a{"data-toggle": "tab", href: "#tab_menu2"}
Tabular View
%div.tab-content
%div.tab-pane.in.active{id: "tab_menu1"}
= render partial: "menu1_view"
%div.tab-pane{id: "tab_menu2"}
= render partial: "menu2_view"
You can refer https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp for more details.
Add your loops under the %div.tab-page tag.
Hope this helps!!
I am trying to modify my layout just to add link_to to my drop down list.
previous code:
%li.divider
%li
%a{:href => "#"}
%i.fa.fa-user-profile
Add new user
i edited like this:
%li.divider
%li
= link_to '<i class="fa fa-user-profile"></i> Add new user'.html_safe, new_user_path
And everything looks fine, but fa-user-profile is 0px x 0px and it is invisible. What i done wrong?
Html output:
link_to has a "blocky" form that accepts custom inner markup:
= link_to new_user_path do
%i.fa.fa-user-profile
Add new user
Regarding element invisibility: the element itself should be filled in by FontAwesome's CSS, using font-family (on class fa) and content (on specific icon class). If you don't have them, it means you don't have the necessary CSS.
How to add it, depends on the way FontAwesome is integrated into your asset pipeline. font-awesome-sass' README has pretty clear instructions on that, your solution's might differ.
You could use raw()
= link_to raw('<i class="fa fa-user-profile"></i> Add new user'), new_user_path
<%= button_to '+',{:controller=>"line_items",:action=>"create", :menu_id => line_item.menu_id},class: "imagePlus",:remote => true %>
.imagePlus {background-image: url('..public/images/minus.jpg');}
I want to set a background_image to this button.I have used the class having background_image, but didn't get expected result.
Try in this way:-
.imagePlus{background-image: url("/public/images/minus.jpg");}
The problem is most likely due to your calling of the background image.
More specifically, I believe you'll benefit from using the asset_url helpers, with one of the CSS prepropcessors (SCSS / SASS):
#app/assets/stylesheets/application.css.scss
.imagePlus {
background: {
image: asset-url('minus.jpg');
}
}
This is, of course, if your button_to syntax is correct
Button Styling
As per this JSFiddle, you should be able to see the background image on your button with your code (which means that if you get the CSS set up correctly, it should work).
You'll be better using Mandeep's comment, and creating a styled link_to element. Either way, here's what I'd do for both types of input:
#Button
<%= button_to "+", line_items_path(line_item.menu_id), class: "imagePlus", remote: true %>
#Link
<%= link_to "+", line_items_path(line_item.menu_id), class: "imagePlus", method: :post, remote: true %>
Ruby on Rails 3. I have a page with several div blocks. I am trying to seperate them into two pages. I want a button at the bottom of the page which will change the rendered partial.
The "render 'news'" is the first partial loaded. I want the "Archived News Postings" button to change the 'news' to 'archive_news'
<%= render 'news' %>
<%= link_to render(:partial => 'archive_news'), :class => 'btn' %> <button type="button" class="archive">Archived News Postings</button>
Can I get a pointer? Thank you
It depends on what you want to achieve really. For instance, these two options could be considered:
1) You could fetch both the news items and the archived ones. Then render two divs with the corresponding news items. The one with news is shown while the other has display: none; in the CSS. This allows you to use JavaScript to toggle the divs visibility. This obviously has some disadvantages with amount of data etc. but it gives an idea what to think about.
Something along these lines:
controller:
def some_action
#items = ...
#archived_items = ...
end
view:
<div id="news">
<% #items.each do |i|
...
</div>
<div id="archived_news">
<% #archived_items.each do |i|
...
</div>
css:
#archived_news {
display: none;
}
2) Another way would be to rely on asynchronously fetching the news items as the used wants to "toggle". This can be done with AJAX. This allows for more flexibility if the data set is large. You can even have "fetch more" in some way that archived news items are loaded on demand if needed.
If you shed some light what you might need it is possible to give a more specific answer.
%p{style: "float: right;"}
= link_to "Report", blog_post, method: :Report, confirm: 'Why do you want to report?'
How to use a drop down menu if I want to have a pop up containing "Why do you want to report?" and a drop down menu containing the reasons under the question?
You should add jquery-rails: https://github.com/indirect/jquery-rails
Also you can follow this tutorial: http://joshhuckabee.com/jquery-rails-3
You may use twitter bootstrap drop down menus.
http://twitter.github.com/bootstrap/javascript.html
Download the bootstrap-dropdown.js file and put it your assets file.
Call dropdown by
$('.dropdown-toggle').dropdown()
There is also a demo about how to use that.
In Rails view template, you need simply write iteration over menu-elements:
<ul class="dropdown-menu">
<% #menu_items.each do |item| %>
<li><%= item.title %></li>
<% end %>
</ul>
then you need to add a little css/javascript magic to make this list looks like drop-down menu.
There's a plenty of tutorials about that topic, but much easier way, as was noted above, is simply to use twitter-bootstrap. http://twitter.github.com/bootstrap/javascript.html#dropdowns. (you may check this gem to include twitter-bootstrap into your rails app)