How to get my wells to align vertically - css

I've got a page that shows 3 wells within another well. http://visualhaggard.org/illustrations/2. There is a span5 on the left and span 7 on the right. The illustration on the right is in one well while the 2 supplements on the right are each in their own well. The header portions, "Other illustrations...", are not in those wells. If I move the headers within the wells, the wells become offset with the bottom one about 20px to the right of the top one, like so:
The following description is from my local environment, not what's pictured in the link:
The wells sit in a normal bootstrap span7
And here is the styling for the supplement wells:
.well-associated-thumbnails {
height:250px;
overflow:auto;
background-color: white;
border-style: solid;
border_color: black;
}
Here's the code from the well on top:
<div class="span12 well-associated-thumbnails">
<h5>Other Illustrations from <%= #novel_name %></h5>
<% #related_illustrations_by_novel.each_slice(4) do |set| %>
<div class="row-fluid">
<% set.each do |illustration| %>
<div class="span3 ">
<div align="center"><%= link_to image_tag(illustration.aws_image_thumbnail_url), illustration %>
<br />
<span style="font-size:x-small;">
<%= illustration.short_name %>
</span>
<br />
</div>
<br />
</div>
<% end %>
</div>
<br />
<% end %>
</div>
And this is the well on the bottom:
<div class="span12 well-associated-thumbnails">
<h5>Other Illustrations with similar Tags:</h5>
<% #related_illustrations_by_tags.each_slice(4) do |set| %>
<div class="row-fluid">
<% set.each do |illustration| %>
<div class="span3 ">
<div align="center"><%= link_to image_tag(illustration.aws_image_thumbnail_url), illustration %>
<br />
<span style="font-size:x-small;">
<%= illustration.short_name %><br />
<%= link_to illustration.edition.novel.name, illustration.edition.novel %><br />
</span>
</div>
<br />
</div>
<% end %>
</div>
<br />
<% end %>
</div>
Can anyone advise on why the wells get messed up when I put the headers inside of them? Thanks.

I simply changed <div class="span12 well-associated-thumbnails"> to <div class="well well-associated-thumbnails"> in the necessary locations.

Related

Simple form and bootstrap incompatible css

I am trying to copy this simple design into edit mode.
Here is the code displaying the image above :
<div class="user-description-container col-md-6 col-md-offset-3">
<div class="col-md-3">
<%= image_tag #user.image.standard.url, class: "user-picture img-circle" %>
</div>
<div class="user-description-box col-md-7">
<div class="user-name"><%= #user.full_name %></div>
<div class="user-stats">
<div class="user-stats-debates inline-flex"><b class="spacing-margin-right">
<%= #user.groups.length %></b><% if #user.groups.length == 0 %>
<p> débat</p><% else %><p> débats</p>
</div>
<% end %>
<div class="user-stats-followers inline-flex"><b class="spacing-margin-right"><%= #user.followers.length %></b> <%if #user.followers.length == 0%>
<p> disciple</p> <% else %><p> disciples</p>
<% end %>
</div>
</div>
<div class="user-description">
<%= #user.description %>
</div>
</div>
<div class="col-md-2 edit-profile">
<% if current_user == #user %>
<%= link_to(edit_user_path(#user),:class =>"edit-button") do %>
<i class="glyphicon glyphicon-pencil"></i>
<% end %>
<% end %>
</div>
</div>
I copied the main design of the page to the edit mode.
Unfortunately, here is what I get :
I am using the simple form gem with rails and I can't get bootstrap working properly. Here is my code on the edit mode :
<div class="container">
<div class="row">
<div class="user-description-container col-md-6 col-md-offset-3">
<%= form_for #user do |form| %>
<div class="user-upload-preview col-md-3">
<%= image_tag #user.image.standard.url, class: "user-picture img-circle object-fit-covered" %>
<div class="form-input">
<label class="btn btn-sm btn-primary image-browse-button" >
Choisir une photo
<span style="display:none;">
<%= form.file_field :image %>
</span>
</label>
</div>
</div>
<div class="user-description-box col-md-7">
<div class="user-name">
<%= #user.full_name %>
</div>
<div class="user-stats">
<div class="user-stats-debates inline-flex"><b class="spacing-margin-right">
<%= #user.groups.length %></b><% if #user.groups.length == 0 %>
<p> débat</p><% else %><p> débats</p>
</div>
<% end %>
<div class="user-stats-followers inline-flex"><b class="spacing-margin-right"><%= #user.followers.length %></b> <%if #user.followers.length == 0%>
<p> disciple</p> <% else %><p> disciples</p>
<% end %>
</div>
<div class="form-input inline-flex">
<%= form.text_field :description, placeholder: "Description", class: "form-control" %>
</div>
<div class="form-input save-edit">
<%= form.submit "Sauvegarder", class: "form-control profile-submit-button" %>
</div>
<% end %>
<div class="col-md-2">
</div>
</div>
</div>
</div>
</div>
Any answer would be much appreciated.
So in terms of the way you are using bootstrap you are supposed to input all the items that you want in a row which you did but it all the col-md- should add up to a total of 12 for it to be a complete row you have col-md-7 which you should add with an col-xs to make it full also in terms on how to make it like this I think this should suffice
here is some layout that looks like what you are trying to do
<div class="container">
<div class="row">
<div class="col-md-4">
IMAGE
</div>
<div class="col-md-8">
<div class="header">
<h1 class="page-header text-center">MY NAME</h1>
</div>
<div class="row">
<div class="col-md-6">
<h3 class="text-center">insert contents here</h3>
<center>
<div class="center">
<button class="btn btn-primary">BTN</button>
</div>
</center>
</div>
<div class="col-md-6">
<h3 class="text-center">insert contents here</h3>
<center>
<div class="center">
<button class="btn btn-primary">BTN</button>
</div>
</center>
</div>
</div>
</div>
</div>
</div>
It looks like you are inputting user information stay away from #user tags and information like .file and other such things use tags and set them with an ID and then be sure use javascript to manipulate them

Rails - how can I display left and right layout for image and its content in every other row

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 %>

Why is my bootstrap clearfix breaking in my Rails collection?

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.

Add div outside bootstrap grid

I try to use bootstrap twitter to format my site. When I add my several divs into the row-column format. I ve got a 9x9 grid with divs. I want to put one more element outside the grid in a fixed position. I use row-fluid and span class for my elments. How can i place my last element fully right of my page ??
My Code:
<body onload='drawAll();'>
<section>
<div class="container-fluid">
<div class="row-fluid">
<div id="mapWidget" class="debug span8">
<canvas id="map"
width="500"
height="280"
></canvas>
<canvas id="layer"
width="500"
height="280"
style= "position:absolute;
left:0px;
top:0px;"></canvas>
</div>
</div>
<div class="row-fluid">
<div id="profiles" class = "span4">
<script id="profileTemplate" type="text/template">
<div class= "hashTags" id = 'redLine'>
<h1> <img src="images/tagIcon.png"/> HASHTAGS</h1>
<br><font size = "6"><%= tagsCloud.tags[0] %> </font>
<%= tagsCloud.tags[1] %>
<%= tagsCloud.tags[2] %>
<%= tagsCloud.tags[3] %>
<font size = "5"><%=tagsCloud.tags[4] %> </font>
<%= tagsCloud.tags[5] %>
<%= tagsCloud.tags[6] %>
<%= tagsCloud.tags[7] %></br>
<br> <%= tagsCloud.tags[8] %>
<%= tagsCloud.tags[9] %>
<%= tagsCloud.tags[10] %>
<font size = "6"><%= tagsCloud.tags[11] %> </font>
<%= tagsCloud.tags[12] %>
<%= tagsCloud.tags[13] %>
<%= tagsCloud.tags[14] %>
<%= tagsCloud.tags[15] %></br>
<br><font size = "6"><%= tagsCloud.tags[0] %> </font>
<%= tagsCloud.tags[1] %>
<%= tagsCloud.tags[2] %>
<%= tagsCloud.tags[3] %>
<font size = "5"><%= tagsCloud.tags[4] %> </font>
<%= tagsCloud.tags[5] %>
<%= tagsCloud.tags[6] %>
<%= tagsCloud.tags[7] %></br>
</div>
</script>
</div>
<div class = 'usersCloud debug span2'>
<h2 ><img src="images/chat.png"/>TOP COMMENTERS</h2>
<img src="images/userCloud.png" />
</div>
<div class = ' button span2'>
<img src="images/menu.png"/>
</div>
</div>
<div class="row-fluid">
</div>
<div class="row-fluid">
<div id="footer" class="debug span4"><img src="images/logo.png"/></div>
</div>
My very special element is the element with menu png image, when i put it outside the grid, it has unexpected behavior! Css code:
.button{
padding: 10px 10px 10px 10px;
display:inline-block;
width: 24px;
right:-80px;top:0px;
position:fixed;
}
I think your answer is in your question...
Just add your div outside the bootstrap framework (so, not in a row or column) and then style it.
It won't take part in the responsive stuff that bootstrap applies but you can handle that by extending the bootstrap media queries with your own code...

Align Bootstrap content to the right of an image within a thumbnail

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>

Resources