I'm using bootstrap-sass to integrate Twitter Bootstrap in Rails but I'm having issues with the browser horizontal scrollbar showing without the need for it.
Sample code in a Rails View:
<div class="row-fluid">
<div class="span4"> </div>
<div class="span8">
<table>
<tr>
<td><%= image_tag("up-arrow.jpg") %></td>
<td><h3> Select a Maintenance category </h3></td>
</tr>
</table><br>
</div>
</div>
</div>
I can't find why it does it and how to fix it.
See these links examples: http://d.pr/hLQd and http://d.pr/LOOP (Look at the bottom horizontal scroll)
I fixed this particular issue by overwriting the gridGutterWidth value from 20px (default) to 30 or 35px.
Don't think it's a Bootstrap bug though.
Thanks!
Related
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'm trying to make a simple website following the One Month Rails tutorial online, and since bootstrap is constantly updating I've decided to mess around with it by myself.
I have the following file home.html.erb and tried to apply the jumbotron effect from bootstrap
http://getbootstrap.com/components/#jumbotron
<div class = "jumbotron">
<h1>Welcome to One Month Rails</h1>
<p>
You've found the home page!! <%= link_to "Google", "http://www.google.com"%>
</p>
<p>
<%= link_to "Sign Up Now!", "#" %>
</p>
</div>
The page, however, does not show the jumbotron effect. What am I doing wrong? I know that bootstrap should be working because I've added some styling effects using bootstrap classes like nav and btn
Edit: I've read from a few other questions and apparantly the jumbotron class is bugged with the rails gem. I will try to manually incoporate bootstrap and see how it turns out.
Can you try adding something else to this particular page and style it using bootstrap (like a simple button)? That way you can ensure bootstrap is working on this specific page.
I don't see any problem with the code you pasted.
EDIT:
Try this sample code:
<div class="container">
<div class="jumbotron">
<h1>Welcome to landing page!</h1>
<p>This is an example for jumbotron.</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more</a>
</p>
</div>
</div>
I'm using bootstrap upgrade service for upgrading from Bootstrap 2.x to 3.x
http://upgrade-bootstrap.bootply.com/
But I have a problem converting the razor syntax. For example I have:
<div class="row-fluid">
<div class="span12 form-actions">
<p>
<a class="btn" href="#Url.Action("ChooseAddItem", "Home")">Action</a>
</p>
</div>
</div>
And service returns:
<div class="row">
<div class="col-md-12 form-actions">
<p>
<a class="btn btn-default" href="#Url.Action("
chooseadditem="ChooseAddItem" home="Home">Action</a>
</p>
</div>
</div>
Look what happens to Url.Action function. This is only small example. I have a lot of files and a lot of code.
Is there any other way of converting razor views to bootstrap 3.x?
I'm the author of http://upgrade-bootstrap.bootply.com/
The problem you're seeing is because the service uses jQuery to manipulate the DOM and structure of your HTML. A headless browser is being used, and this changes the actual HTML content upon conversion.
I've added a new switch ("Modify nav and modal structure") to prevent this from happening, but as a result the structure of any modals and navs will not be converted to Bootstrap 3.
So, if you want to keep the Razor content the same, just uncheck the "Modify nav and modal structure" checkbox before you "Convert to Bootstrap 3" and it should work for you.
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.
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