in my template x.pdf.erb site i have linked all the stylesheets and javascript tags:
<%= wicked_pdf_stylesheet_link_tag "bootstrap.css" -%>
<%= wicked_pdf_stylesheet_link_tag "style.css" -%>
<%= wicked_pdf_stylesheet_link_tag "styleUmowa.css" -%>
<%= wicked_pdf_stylesheet_link_tag "animate.css" -%>
<%= wicked_pdf_javascript_include_tag "application" %>
When the pdf site is generated, everything is good except bootstrap grid system, i mean wicked pdf ignores my:
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
</div>
So, it`s displayed like normal divs without bootstrap grid. Can you help me with this?
I've came across the same problem. There are several solutions:
Upgrade your wkhtmltopdf binary to version >= 0.12, then add :viewport_size option to render, something like this:
respond_to do |format|
format.html
format.pdf do
render pdf: "my_pdf",
viewport_size: '1280x1024'
end
end
Or you can just use col-xs-* classes
Or create pdf.css.scss (I'm using bootstrap-sass) with following content:
#import "bootstrap/variables";
#import "bootstrap/mixins";
#include make-grid(sm);
#include make-grid(md);
#include make-grid(lg);
Don't forget to include it with <%= wicked_pdf_stylesheet_link_tag "pdf.css" -%>
For plain css you will have to copy-paste all .col-sm-*, .col-md-*, .col-lg-* rules from bootstrap.css into your pdf.css, BUT without #media wrappers, it's important.
The above solutions don't work with Bootstrap 4 as of now. Bootstrap 4's grid system is built on the use of flexbox, which is not supported by wicked_pdf, due to its dependency on wkhtmltopdf.
In order to get a simple grid working while using Bootstrap 4, it's best to define your own grid by using the width w-* and display d-* commands, in order to overrule the display: flex setting.
Example:
<div class="container">
<div class="row d-table-row">
<div class="col w-25 d-table-cell"></div>
<div class="col w-25 d-table-cell"></div>
<div class="col w-25 d-table-cell"></div>
<div class="col w-25 d-table-cell"></div>
</div>
</div>
Note: only widths of 25, 50, 75 and 100% are supported by default. You can increase flexibility by adding your own additional width definitions to the $sizes variable of bootstrap, by adding something like this to your scss stylesheet:
// _custom.scss
#import "bootstrap/functions";
#import "bootstrap/variables";
$sizes: map-merge((20: 20%, 33: 33.33%, 40: 40%, 60: 60%, 67: 66.67%, 80: 80%), $sizes);
#import "bootstrap";
// Your CSS
Using width and display classes:
https://getbootstrap.com/docs/4.0/utilities/display/
https://getbootstrap.com/docs/4.0/utilities/sizing/
Bootstrap 4 flexbox grid and wkhtmltopdf:
How to use flexboxgrid with wicked_pdf?
For anyone who using KnpLabs/snappy, giving the viewport as an option fixes the situation:
$snappy->setOption('viewport-size','1280x1024');
In my case I'm using pdfkit (python) which uses wkhtmltopdf. To use bootstrap's grid system, I'm using bootstrap 3.4.1 and bootstrap 5.1.3 (yes I'm importing both .min.css in the same HTML), so I can use grid system and the latest bootstrap components.
You need to use col-xs-<number> instead of col-<number> so the PDF will be exported correctly
I know it is not the best and probably optimal solution, but works!
I came accross this solution, just add this to your css file, and it should work.
.row {
display: -webkit-box;
}
Related
I'm trying to integrate this card styling (https://codepen.io/simeydotme/pen/PrQKgo) into my rails app. But it seems quite difficult to do so because my code generates the image URL on the HTML, but this CodePen has its image URLS declared in the CSS inside a variable like --charizardfront:.
My qestion is, how can you modify this CodePen so that it works by taking the URLs from the HTML instead?
The CodePen and my project uses SCSS, so perhaps that give us more options?
This is my _profile-quest_cards.html.erb code for the card/s that I want to style if anyone is interested:
<div class="profile-carousel profile-carousel--quest_cards">
<div id="profile-carousel-quest_cards-actual">
<% current_user.quest_cards.each do |quest_card| %>
<div class="profile-carousel-item profile-carousel-item--quest_cards" data-asset-id="<%= quest_card.id %>">
<div class="profile-carousel-award profile-carousel-award--quest_cards">
<div class="award-image">
<%= image_tag(quest_card.url) %>
</div>
<div class="award-meta">
<span class="name"><%= quest_card.label %></span>
<span class="for"><%= quest_card.description %></span>
</div>
</div>
</div>
<% end %>
</div>
</div>
<div id="profile-carousel-quest_cards-arrow-left" class="profile-carousel-arrow profile-carousel-arrow--left profile-carousel-arrow--quest_cards">
<div class="arrow-wrapper"><div class="arrow"><span class="cs-icon cs-arrow-down"></span></div></div>
</div>
<div id="profile-carousel-quest_cards-arrow-right" class="profile-carousel-arrow profile-carousel-arrow--right profile-carousel-arrow--quest_cards">
<div class="arrow-wrapper"><div class="arrow"><span class="cs-icon cs-arrow-down"></span></div></div>
</div>
</div>
I've tried the method suggested by ChatGTP, but that doesn't work on codepen:
"You can add a data-* attribute to the div element that contains the image, and assign the value of quest_card.url to it. Then in the SCSS code, you can select that div, and use the attr() function to get the value of the data-* attribute, and assign it to the --charizardfront variable.
Here's an example of how you could do this:
HTML:
<div class="card charizard animated" data-charizard-front="https://cdn.midjourney.com/42ada987-b1aa-4797-a4be-b8cc4a6a6b13/grid_0.png"></div>
SCSS:
--charizardfront: url(attr(data-charizard-front));
When I try that on Codepen, the card image doen't show. Hope I can accomplish my task without using javascript, but if that's the best soloution then I'll take it. Thank you!
HTML divs don't use urls as attributes. You're probably looking for
<img>
Try something like
<img src='path'></img>
so i have a pretty normal setup inside my application.html.erb file:
<html class="h-100">
!head, title, scripts, stylesheets removed for this example here on stackoverflow!
<body class="d-flex flex-column h-100">
<!-- Dropdown Structure -->
<header>
<%= render 'shared/nav' %>
<div class="container">
<%= render partial: 'shared/message' %>
</div>
</header>
<main role="main" class="flex-shrink-0">
<%= yield %>
</main>
<footer class="footer mt-auto py-3">
<div class="container">
<h3>hello</h3>
</div>
</footer>
</body>
That looks good to me. However, the footer is not visible! In fact, it completely disappears when i visit a page. When i inspect the footer via developer tool, it's not even listed inside there.
But for some odd reasons on some pages the footer becomes visible and is then also listed in the developer tool, like it normally should.
My initial thought was that an old scaffold.scss file was causing that and i removed the file entirely, however, that didn't made any changes at all.
I have no errors whatsoever. Never had this kind of issue before. I've searched my app.scss file for any .footer classes, body, html or any other classes that could overwrite the css from bootstrap, but couldn't find anything (used search tool in vscode).
EDIT:
It seems like my html and the body is only 760px in height, however, the main is full width (over 2000px).
I've tried to add html, body { height: 100%; }, but even with that height is still just 760px in height. That seems to be the issue, since the pages that show the footer are not higher than 760px.
Any ideas what could cause that problem?
For anyone running into this same kind of issue:
I've simply moved a few scripts under the <%= yield %>. For some reasons, they were hiding my footer. One of the scripts initializes a sticky chat bar at the bottom, i suspect this particular script is causing the problem. By moving all suspected scripts into the main part, the footer is now finally rendered!
Updated main part (removed scripts for showcase purposes):
<main role="main" class="flex-shrink-0">
<%= yield %>
<script></script>
</main>
Greetings!
I'm new to Ruby on Rails and I'm trying to extract information I have from certain fields in a database and use them as means of styling.
For example, I have a height and width field in my 'Student' database. I wish to extract the height field content and width field content as parameters for my CSS file to set the height and width respectively of a div tag.
I am having a lot of trouble doing this. I have linked my stylesheet in the view index.html.erb by:
<%= stylesheet_link_tag 'students' %>
which is under assets/stylesheets/students.scss
I am not sure how to proceed.
If the styling is database driven, you should not rely on sprockets which generates static stylesheets during deployment.
A simple solution is to build css content using ERB.
<style>
.students-container {
height: "<%= #height.to_i %>px",
width: "<%= #width.to_i %>px"
}
</style>
You can extract out the style node into a partial and reuse it in multiple templates.
Seems like an inline style would work fine here. In your ERB, in your student divs, just do:
<% #students.each do |student| %>
<div style="height: <%= student.height %>px; width: <%= student.width %>px;">
<!-- other student stuff -->
</div>
<% end %>
It's either this or generating a unique CSS class for every student first, then using it in each div.
Rails 4 app, Bootstrap 3
I have a form with multiple file upload fields.
The html:
<%= f.file_field :image, class: "form-control" %>
It looks great in all browsers except firefox; here the bottom of the browse button is cut off and it doesn't look professional:
What's the best way to fix this?
Are you using Jasny Bootstrap to style the file upload element? If not, take a look Jasny Bootstrap
LESS is very cool. I always wondered if there are any good html generators that allow me to write a form more easily or do other things. Is there something somewhat similar but for html?
Tried Haml?
From its website, this Haml code:
#profile
.left.column
#date= print_date
#address= current_user.address
.right.column
#email= current_user.email
#bio= current_user.bio
gets converted into this HTML.
<div id="profile">
<div class="left column">
<div id="date"><%= print_date %></div>
<div id="address"><%= current_user.address %></div>
</div>
<div class="right column">
<div id="email"><%= current_user.email %></div>
<div id="bio"><%= current_user.bio %></div>
</div>
</div>
If you like Haml, then you might also like Sass, which is Haml for CSS. Actually, Haml comes with Sass. You can still use LESS if you like.
Check out Zen-Coding.
Uses a CSS style markup to generate HTML with some nice features.
Did one Blended-HTML On-line Layout Generator
Uses CSS3 and HTML5 markup to generate the source code for HTML page layout on-line.