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...
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 %>
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.
If you look at the twitter-bootstrap website their jumbotron touches their nav-header. That's what I'm trying to replicate.
I added it to the top of my valuations index like so:
<div class="jumbotron">
<div class="container">
<h1>Values <small>subjective, put here whatever inspires you. </small></h1>
</div>
</div>
I also tried it without the container even though bootstrap says,
"To make the jumbotron full width, and without rounded corners, place it outside all .containers and instead add a .container within."
Is it because my application.html.erb is broken down into columns and so the jumbotron will only expand to the width of the col-md-9?
<body>
<%= render 'layouts/header' %>
<% flash.each do |name, msg| %>
<%= content_tag(:div, msg, class: "alert alert-info") %>
<% end %>
<div class="container-fluid">
<div class="container">
<div class="col-md-9">
<%= yield %>
</div>
<div class="col-md-3">
<% if current_user.present? %>
<%= render 'layouts/sidebar' %>
<% end %>
</div>
</div>
I tried putting in its own partial but then there was padding between the nav-header and the jumbotron that I don't want. Like I said I want it like the bootstrap site. The other problem with a partial is I'd need a lot of them because I want to change the words in the jumbotron depending on the page.
How can we do it like bootstap?
Thanks for your time!
Yes, it's because whatever is rendered in the <%= yield%> gets wrapped in col-md-9. You can either:
close col-md-9 in views where you want to have the full-width jumbotron, and re-open it again in the footer.
don't use col-md-9 in application.rb if most of your views need to be expanding to full width.
EDIT:
To avoid repetition, you can paste the jumbotron styling in between your layouts/header and container-fluid, and use a variable for populating it with page-specific text. Here is what I mean:
<%= render 'layouts/header' %>
<% flash.each do |name, msg| %>
<%= content_tag(:div, msg, class: "alert alert-info") %>
<% end %>
<div class="jumbotron">
<p class="text-center">
<%= #jumbotext %> <!-- this variable should be assigned in your controller action-->
</p>
</div>
<div class="container-fluid">
<div class="container"> <!-- check this too. not sure why you have two containers-->
<div class="col-md-9">
...
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.
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>