PDFKit gem can not hide link - Rails 3 - ruby-on-rails-3

Hello people
I was following this tutorial to generate a "pdf" file from a view in my rails app. Everything was ok, until I tried to hide the "link to download". Everytime I generate the PDF file, the link is still shown. I think that the "#media print" style in the css file is not working.
Is there another way to hide the link in the generated pdf file?
Thanks for the help

It is answered here http://railscasts.com/episodes/220-pdfkit. Check section application.css
You need to give an id for the "link to download" then in the CSS file hide the element using display: none. In the above example the id name is pdf_link and css properties are defined like this -
#pdf_link{ display: none; }
That should work.

Related

Docusaurus - How to remove TOC(table of contents)?

I'm using docusaurus for our dev docs.
How to disable TOC?
Thanks.
Docosaurus has Markdown Frontmatter metadata fields for .md files where you will eventually make use of the hide_table_of_contents field and set it to true.
Your .md should look like:
---
hide_table_of_contents: true
---
# Markdown Features
My Document Markdown content
There does not seem to be a way to make the hide_table_of_contents setting default to true; you need to add it to the Front Matter for every document if you want to completely disable the ToC display.
Another approach to completely disable the ToC display would be to edit the css, adding:
.theme-doc-toc-desktop {
display: none;
}

Zikula add block to topnav position in Bootstrap Theme

When I add the search block to the topnav in Bootstrap Theme, the login button is "broken"
ZK2.0.13 with Bootstrap Theme. When the block is added, the user login appear in a new line (example)
I expect see topnav in a single line.
I found an answer for you. What I did was set up the page as you had it and then viewed it in Chrome. The app has some really nice dev tools for experimenting with css. Choose View->Developer->Developer Tools (Cmd-Option-I on a mac). From there right-click on the search box and choose inspect. You can then see on the right panel all the css that is affecting your element and see how the html gets laid out. I noticed that the search box was wrapped in a div with an input-group style so that was the one I wanted to mess with. I found if I added the below code it does what you want:
.input-group {
position: relative;
display: table;
border-collapse: separate;
float: right !important;
width: 200px;
padding-top: 6px;
}
The last three css commmands are the change that makes the difference. To fix the Bootstrap theme I went to themes/BootstrapTheme/Resources/public/css/style.css and added the above code to style.css. Don't forget to delete the cache folder in /var/cache (either prod or dev) before you test it out.
One concern I have with this solution is that .input-group might get used elsewhere and this may interfere. A quick inspection didn't show it being used anywhere else except the search box. If it is somewhere else, you will have to create your own theme (not hard) and manually write some code.
Thanks Paustian. It's working.
I have edited the file: Resources\ZikulaSearchModule\views\Block\search.html.twig in order to change the css class to "myInput-group". Then I have edited Resources/public/css/style.css and add your changes to the file.
Thanks for all guys.

Font Awesome not aligining properly

I can't seem to get the font awesome icons to load properly. The page in question can be found here: http://thelink.biz/AboutUs/
Am I loading the font awesome correctly or is there a conflict with Bootstrap?
You have the correct styling (line-height: 30px in stylesheet.css applying to the icons using .social-links > li a), but the order that you are loading the stylesheets in the page means that it is getting overridden by the default font awesome style. Make sure that you load stylesheet.css after the font awesome css files in your header.
I can see that you placed google analytics code wrogly at the top of the html file. Please place the code at the bottom of the html file & of course inside body tags.
Your <a> tags need some padding to push down the FontAwesome icons.
I was able to add
padding-top:7px
to the <a> and it fixed the centering of the icons.

show PDF in an Ext.Container SENCHA TOUCH 2

I am trying to show a pdf content in a Ext.Container of Sencha Touch 2. Tried several ways answered on SO but they all didn't work.
Few things tried, include:
Tried converting file content into html and extract the HTML inside the BODY tag and put it into Ext.XTemplate of the Container. This way I can only play cool with it, if HTML is being converted from a .doc file but if it was a .pdf file it messes up design because when I convert a pdf file into HTML then it adds position: absolute inside every DIV and with absolute position the parent element will not have any height and I am stuck with the scrolling issues.
for example:
<div style="position:relative;display:inline-block;;top:994px;left:712px;font-family:'Times New Roman';font-size:10pt;white-space:nowrap;">description</div>
Second try,
2. Tried putting PDF into IFRAME and EMBED tags as a link and put them into the Ext.XTemplate but these tags are also not working in mobile.
for example:
<embed type="application/pdf" width="800px" height="800px" src="example.pdf" />
<iframe style="position:absolute; z-index: 1; left: 0; top: 0;" width="100%" height="2000" src="example.pdf"></iframe>
Please give some idea how to display/open PDF(or its content, with atleast few formatting). Or do we have any plugin to display it. One final solution is showing using google docs but my initial requirement is showing PDF content in sencha touch 2 app not using any third party service(like google docs).
you can use inapp browser plugin for opening file in the iOS:
install inappbrowser cordoav plugin and open file like this:
function openPDF(){
ref = window.open('http://static.googleusercontent.com/media/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf', '_blank', 'location=no');
ref.addEventListener('exit', function() {
ref.removeEventListener('exit', function(){});
ref.close();
} );
}
It is very useful the PDFObject library, I have added this third-parties library to my project based on Sencha Touch 2 and its working in the browser, my current issue is show the pdf in Ipad.. :-(

twitter bootstrap drop down issue

Hi I am using twitter bootstrap for my website. I have put dropdown in collpsable which is in modal window. My problem is the dropdow I have put in collaspable inner, it cutoff the menu. Here is that Image
It should show like this :
I have tried by changing the z-index attribute but unable to show it. Can anybody know what is the problem?
I beleive the css it is using is the .dropdown-menu class whose position is set to absolute. If you change the position to relative it will give you the behavior you desire.
So you could isolate this change in your own .css file so you don't touch the main bootstrap.css file so its easier to update without breaking your styles.
So perhaps something in a custom.css:
.dropdown-menu {
position: relative;
}