I'm using Twitter Bootstrap for my CSS, and I have a row that can show up to three courses per row. The problem I have is that when there is only one or two courses for a row, the footer (which is the content below the courses) moves up(please see my image below to see an example). How do I ensure that the content below the courses doesn't move up, even when there is only 1 or 2 courses?
Here's the code in my view:
<div class="row">
<% #courses.each do |course| %>
<div class="col-md-4">
<%= course.name %>
</div>
</div>
</div>
Here's the complete html and css.
This is an example page.
Try to put your .pagination class inside a div and then add clear: both to your css.
Related
I can see lots of answers for this but not quite the right solutions..
Essentially i'm displaying numerous emails in a thread (looks like iMessage a bit) on a page. The messages are looped within a repeated element, with the HTML email displayed inside it.
I have no control over the HTML in the email content as it could be from anywhere.. the problem is that the HTML in the email is inheriting CSS styling from the page style sheets.. this is making it all look weird..
I can't overrule the CSS with a more specific CSS, as there could be any classes or id's coming in the email that match those in the main style sheet..
I've tried adding all:initial to the wrapper div like this:
div.sentMsgBody *{
all: initial !important;
}
This however seems to override any styles that comes with the email and so looks really naff..
Anyone got any ideas how to display the email content with its own HTML without taking on the main styles?
Thanks!!
Addition:
I've been asked to show my code, though that's quite tricky...
there's loops of a certain div in the page like this:
<div id="page">
<div class="sentMsgBody"></div>
<div class="sentMsgBody"></div>
<div class="sentMsgBody"></div>
</div>
Of course each loop of this div could have any HTML at all as its showing emails...
eg:
<div id="page">
<div class="sentMsgBody">
<div class="Header">My Email</div>
<div class="Main">This is my email body</div>
<div class="Footer">Email Footer</div>
</div>
<div class="sentMsgBody"> ... ... </div>
<div class="sentMsgBody"> ... ... </div>
</div>
Here the Header and Footer etc may take css from the main page...
I thought about iFrames but they are messy, i don't know how big the content will be for each one, are a bugger with being responsive too, and there could be dozens that have to be created dynamically from the content of each div that is loaded by ajax from a handler.
I understand the problem, as described and answered here.
I have quite a complicated layout with a sidebar navigation, a top navigation, a fluid-container and then page-title and page-body structure for each page. So just adding another container did not solve the problem as suggested in that answer.
Once I get into the page-body, all the rows are stretching 'outside' the parent page-body.
Notice I have added padding to the default container-fluid to 'pull' all the content in from each side of the page. Removing them does not fix it.
I've tried every change I can think of except removing the padding from the default row, because I'm pretty sure that is a no-no.
Anyone have any idea how to get those pesky form controls to stay 'inside' the page body?
There is two solution either give an additional class to row and manipulate its layout or don't use row use <div class="col-md-*" /> without parent .row class div as many times u want and use <div class="clearfix"> if you want to break forcefully to next row
EDIT:-
For example
<div class="row">
<div class="col-md-4">div1</div>
<div class="col-md-4">div2</div>
<div class="col-md-4">div3</div>
</div>
<div class="row">
<div class="col-md-4">div4</div>
<div class="col-md-4">div5</div>
<div class="col-md-4">div6</div>
</div>
The same can be achieved without .row class
<div class="col-md-4">div1</div>
<div class="col-md-4">div2</div>
<div class="col-md-4">div3</div>
<div class="clearfix">div4</div>
<div class="col-md-4">div5</div>
<div class="col-md-4">div6</div>
<div class="col-md-4">div1</div>
I have an image model and each image has related entries, which are also images. I want to display the related three entries in a row depending on how many of them there are. I am using bootstrap.
This is what I have written so far:
<% #image.related_entries.each.in_groups_of(3, false).each_with_index do |entry_row, i|
<div class="row_thumbnails">
# In row 1 I want 3 entries(images displayed in thumbnail look)
</div>
<%end%>
Place the images in divs that use bootstraps column classes. A bootstrap container is 12 columns wide, so you can place them in the class col-md-4 which will total 12 for every 3 images. Info on the bootstrap grid system.
Try using each_slice
<% #image.related_entries.each_slice(3) do |related_img_slice|
<div class="row">
<% related_img_slice.each do |related_img|
<div class="col-md-4">
<%= image_tag(related_img.location) %>
</div>
<% end %>
</div>
<% end %>
This is probably pretty simple but I'm having issues with my erb in ruby interfering with my bootstrap layout. I'm using a partial to render a simple comment form and depending on where I start/end my do block, it totally screws with my bootstrap layout. I was under the impression that the only thing affected is code within <%= %>. Heres what I have currently. I've been moving it around with little success.
<% #comments.each do |comment| %>
<ul id="comments" class="comments">
<li class="comment">
<div class="clearfix">
<h4 class="pull-left"><%= comment.name %></h4>
<p class="pull-right"><%= comment.created_at %></p>
</div>
<p>
</p>
</li>
</ul>
</div>
<% end %>
The above is currently pushing my right two columns underneath the comment form. If I surround only this
<em><%= comment.content %></em>
with my block it works fine. Anything beyond that as I have above screws it up. Any input would be appreciated as I've run into this before. Thanks.
I figured it out. Thanks to Anthony. Removing the div didn't help initially but it was the source of the problem. I needed to remove the div and THEN move my do block down to only include the affected markup.
I have two views in a Drupal page with the following structure:
<div>
<div>Some content</div>
<div> View 1 </div>
<div> View 2 </div>
</div>
Now I want a wrapper div covering the two views:
<div>
<div>Some content</div>
<div class="wrapper">
<div> View 1 </div>
<div> View 2 </div>
</div>
</div>
What is the best and easiest way to do this?
A cleaner way would be to use the views_embed_view function to get the output from the two views, which you then wrap in a div.
Where to put this code and how to do it, would depend on how you are doing things now. You could create a block for it and gain the flexibility of blocks.
You'll want to create a custom .tpl file for this. It would be something like, but not exactly:
views-view-viewname.tpl.php
To find the file name, edit the views then look under Basic Settings > Theme.
You can also use Views attachments (Google around to figure out how to make them). So make View 1 a normal view and attach View 2 to appear after View 1. You will get a wrapper div around both the views.