I am having trouble aligning my caption to the right of my image within a bootstrap thumbnail
My HTML
<div class="container">
<div class="row">
<div class="span8 offset2">
<% #response.each do |f| %>
<% f.each_pair do |k, v| %>
<h3 class="smallTitle">Available on <%= k %></h2>
<% v.each do |film| %>
<div class="thumbnail">
<img src="http://placehold.it/180x200">
<div class="caption">
<%= link_to film[1], film[0] %> : <%= link_to "remind me", "#", :class => 'remind' %>
</div>
</div>
<% end %>
<% end %>
<% end %>
</div>
</div><!--Row-->
</div><!--/container-->
So at the moment my image is to the left and the caption is below the image.. Is there a simple way with css to get the caption to div to sit to the right of the image
You could just float the image and caption within the thumbnail div
<div class="thumbnail clearfix">
<img src="http://placehold.it/180x200" class="pull-left">
<div class="caption" class="pull-right">
<%= link_to film[1], film[0] %> : <%= link_to "remind me", "#", :class => 'remind' %>
</div>
</div>
Related
I want to to loop through each post and display a left and right layout of image and its content in every other row
like this Theme
basically the html is:
<div class="container">
<div>
<div class="images"><img src="image1"></div>
<div class="images-content">content 1 here</div>
</div>
<div>
<div class="images images-right"><img src="image2"></div>
<div class="images-content images-content-right">content 2 here</div>
</div>
<div>
<div class="images"><img src="image3"></div>
<div class="images-content">content 3 here</div>
</div>
<div>
<div class="images images-right"><img src="image4"></div>
<div class="images-content images-content-right">content 4 here</div>
</div>
<div>
<div class="images"><img src="image5"></div>
<div class="images-content">content 5 here</div>
</div>
<div>
<div class="images images-right"><img src="image6"></div>
<div class="images-content images-content-right">content 6 here</div>
</div>
</div>
I have tried this cycle example
<% #posts.each do |post| %>
<div class="<%= cycle('images', 'images images-right') %>">
Image here
</div>
<% end %>
but the problem is how to add the respective content div classes which goes with the images
You can use with_index to add classes dynamically to your odd-indexed posts.
Also, please prefer using image_tag instead of using raw HTML to create <img> tag.
<div class="container">
<% #posts.each.with_index do |post, index| %>
<div class="images <%= 'images-right' if index.odd? %>"><%= image_tag post.image %></div>
<div class="images-content <%= 'images-content-right' if index.odd? %>"><%= post.content %></div>
<% end %>
<div>
It on what attributes your Post model has. Presumably it has content and image attributes?
<% #posts.each do |post| %>
<div>
<div class="<%= cycle('images', 'images images-right') %>">
<%= post.image %>
</div>
<div class="<%= cycle('images-content', 'images-content images-content-right') %>">
<%= post.content %>
</div>
</div>
<% end %>
a need apply boostrap style in mi DropDownList only in the view, not my model
<% using (Html.BeginForm(FormMethod.Post))
{ %>
<%: Html.ValidationSummary(true) %>
<div class="form-group">
<div class="row">
<div class="col-md-6 text-right">
Pais:
</div>
<div class="col-sm-6">
<%: Html.DropDownList("CodPais", String.Empty) %>
<p class="label label-danger"><%: Html.ValidationMessageFor(model => model.CodPais) %> </p>
</div>
</div>
</div>
<% } %>
someone has documentation on how to apply bootstrap in visual .aspx
i try:
I am a student working on my final project. Below you will see two screen-shots of my application. The first is the normal desktop view, where everything is rendered correctly. As you begin to resize the view-port smaller, the position of items becomes uneven as you can see in the second screen shot.
Am I using the clearfix incorrectly for Bootstrap? I attempted to place the clearfix underneath each vehicle but then realized from checking the Bootstrap documentation that the clearflix class must wrap around said items. Below is my code:
vehicles/index.html.erb
<div class="row">
<!-- Side Column -->
<div class="col-sm-3">
<h3 class="item-category">Make: </h3>
<ul class="side-menu">
<%= form_tag filter_vehicles_path do |f| %>
<% Vehicle.makes.each do |make| %>
<li>
<%= display_chosen_check_box_tag(make, params[:makes], "makes[]") -%>
<%= make -%>
</li>
<% end %>
<h3 class="item-category">Year: </h3>
<% Vehicle.year_ranges.each do |range| %>
<li>
<%= display_chosen_check_box_tag(range, params[:years], "years[]") -%>
<%= range -%>
</li>
<% end %>
<li><%= submit_tag "Filter" %></li>
<% end %>
</ul>
</div>
<!-- Body Column -->
<div class="col-sm-9">
<div class="row">
<div class="clearfix">
<% #vehicles.each do |vehicle| %>
<div class="col-sm-6 bottom">
<h3 class="item-title"><%= link_to "#{vehicle.make} #{vehicle.model}", vehicle %></h3>
<%= image_tag(vehicle.primary_image.image_url, class: "img-responsive") if vehicle.primary_image %>
<p class="index-info"><%= vehicle.user.name %>'s <%= vehicle.year %> <%= vehicle.make %> <%= vehicle.model %></p>
<%= link_to "View Details", vehicle, class: "item-more" %>
</div>
<% end %>
</div>
</div>
</div>
</div>
the loop in question
<!-- Body Column -->
<div class="col-sm-9">
<div class="row">
<div class="clearfix">
<% #vehicles.each do |vehicle| %>
<div class="col-sm-6 bottom">
<h3 class="item-title"><%= link_to "#{vehicle.make} #{vehicle.model}", vehicle %></h3>
<%= image_tag(vehicle.primary_image.image_url, class: "img-responsive") if vehicle.primary_image %>
<p class="index-info"><%= vehicle.user.name %>'s <%= vehicle.year %> <%= vehicle.make %> <%= vehicle.model %></p>
<%= link_to "View Details", vehicle, class: "item-more" %>
</div>
<% end %>
</div>
</div>
</div>
Regards.
No need to add too much of javascript and and clearfix and all. We just need to have tweak in css.
You just need to add min-height to items. Everything will be solved. I have created a fiddle for you.
In fiddle:
Demo1 is your scenerio and demo2 is the fixed scenerio.
try resizing the viewport to see the effect on demo1 and demo 2.
https://jsfiddle.net/Anuj_Kumar/sc17mzkp/1/
If still your problem is not solved just let me know i will solve that too.
Thanks
You need to set your body code with following structure for your resolve issue. You will need to add clearfix class after every 2 item.
<div class="col-sm-9">
<div class="row">
<div class="item-layout">
<div class="item">Your content</div>
<div class="item">Your content</div>
<span class="clearfix visible-lg-block"></span>
<div class="item">Your content</div>
<div class="item">Your content</div>
<span class="clearfix visible-lg-block"></span>
<div class="item">Your content</div>
<div class="item">Your content</div>
<span class="clearfix visible-lg-block"></span>
<div class="item">Your content</div>
<div class="item">Your content</div>
<span class="clearfix visible-lg-block"></span>
</div>
</div>
</div>
According to your code, You have set 2 column(2 item) in per row. So, You will need to add clearfix class after every 2 item. but, Here, Your code is dynamic with loop. So, Here, You will need to add clearfix class dynamic every 2 item. So, You will add dynamic clearfix class with jquery according screen view.
Try following instruction with your code.
First of all, add item-layout class in your main item div. also, add item class in your loop div. following example.
<!-- Body Column -->
<div class="col-sm-9">
<div class="row">
<div class="item-layout">
<% #vehicles.each do |vehicle| %>
<div class="col-sm-6 bottom item">
<h3 class="item-title"><%= link_to "#{vehicle.make} #{vehicle.model}", vehicle %></h3>
<%= image_tag(vehicle.primary_image.image_url, class: "img-responsive") if vehicle.primary_image %>
<p class="index-info"><%= vehicle.user.name %>'s <%= vehicle.year %> <%= vehicle.make %> <%= vehicle.model %></p>
<%= link_to "View Details", vehicle, class: "item-more" %>
</div>
<% end %>
</div>
</div>
</div>
also, add following jquery for add dynamic <span class="clearfix visible-lg-block"></span> for clearfix.
<script type="text/javascript">
$(document).ready(function(){
$screensize = $(window).width();
if ($screensize > 1199) {
$(".item-layout > .clearfix").remove();
$('.item-layout .item:nth-child(2n)').after('<span class="clearfix visible-lg-block"></span>');
}
if ($screensize < 1199) {
$(".item-layout > .clearfix").remove();
$('.item-layout .item:nth-child(2n)').after('<span class="clearfix visible-lg-block visible-md-block"></span>');
}
if ($screensize < 991) {
$(".item-layout > .clearfix").remove();
$('.item-layout .item:nth-child(2n)').after('<span class="clearfix visible-lg-block visible-sm-block"></span>');
}
$( window ).resize(function() {
$screensize = $(window).width();
if ($screensize > 1199) {
$(".item-layout > .clearfix").remove();
$('.item-layout .item:nth-child(2n)').after('<span class="clearfix visible-lg-block"></span>');
}
if ($screensize < 1199) {
$(".item-layout > .clearfix").remove();
$('.item-layout .item:nth-child(2n)').after('<span class="clearfix visible-lg-block visible-md-block"></span>');
}
if ($screensize < 991) {
$(".item-layout > .clearfix").remove();
$('.item-layout .item:nth-child(2n)').after('<span class="clearfix visible-lg-block visible-sm-block"></span>');
}
if ($screensize < 767) {
$(".item-layout > .clearfix").remove();
}
});
});
</script>
<!-- Body Column -->
<div class="col-sm-9">
<div class="row">
<div class="clearfix">
<% #vehicles.each do |vehicle| %>
<div class="col-sm-6 bottom" style="display: -webkit-flex;display: flex;">
<h3 class="item-title"><%= link_to "#{vehicle.make} #{vehicle.model}", vehicle %></h3>
<%= image_tag(vehicle.primary_image.image_url, class: "img-responsive") if vehicle.primary_image %>
<p class="index-info"><%= vehicle.user.name %>'s <%= vehicle.year %> <%= vehicle.make %> <%= vehicle.model %></p>
<%= link_to "View Details", vehicle, class: "item-more" %>
</div>
<% end %>
</div>
</div>
</div>
add this style="display: -webkit-flex;display: flex;".
The problem is that your object heights are uneven. You're looking for a grid-style substitute given that you have an expectation to have these items reflow on resize.
I'd recommend using a CSS Flexbox layout on your collection container.
display: flex;
flex-wrap: wrap;
Here's a demonstration.
The other problem (as HarnishDesign noted) is that your use of the clearfix is incorrect. It puts everything after on a whole new line because it's using the clear: both rule. Read up on the clear rule here.
Edit 1
It's worth noting that the Flexbox properties are not standardized yet, but there is wide support for them.
I'm building a layout for my login page and am having problem getting my buttons to line up. I have used a custom class to center my username and password form, and would now like to have 2 equal sized buttons for log in and sign up underneath them. I tried achieving this with col that are half size of the parent, but so far they are just sized the same. Any help on what I'm doing wrong is appreciated.
html:
<div class="col-xs-4 centered">
<%= form_tag sessions_path do %>
<div class="form-group">
<%= label_tag :email %>
<%= text_field_tag :email, params[:email], class:'form-control' %><br/>
<%= label_tag :password %>
<%= password_field_tag :password, nil, class:'form-control' %><br/>
<div class="col xs-2">
<%= submit_tag "Log in", class:'btn btn-primary btnstyle' %>
</div>
<div class="col xs-2">
<%= link_to 'Sign Up', new_user_path, class:'btn btn-primary btnstyle' %>
</div>
<% end %>
</div>
</div>
css:
.btnstyle {
width:100%;
}
.centered {
float: none;
margin: 0 auto;
}
I tried to set up a fiddle, but ofc it won't work with rails tags...
figured it out, had a - missing and had to post them outside of the main col with an offset to center. Here's the final result:
<div class="col-xs-4 centered">
<%= form_tag sessions_path do %>
<div class="form-group">
<%= label_tag :email %>
<%= text_field_tag :email, params[:email], class:'form-control' %><br/>
<%= label_tag :password %>
<%= password_field_tag :password, nil, class:'form-control' %><br/>
</div>
</div>
<div class="col-xs-2 col-xs-offset-4">
<%= submit_tag "Log in", class:'btn btn-primary btnstyle' %>
</div>
<div class="col-xs-2">
<%= link_to 'Sign Up', new_user_path, class:'btn btn-primary btnstyle' %>
</div>
<% end %>
</div>
i am wanting to put each result i get from my model into a span 3 using twitter bootstrap, this is what i have done so far but rather than each result alligning vertically they are stacked horizontally. is there anything that i am missing here?
<div class="container">
<div class="row">
<% #recipes.each do |r| %>
<div class="span3">
<div class="thumbnail">
<%= image_tag r.avatar.url(:myrecipes) %>
</div>
<h4><%= link_to r.dish_name, r %></h4>
<hr>
<p><%= r.description %></p>
<p><%= link_to "Edit Recipe", edit_recipe_path(r.id) %></p>
<p><%= link_to "Delete Recipe", recipe_path(r.id), :confirm => "Are you sure?", :method => :delete %></p>
<p><%= link_to "Add to favorites", {:controller => 'favourites', :action => 'create', :recipe_id => r.id}, {:method => :post } %></p>
<% end %>
</div><!--/span3-->
</div><!--/row-->
</div>
move your </div><!-- /span3 --> before the <% end %>.
For now, in your loop you open as many divs as you have recipes objects, but only close one outside of the loop.