Create a Bootstrap modal that includes an object tag to embed a PDF file

I'm currently working on displaying a PDF file within a Bootstrap modal using the "object" HTML tag. However, I am facing an issue where the PDF file is not showing up.

To demonstrate this problem, I have created a jsFiddle (http://jsfiddle.net/mV6jJ/3/) where you can see the basic modal code from Bootstrap along with the object tag for the PDF file in the modal-body.

<object type="application/pdf" data="http://www.inkwelleditorial.com/pdfSample.pdf" width="500" height="500>this is not working as expected</object>

When I use this code outside of the Bootstrap modal, it works perfectly fine and displays the PDF in the browser's default viewer. However, when I try to incorporate it into the modal, nothing shows up.

If you have any insights or suggestions on how to resolve this issue, I would greatly appreciate it. I've spent hours searching for a solution and so far have only come across solutions involving the embed tag, which I prefer not to use.

Thank you for your help and best regards

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

After some exploration, I've discovered that Bootstrap includes a CSS property that impacts the viewing of PDFs in a modal window.

Instead of this:

.modal.in .modal-dialog {
  transform: translate(0px, 0px);
}

Use this instead:

.modal.in .modal-dialog {
  transform: none;
}

By making this adjustment, everything functions as expected.

You can see the solution in action here:

http://jsfiddle.net/mV6jJ/20/

Answer №2

Prevent automatic pdf downloads: To avoid Internet Download Manager or similar tools from automatically catching pdf files, make sure to adjust the settings.

Take a look at PDFObject JavaScript library for more options.

<script src="https://github.com/pipwerks/PDFObject/blob/master/pdfobject.min.js"></script>

UPDATE

Consider using iframe instead of object tag for displaying pdf content.

<iframe src="http://www.inkwelleditorial.com/pdfSample.pdf" width="500" height="500"></iframe>

http://jsfiddle.net/mV6jJ/9/

Answer №3

After some troubleshooting, I was able to resolve the issue! It turned out that my browser's PDF reader settings were not properly configured. Firefox was utilizing Adobe Reader for opening PDF files. I switched to pdf.js (Firefox's built-in PDF reader) and now everything appears to be functioning correctly :) Many thanks for your assistance and support!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Javascript/Ajax to manually delete an event handler from a Sys.EventHandlerList() can be achieved by following these

I have encountered a situation where I am working with two script controls, one containing the other. Successfully, I have managed to handle events from the child control on the parent using the following code snippet: initialize: function() { this._ ...

javascriptajaxevent-handlingscriptcontrol

Choose a specific name from the object

Currently, I am in the process of learning and would appreciate your patience. I have a json response from which I need to extract specific elements. My goal is to identify particular elements within an object by their name, such as "length" or "width", an ...

jqueryjson

Can you help me extract a number from an NSString that contains html tags?

Seeking assistance with extracting a telephone number from an NSString containing HTML tags. The specific telephone number needed is isolated within the string. <div><a href="tel:12345" x-apple-data-detectors="true" x-apple-data-detectors-type="t ...

htmliosobjective-cnsstringnsattributedstring

Troubleshooting issue: Dropdown menu malfunctioning after using replaceWith() and appendTo()

I could really use some assistance. Admittedly, my knowledge of php, js, jquery, and similar languages is limited. I am currently working on a small web application where users fill out a form with specific requests, the data is then stored in a database, ...

javascripthtmljqueryreplacewith

Alignment of the pager in the jqgrid interface

Normally the pager is centered at the center position. However, when a fixed width size is applied to my columns, the pager position shifts to the left. I would like it to be center aligned. What steps can I take to achieve this? ...

jqueryjqgrid

Moving data from the bottom of the page to the top

I am facing a situation where I have several foreach loops on a page that calculate the sum of variables. By the end of these loops, a specific variable contains data. However, I now need to display this data at the top of my page before the foreach loop. ...

javascriptphp

Retrieve information using JSON.parse from an ajax request

I have been searching high and low for the solution. Here is the JSON string "[{"id":"0"}]" I attempted obj['id'] and obj.id but to no avail $.ajax({ url: 'php/checkdoctorappointmentonday.php', data: 'doc ...

phpjqueryjsonajax

Is it considered bad practice to assign a value to a Vuex property directly in an action rather than using a mutation for the change

Currently, I have a Vuex action that performs a GET request and then assigns the response to a Vuex property: async getUserServers({commit, state, dispatch}, userId){ try { let response = await axios.get("/servers/" + userId) state.serv ...

javascriptvue.jsvuex

Incorporating PHP in JS/jQuery AJAX for creating unique odd and even conditional layouts

My PHP code includes a loop that changes the layout of elements based on whether the $count variable is odd or even. For odd counts, an image appears on the left and text on the right. For even counts, it's the other way around. To load content dynam ...

javascriptphpjqueryajax

Using JavaScript to Generate Formatting Tags Based on User Selections from a Multiselect Dropdown

When a user selects formatting options (such as bold, italic, underline) from a multiselect dropdown, I need to generate corresponding formatting tags. For example, if the user selects bold and italic, I should create a tag like <b><i></i&g ...

javascriptjquery

NodeJS async function returning a value of undefined

Hi there! I'm currently diving into the world of async functions and I seem to be running into a bit of trouble. When I use "Resolve, Reject" with Promises, everything works smoothly. However, when I attempt to implement async instead of a new Promise ...

javascriptnode.jsasynchronousasync-await

I am looking to incorporate a scroll feature into my form, as it is being displayed within a modal that is a separate component

Due to the size of my employee form exceeding the screen capacity, I need to incorporate a scroll property into my modal content. The form contains numerous fields that cannot be modified. Could you assist me in resolving the scrolling issue? Thank you! ...

cssreactjs

Files with extensions containing wildcards will trigger a 404 error when accessed from the public folder in NextJS

I have successfully set up my public folder to serve static files, however I am encountering an issue with files that have a leading dot in their filename (.**). Specifically, I need to host the "well-known" text file for apple-pay domain verification, wh ...

javascriptreactjsnext.jsstatic-filesapplepay

Issues with Joi validation in Node.js are causing unexpected behavior

I am in the process of validating a relatively simple schema. Below is the code snippet I'm working with: Joi.object({ mobile: Joi.string() .label('mobile') .pattern(/^(\+)[1-9]\d{7,14}$/) .messages({ 'str ...

javascriptnode.jstypescriptvalidationjoi

Changing the collection in Cosmos DB

As a newcomer to Azure, I have a requirement to modify the structure of an existing cosmos db collection by adding an additional property. I am looking to achieve this using a Stored Procedure. The collection currently has around 60 documents, and the same ...

javascriptasp.netazureazure-cosmosdb

Automate table column width adjustments in HTML using Selenium WebDriver

As of now, I am working on automating the process of increasing the width of an HTML table column using Selenium WebDriver. I discovered that I can retrieve the coordinates of x and y by using findElement(By.cssSelector("<Css locator>").getLocation( ...

javajavascriptseleniumwebdriverselenium-webdriver

Design strategy for developing a web and mobile application

Currently, I am in the process of developing an application that will be accessed by a variety of websites and mobile devices. This application is built using HTML 5 with the integration of jQuery. Each website or device that consumes this application will ...

jqueryjsontemplatesarchitecture

Sending a collection of nested arrays to an MVC controller

Currently, I am utilizing spring MVC and have the requirement to transmit data to my controller on the backend server. @RequestMapping(value="/project/update") public @ResponseBody projectWebForm update(HttpServletRequest request, HttpServletRespo ...

javascriptjavajsonajaxspring-mvc

Incorporating header and footer elements into the design

I am facing an issue while editing a layout. Currently, when clicking on some side of the layout, a header and footer appear in a certain way. However, I would like to change this so that the header and footer appear differently, similar to the example s ...

htmlcss

Arrange database by website domain in PHP

I'm facing an issue where I need to extract domain names from a database and build buttons that can be used to sort the database based on these domains. For example, clicking on the Gmail button should sort users with Gmail accounts, and clicking on t ...

phphtmlcss