What is the best way to make sure the embedded object fills the entire height of the container div?

I am currently using angular2/4 along with angular-material (https://material.angular.io/). My challenge lies in trying to embed a PDF within it. The issue I am facing is that the height of the PDF object seems to be small and doesn't fully occupy the space within the container. I can manually add a style="500px" to adjust the height to 500px, but setting the height to 100% results in a distorted height. However, the width works fine when set to 100%.

Is there a way to make my PDF object fill the entire height of the container?

<md-tab-group>
<md-tab label="Tab 1">
    <object data="https://pdfobject.com/pdf/sample-3pp.pdf#page=2" type="application/pdf" width="100%" height="100%">
   <p><b>Example fallback content</b>: This browser does not support PDFs. Please download the PDF to view it: <a href="/pdf/sample-3pp.pdf">Download PDF</a>.</p>
</object>
  </md-tab>
  <md-tab label="Tab 2">Contents of Tab 2</md-tab>
</md-tab-group>
htmlcssangular

Answer №1

To enhance your layout, consider utilizing the CSS calc() function paired with the vh (view height) units:

<md-tab-group>
  <md-tab label="Tab 1">
    <object data="https://pdfobject.com/pdf/sample-3pp.pdf#page=2" 
            type="application/pdf" 
            style="height:calc(100vh - 70px)"
            width="100%">
      <p>
        <b>Example fallback content</b>: If the browser does not support PDFs, 
        please download the PDF to view it: 
        <a href="/pdf/sample-3pp.pdf">Download PDF</a>.
      </p>
    </object>
  </md-tab>
  <md-tab label="Tab 2">Contents of Tab 2</md-tab>
</md-tab-group>

In this scenario, I've incorporated 

style="height:calc(100vh - 70px)"
with a 70px adjustment for MD tab headers and Plunker headers.

If you desire complete automation of your code, you can determine this adjustment value within the ngAfterViewInit hook of your component, utilizing the Renderer2 or ElementRef classes, and then integrate it using the ngStyle directive in your HTML template.

Plunker demo: Check out the demonstration here

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

Retrieve the innerHTML contents from all span elements

I'm having trouble getting the content of all span tags that are child elements of div#parent. So far, I've only been able to retrieve the content of the first one. Can someone please assist me with this? $( document ).ready(function() { ...

javascriptjqueryhtml

Retrieve information from a MySQL database and integrate it into a different application

This php script is used to generate a table with a "book" button next to each row. The goal is to extract the values of "phase" and "site" from the specific row where the "book" button is clicked, and transfer them to another form (in "restricted.php") fo ...

javascriptphphtmlmysqlforms

Choose the initial drop-down option and concentrate on it

How can I target the first drop down node (select element)? I have tried using this code to focus on the first input, but I am looking for a way to target the first select (drop down). $('.modal :input:first').focus(); Unfortunately, this meth ...

jqueryhtmlcss

Get the div to occupy the rest of the available height

I am facing a challenge with two divs on my webpage. The bottom one contains content that expands the highest. The page is set to 100% height and width using the CSS property position: absolute. <style> body, html { height:100%, width:100% } ...

javascriptjqueryhtmlcss

Utilize PHPMailer to send pre-designed email templates

Apologies for the recurring queries. I'm still struggling to find a solution to this issue. Here's my Query: I have a form that allows users to choose between predefined and custom templates. The select option determines which template is displ ...

phphtmlemailtemplatesphpmailer

The issue with the max-height transition not functioning properly arises when there are dynamic changes to the max-height

document.querySelectorAll('.sidebarCategory').forEach(el =>{ el.addEventListener('click', e =>{ let sub = el.nextElementSibling if(sub.style.maxHeight){ el.classList.remove('opened&apos ...

javascriptcsscss-transitions

Guide on executing synchronous operations using httpclient

I am facing an issue where I need to make multiple HTTP requests but I am struggling to synchronize them. Here is the code snippet where I am trying to achieve this. I am having difficulty setting the cartId value from the HTTP service, although I can suc ...

angularhttpclient

Convert the HTML content into a PDF while retaining the CSS styles using either JavaScript or Django

Looking to create a PDF of an HTML element with background color and images. Seeking a solution, either client-side or server-side using Django/Python. Tried jsPDF on the client side, but it does not support CSS. Considering ReportLab for Django, but uns ...

javascriptpythoncssdjangopdf-generation

Is there a way to ensure that this ajax code functions seamlessly with all types of HTML files?

Currently, I am facing a challenge with an ajax call that retrieves data from a database, which I need to load into an HTML file. The issue lies in the fact that I have various HTML files and I am unaware of their contents. Despite spending countless hour ...

javascripthtmlajax

Bars of varying heights (Google Chart)

I have incorporated a Google chart within a mat-grid-tile. In this setup, one column displays a value of 50, while the other showcases a value of 30. These particular values are sourced from myService and are accurate. Although when I hover over the bars i ...

htmlcssangulartypescriptgoogle-visualization

Enhancing Xcode security login through personalized security question prompts

I have been working on implementing the following code snippet: NSURL *url = [NSURL URLWithString:@"https://login.XXX.com/security/xxxforms// logonchalnp.fcc?TYPE=33554433&REALMOID=06-95b0f0c8-198a-1039-b583 83b02659fd47&GUID=&SMAUTHREASON=0&a ...

htmlauthenticationxcode4.5asihttprequest

Iterate through each entry in the database and identify and fix any duplicate records

In my form, I have a JSON array that includes the name and value of each input. I am attempting to add an "optionprix" attribute for each input with the "optionname" class based on the corresponding value of the input with the "optionprix" class. Here is ...

javascriptjqueryhtmljson

JavaScript call to enlarge text upon click

I'm struggling to figure out why my font enlargement function isn't working as expected. Below is the code for my font enlargement function: <script type="text/javascript> function growText() { var text = document.getElementBy ...

javascripthtmlonclick

How to align Material UI's <TextField> component in the middle of a React project

I'm struggling to align two <TextArea> components using material ui and React. Both of them are contained within the same <div> and share the same className. Despite trying to apply the !important rule in CSS, I haven't been able to ...

cssreactjsmaterial-ui

Having trouble retrieving text from input element using selenium

In my Java/Spring application, I have created an HTML file with radio buttons populated from a database. Now, I am working on writing a Selenium test case to click the radio button. The values for these radio buttons are stored in an Excel sheet that I am ...

javahtmlspringselenium

Is there a way to efficiently load the json files only upon clicking the corresponding language button?

Currently, I am using a tutorial on implementing translations in Angular2. The implementation works well, but I would like to optimize it by loading json files only when the associated language button is clicked. Can someone assist me with this? // app/tr ...

angularangular-translate

The blur filter in Safari causes colors to appear distorted

I am having an issue trying to add a blur filter to an SVG element. It appears that Safari is not rendering the colors correctly. Take a look at this example: <svg height="110" width="110"> <defs> <filter id="f1" x="0" y="0"&g ...

jqueryhtmlsvgsafarisvg-filters

Steps for registering an Angular application on a Eureka server

I'm trying to integrate my Angular application with a Spring Cloud Eureka server. I came across the eureka-js-client library, but I'm unsure about where to place the configuration settings. Additionally, there are methods like client.start() and ...

angularspring-bootspring-cloudnetflix-eureka

Implementing Dynamic Script Injection in Angular Controllers for Enhanced HTML Functionality

I'm a total beginner when it comes to Angular and frontend development, so please bear with me if my question seems basic: In my controller, I have the following code where I am populating the $window.user data that is being used in the script [2] ad ...

javascripthtmlangularjs

PHP is experiencing issues when trying to insert data into the database

When I run a query in phpMyAdmin such as INSERT INTO table('نچجاعجان'); it appears correctly, but when I try to insert data through my PHP page, it displays in the field like this: ÙاننناÙنعن The col ...

phphtmlmysqlutf-8