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.
Related
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.
I know questions about broken links get asked all the time, however my issue seems a bit different, and none of the solutions have worked.
Right now none of the links to other websites in my nav section worked when clicked. It registers that they are there, and if you right click it and select "open in new tab" it works, but otherwise, nada. A few relative links (if thats the term for the href="#xxx" link to content on the page) to modal popups work fine though.
My HTML Code is listed below, as well as a Pastebin link to the CSS (so that I don't clutter up the box).
Removing the class="navigation" from the list tag seems to fix the link issue. Leaving the class on the tag but removing all the relevant CSS from the stylesheet, however, does not eliminate the issue and just removes the styling. I can't figure out why this would be the case.
I've tried setting the z-indices of my background, menu and nav to 1,2,3 (and 3,2,1 just for the hell of it) respectively so that they don't interfere, as recommended in other questions here, but to no avail. Anyone have any ideas?
CSS: http://pastebin.com/1KVTdBvF
Site: http://www.magratheamedia.com/npo
<div class="menu">
<div class="container clearfix">
<div id="logo" class="fleft">
<img src="images/logo.png" />
</div>
<div id="nav" class="fright">
<ul class="navigation">
<li data-slide="1">Home</li>
<li>Forum</li>
<li>Wiki</li>
<li>Government</li>
<li>Charter</li>
<li>In-Game</li>
<li>Applicants</li>
<li>IRC</li>
<div class="clear"></div>
</ul>
</div>
</div>
Your problem isn't CSS, it's your jQuery. This, in particular:
links.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});
When you find your links, like this:
var links = $('.navigation').find('li');
You have to somehow exclude the ones that go to external sites. Maybe by giving the modal links their own class name or something.
I'm using zurb foundation to help me make a website responsive. The idea is that the header should look like this on larger screens (and it does):
####### |------ Search ----------| %%%%%%%%%%%
And this on smaller screens (which it doesn't):
###### %%%%%%%%%%
|---- Search ---|
There are two problems. The first is that the mobile one actually looks like this:
######
|---- Search ---|
%%%%%%%%%%
And the second is that the Search bar is unclickable. I tried changing the z-index and making the row show hidden content, to no avail. For the layout I tried push and pull mobile, but that only made things a lot worse. Code for the layout is below .
Interestingly, the search button still shows up, and is clickable, even though it should not show up, and is in the same form as the search bar.
Is what I'm trying to do possible with zurb foundation? I really, really want to avoid having two different search forms...
I changed the scss variables for zurb foundation to the following just for reference
$totalColumns: 16;
$mobileTotalColumns: 8;
$columnGutter: 0;
I have a header like so:
<div class="row">
<div class="three mobile-three columns"></div>
<div id="search" class="eight mobile-eight columns">
<div class="row">
<div class="thirteen mobile-eight columns">
<!-- text input for search -->
</div>
<div class="hide-on-phones hide-on-tablets three columns">
<!-- Submit button for search -->
</div>
</div>
</div>
<nav class="five mobile-five columns">
<ul class="right">
<li><%= link_to 'Teams', '#' %></li>
<li><%= link_to 'Records', '#' %></li>
<li><%= link_to 'Settings', '#' %></li>
</ul>
</nav>
</div>
Thanks in advance for any tips or suggestions!
I've created a project on git hub that demos the desired behavior.
https://github.com/EdCharbeneau/foundation-ordering-stacking-help
You need to use a combination of mobile columns and source ordering plus a media query to achieve what you wanted to do.
Note: The example uses the HTML/CSS version, not the Ruby/SASS version. But that doesn't effect how the code works.
I am creating an aspx page which appears fine in mozilla firefox but does not look so great in Internet explorer. In Mozilla its appearing something of this format:
<form>
some stuff
<div class="left">
<div class="right">
</form>
but looking at the source code of the page loaded in IE 8, it looks sometbhing like this:
<form>
some stuff
</form>
<div class="left">
<div class="right">
What approach should I take to start fixing it? So far I've tried playing around with the css and fixing paddings and margins but nothing works :/
Thanks so much
C
I think the OP's code is just pseudocode to illustrate his point. If the left and right divs are floated, you might need to add a clearing element after them, to make the form expand around it.
<form>
<div class="left">Stuff</div>
<div class="right">Stuff</div>
<br style="clear: both;" />
</form>
There are better methods than <br style="clear:both; />, but you can try it to see if it fixes your problem.
I wrote an application using ASP.NET MVC, in this application I have an Index view which renders multiple partial views. The application works fine in both IE and Google chrome but does not seem to work in Firefox. Does Firefox have any issues when rendering partial views or is there something extra that I have to add to my code? This is my code:
<div id="tabs">
<ul class = "ui-tabs-nav">
<li>Some stuff 1</li>
<li>Some stuff 2</li>
<li>Some stuff 3</li>
</ul>
<div id="tabs-1">
<% Html.RenderPartial("PartialView1"); %>
</div>
<div id="tabs-2">
<% Html.RenderPartial("PartialView2"); %>
</div>
<div id="tabs-3">
<% Html.RenderPartial("PartialView3"); %>
</div>
</div>
A partial view is not 'rendered' by the browser at all. It's stuffed into the output stream of the server at the right point as the page is generated.
Most likely you have some malformed HTML (elements crossed or not closed), and so you're seeing different things on different browsers.
Update: I can't, at a glance, see anything wrong with that sample you've just added, but you need to look at the source for the whole page (at the browser), not just a fragment.
Check your HTML
may be you wrote the script tag like this
<script type="text/javascript" />
it should always be written like this:
<script type="text/javascript"></script>
Could be some issue with jQuery-ui css file or the javascript-file not being properly referenced. Maybe you can post that code as well ?
Ha, I finally solved it! Silly me set the script type to jscript instead of javascript:
<script type ="text/jscript">
instead of
<script type ="text/javascript">