I am trying to make this layout with Twitter Bootstrap (only the boxes) :
Basically, it is a youtube embedded video and two equal size boxes to its right.
I have this right now (haml) :
.row
.span8
/ embedded code
.span4
/ I need to put two boxes here... how?
You can stack the .span* blocks inside a .row-fluid container which you can then nest inside another span* block to create the effect you're looking for. Try this for example:
HTML
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<div class="big box">
box
</div>
</div>
<div class="span3">
<div class="row-fluid">
<div class="span3">
<div class="box">
box
</div>
</div>
<div class="span3">
<div class="box">
box
</div>
</div>
</div>
</div>
</div>
</div>
Notice how i nested the two side blocks one on top of each other contained within a .row-fluid container inside a another .span* block t stack them up.
Now with a little CSS you we can stretch the stacked .span* blocks to the width of the parent block to create a column:
CSS
.row-fluid [class*="span"] .row-fluid [class*="span"] {
margin-left: 0;
width: 100%;
}
Demo: http://jsfiddle.net/k27S5/show/
Don't know much of HAML but after taking a look at the documentation the setup should look something like this:
HAML
.container-fluid
.row-fluid
.span9
content
.span3
.row-fluid
.span3
content
.span3
content
If you're using the fixed width layout:
.row
.span8
.span4
.row
.span4
.row
.span4
If you're using fluid layout:
.row-fluid
.span8
.span4
.row-fluid
.span12
.row-fluid
.span12
This assumes you're not concerned about matching the heights of the two columns, which wouldn't be handled by Bootstrap anyway.
Like most grid based systems, the one used in twitter bootstrap will help you lay things out by rows but NOT by columns.
I'm assuming you want the big box on the left to be the same height as the two boxes on the right. If that's the case the easiest way to do it is with tables. Yes, people give tables a bad rap but for certain layouts it's the simplest solution.
<table>
<tr>
<td>big box on left</td>
<td>
<div>small top box on right</div>
<div>small bottom box on right</div>
</td>
</tr>
</table>
Then style accordingly
Related
Using Rails with bootstrap I'm trying to layout a page which will have an unknown number of blocks of content on it. On small screens there should be 1 column, on medium screens 2 columns, and on larger screens 3 columns.
Such as...
However I can't work out how to slice up the content so it works reliably. Currently I have this in my view :
<div class="container">
<% #posts.each_slice(3) do |posts| %>
<div class="row">
<% posts.each do |post| %>
<div class="col-sm-6 col-lg-4">
<img src="<%= post.image %>" class="img-responsive">
<h2><%= post.title %></h2>
<h6><%= post.created_at.strftime('%b %d, %Y') %></h6>
<p> <%= raw(post.body).truncate(358) %></p>
</div>
<% end %>
</div>
<% end %>
</div>
But this produces...
I've tried changing the each_slice(3) and class="col-sm-6 col-lg-4" however regardless of the combinations I choose one of the medium or large views breaks.
How do I reliably achieve the desired effect above regardless of the number of items on the page?
When the content of the columns is the same height, the grid wraps evenly:
http://www.codeply.com/go/8w2INqz3e1
When the content of the columns is different heights, the grid wraps unevenly, causing gaps..
http://www.codeply.com/go/1LBtvtDnzA
To fix this, you need to use responsive resets as described in this answer..
Bootstrap row with columns of different height
For example, a CSS clearfix approach in your case would work like this..
#media (min-width: 1200px) {
.row > .col-lg-4:nth-child(3n+1) {
clear: left;
}
}
#media (max-width: 992px) {
.row > .col-sm-6:nth-child(2n+1) {
clear: left;
}
}
http://www.codeply.com/go/LDqxBlyULr
I have below view which generates PDF invoice using MvcRazorToPdf library
<table border="0">
<tr>
<td>
<h1>Company Name </h1>
</td>
<td>
<div style="text-align:right;margin-right:0px;">
Invoice
</div>
</td>
</tr>
</table>
<hr/>
<div>
#Model.InvoiceNum
</div>
Above code generates below view in pdf
But how much ever I style the above div within td for invoice, I am not able to move the Invoice text to the right side of the pdf. I've tried adding link to bootstrap.css which doesn't work either. Anyone have any solution for this? Has anyone worked on styling the pdf with MvcRazorToPdf librabry?
Your text alignment is being respected, its just that by default, you table and its cells will be collapsed to fit the content (easy to check by using your browser tools to inspect the elements).
Give your table (or its cells a width), for example
<table style="width:100%;">
However, using <table> elements is not good practice (refer Why not use tables for layout in HTML? and Why Tables Are Bad (For Layout*) Compared to Semantic HTML + CSS.). Instead you can use floats or relative/absolute positioning, for example
<div style="position:relative;">
<h1>Company Name</h1>
<span style="position:absolute;right:0;bottom:0">Invoice</span>
</div>
or
<div>
<h1 style="display:inline-block">Company Name</h1>
<div style="float:right;margin-top:40px;">Invoice</div>
</div>
I've been looking through some posts on the internet about Materialize in Rails, however this area seems to be very fuzzy. I am currently using the materialize-sass gem.
I didn't find very many helpful posts, I decided to resort here.
Here's my code for a page I have pages/discover.html.erb
<%= stylesheet_link_tag "https://fonts.googleapis.com/icon?family=Material+Icons" %>
<div class="row">
<div class="col s12 m5">
<div class="card">
<div class="card-image b">
<img src="http://i.huffpost.com/gen/1456585/images/o-CRAIG-COBB-facebook.jpg">
<span class="card-title">Cregg Cobb Is Back At It Again, But Only This Time He Has Guns</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<div class="chip">
<img src="http://i.huffpost.com/gen/1456585/images/o-CRAIG-COBB-facebook.jpg" id="cobb">
Like
</div>
</div>
</div>
</div>
</div>
I want to make the <img> darker by using filter: brightness(50%);
How do I go about doing this? Where do I begin?
Bonus: If you know where I can add the jQuery stuff that Materializecss.com mentions when discussing components and transitions, it would be greatly appreciated!
Since it's just a single override, you could add a new .css file to assets (or wherever you're storing static stuff), with a !important class:
img.darker {
filter: brightness(50%) !important;
}
Then import it at the top of your template:
<%= stylesheet_link_tag "/path/to/css.file" %>
And add the class to your image tag:
<img src="/my/img.png" class="darker">
Alternatively you could just style the image tags individually:
<img src="/my/img.png" style="filter:brightness(50%)">
playing around with rails and got a little problem with the layout.
I have a simple home mvc.
Content of the home view is just
<h3>Home</h3>
<p>content</p>
I have my application view for overall design with some partials and so on.
<section>
<header>
<div class="pull-right">
<a class="btn btn-small">Edit</a>
<a class="btn btn-small">Blurm</a>
</div>
<h3>Head goes here</h3>
</header>
<%= yield %>
</section>
Now I come to my main Part for displaying the different pages with yield.
How should i split up the template? Should I put the complete application part to the home view to display the Heading in the right place? Or is there a possibilty to get the Heading different from the yield?
Any Suggestions?
P.S.: If someone have a nice tutorial or website for explaining How to structure and plan the views. A comment below would be nice.
best regards
dennym
I think that you are asking about using named yields.
From your structure, we add a yield named header
<section>
<header>
<div class="pull-right">
<a class="btn btn-small">Edit</a>
<a class="btn btn-small">Blurm</a>
</div>
<h3><%= yield :header %></h3>
</header>
<%= yield %>
</section>
And then we set the content for that named yield:
<% content_for :header do %>
My header
<% end %>
<p> Rest of page ...</p>
If you are just trying to change you header periodically I would suggest either you have different layouts that have different headers which you could specify in your controller by
layout :layout_name, or dynamically change header content using js.
Is there any way to give each record in a table its own css class? Im displaying records as partials but would like to be able to give each partial its own individual css attributes. Maybe a way of assigning css rules by a div's name and id of the record combined?
EDIT
Sorry for the poorly written question I'll try and explain in more detail.
I have a table of venue records being displayed on the index page in partials and want each one to have an icon placed on a map off to the left side of the screen (map_container). The map is just a hand drawn image as the background of a fixed width and height div.
Venue index.html.erb:
<div class="map_container">
</div>
<div class="filter_options_container">
<form class="filter_form", method="get">
<fieldset class="filter_form_fieldset">
<legend class="filter_form_fieldset_legend">Choose an area:</legend>
<% Area.all.each do |a| %>
<span class="filter_form_checkbox_label">
<%= check_box_tag("areas[]", a.id, false, :class => "styled")%>
<%= a.name %><br>
</span>
<% end %>
<input type="submit" value="Filter" />
</fieldset>
</form>
</div>
<div class="venue_partials_container">
<%= render :partial => 'venue', :collection => #venues %>
<div class="clearall"></div>
<%= will_paginate #venues %>
<div class="venue_partial_button">
<%= link_to 'add a new venue', new_venue_path %>
</div>
</div>
<div class="clearall"></div>
I was thinking a way of doing this could be to make another table of icon records where one venue belongs to one icon and one icon belong to one venue. Then yielding the map div area to partials of the icon records. The differant css classes could then be something like:
.icon(with_venue_id_1) {
position: absolute;
top: 10px;
left: 10px;
}
.icon(with_venue_id_2) {
position: absolute;
top: 15px;
left: 20px;
}
etc etc....
Which I know is so horrifically bad it may bring a bit of sick in your mouth but my zero experience of programming ever has led me to this. I imagine theres so many better ways of doing it but this could work as a learning aid for me at least.
I would eventually like these icons and their positioning to be added from the running app itself but for now I'm happy just to get something working.
Thanks for any help, its much appreciated.
Something like this?
<% #record.each do |r| %>
<tr class="<%= r.id %>">
<!-- Or some other value from the record? -->
...
Not sure I understood the question completley.