Fit Width Default

Automatically fit the PDF page width to the container when loaded. Perfect for document review and responsive layouts.

Fit Width Default Mode

The setFitWidthDefault property enables automatic page width fitting when a PDF document is loaded. Instead of applying a fixed zoom level, the viewer calculates and applies an optimal zoom to fit the entire page width within the visible container.

This is particularly useful for responsive layouts where the container size varies across devices and screen sizes.

What Fit Width Does

When enabled, the component:

Calculates the container's available width (minus padding)
Measures the first page's width
Computes and applies the optimal zoom level to fit the page width
Adapts if the container is resized

This ensures that users always see the complete page horizontally without needing to scroll left and right.

Tip: Use setFitWidthDefault for document review interfaces and list layouts where showing the full page width is essential for readability.

Important: If both defaultZoom and setFitWidthDefault are set to active values, setFitWidthDefault takes precedence. Set only one to prevent conflicts.

Prop

Type

Implementation

import { PDFAtelier } from '@innosoft/pdf-atelier-react';

export default function FitWidthExample() {
  return (
    <PDFAtelier
      src="/document.pdf"
      license="YOUR_LICENSE_KEY"
      setFitWidthDefault={true}
      showZoom={true}
      showPageController={true}
    />
  );
}

Dynamic Fit Width Toggle:

import { PDFAtelier } from '@innosoft/pdf-atelier-react';
import { useState } from 'react';

export default function FitWidthToggle() {
  const [fitWidth, setFitWidth] = useState(true);

  return (
    <div>
      <div className="controls">
        <label>
          <input
            type="checkbox"
            checked={fitWidth}
            onChange={(e) => setFitWidth(e.target.checked)}
          />
          Fit Width Default
        </label>
      </div>
      <PDFAtelier
        src="/document.pdf"
        license="YOUR_LICENSE_KEY"
        setFitWidthDefault={fitWidth}
      />
    </div>
  );
}

import { Component } from '@angular/core';
import { PdfAtelierWrapper } from '@innosoft/pdf-atelier-angular';
import { CommonModule } from '@angular/common';

@Component({
  standalone: true,
  selector: 'app-fit-width',
  imports: [PdfAtelierWrapper, CommonModule],
  template: `
    <pdf-atelier-wrapper
      [src]="'/document.pdf'"
      [license]="'YOUR_LICENSE_KEY'"
      [setFitWidthDefault]="true"
      [showZoom]="true"
      [showPageController]="true"
    ></pdf-atelier-wrapper>
  `,
})
export class FitWidthComponent {}

Responsive Fit Width with Device Detection:

import { Component, OnInit } from '@angular/core';
import { PdfAtelierWrapper } from '@innosoft/pdf-atelier-angular';
import { CommonModule } from '@angular/common';

@Component({
  standalone: true,
  selector: 'app-responsive-fit',
  imports: [PdfAtelierWrapper, CommonModule],
  template: `
    <pdf-atelier-wrapper
      [src]="pdfSrc"
      [license]="licenseKey"
      [setFitWidthDefault]="useFitWidth"
      [defaultZoom]="!useFitWidth ? defaultZoom : undefined"
    ></pdf-atelier-wrapper>
  `,
})
export class ResponsiveFitComponent implements OnInit {
  pdfSrc = '/document.pdf';
  licenseKey = 'YOUR_LICENSE_KEY';
  useFitWidth = true;
  defaultZoom = 1;

  ngOnInit() {
    // On mobile, use fit width; on desktop, use fixed zoom
    this.updateViewMode();
    window.addEventListener('resize', () => this.updateViewMode());
  }

  private updateViewMode() {
    const isMobile = window.innerWidth < 768;
    this.useFitWidth = isMobile;
    this.defaultZoom = isMobile ? 1 : 1.25;
  }
}

<script setup lang="ts">
import PdfAtelierWrapper from '@innosoft/pdf-atelier-vue';

const pdfSrc = '/document.pdf';
const licenseKey = 'YOUR_LICENSE_KEY';
</script>

<template>
  <PdfAtelierWrapper
    :src="pdfSrc"
    :license="licenseKey"
    :setFitWidthDefault="true"
    :showZoom="true"
    :showPageController="true"
  />
</template>

Conditional Fit Width with Layout Mode:

<script setup lang="ts">
import PdfAtelierWrapper from '@innosoft/pdf-atelier-vue';
import { ref, computed } from 'vue';

const pdfSrc = '/document.pdf';
const licenseKey = 'YOUR_LICENSE_KEY';
const layoutMode = ref<'single' | 'dual'>('single');

// Use fit width in single-column layout, fixed zoom in dual-column
const useFitWidth = computed(() => layoutMode.value === 'single');

const toggleLayout = () => {
  layoutMode.value = layoutMode.value === 'single' ? 'dual' : 'single';
};
</script>

<template>
  <div class="pdf-container" :class="layoutMode">
    <button @click="toggleLayout">
      Toggle Layout: {{ layoutMode }}
    </button>

    <PdfAtelierWrapper
      :src="pdfSrc"
      :license="licenseKey"
      :setFitWidthDefault="useFitWidth"
      :defaultZoom="useFitWidth ? 1 : 1.25"
    />
  </div>
</template>

<style scoped>
.pdf-container.dual {
  width: 50vw;
}

.pdf-container.single {
  width: 100%;
}
</style>

<!DOCTYPE html>
<html>
  <head>
    <script type="module">
      import '@innosoft/pdf-atelier-core';
    </script>
  </head>
  <body>
    <!-- Fit width to container on load -->
    <pdf-atelier
      id="pdfViewer"
      src="/document.pdf"
      license="YOUR_LICENSE_KEY"
      set-fit-width-default="true"
      show-zoom="true"
      show-page-controller="true"
    ></pdf-atelier>
  </body>
</html>

JavaScript Control with Window Resize:

<div id="pdfContainer">
  <pdf-atelier
    id="pdfViewer"
    src="/document.pdf"
    license="YOUR_LICENSE_KEY"
  ></pdf-atelier>
</div>

<script type="module">
  import '@innosoft/pdf-atelier-core';

  const viewer = document.getElementById('pdfViewer');
  const container = document.getElementById('pdfContainer');

  // Detect viewport and set fit width accordingly
  function setFitWidthMode() {
    const isMobile = window.innerWidth < 768;
    viewer.setFitWidthDefault = isMobile;

    if (isMobile) {
      container.style.width = '100%';
    } else {
      container.style.width = '75%';
    }
  }

  setFitWidthMode();
  window.addEventListener('resize', setFitWidthMode);
</script>

Use Cases

1. Document Review Interface

For collaborative document review where multiple reviewers need to see the entire page:

<PDFAtelier src="/contract.pdf" license="YOUR_LICENSE_KEY" setFitWidthDefault={true} />

2. Mobile-First Reading

Automatically adjust zoom for mobile devices without manual configuration:

<PDFAtelier
  src="/manual.pdf"
  license="YOUR_LICENSE_KEY"
  setFitWidthDefault={true}
  showZoom={false} // Users can still adjust manually if needed
/>

In a dashboard with a narrow sidebar, fit width ensures the document displays properly:

<div className="dashboard">
  <aside className="sidebar" style={{ width: '25%' }}>
    {/* Navigation */}
  </aside>
  <main style={{ width: '75%' }}>
    <PDFAtelier src="/report.pdf" license="YOUR_LICENSE_KEY" setFitWidthDefault={true} />
  </main>
</div>

4. Dynamic Container Resizing

When container size changes (window resize, layout toggle), fit width recalculates:

const [sidebarOpen, setSidebarOpen] = useState(true);

return (
  <div className="layout">
    <Sidebar isOpen={sidebarOpen} />
    <main style={{ width: sidebarOpen ? '75%' : '100%' }}>
      <PDFAtelier
        src="/document.pdf"
        license="YOUR_LICENSE_KEY"
        setFitWidthDefault={true}
        key={sidebarOpen ? 'open' : 'closed'}
      />
    </main>
  </div>
);

Behavior Details

Initial Load: When the PDF loads, the fit-width calculation runs automatically
DOM Ready: The calculation waits for the DOM to be fully rendered before computing dimensions
No Fixed Zoom: The defaultZoom property is ignored when setFitWidthDefault is true
Manual Adjustment: Users can still manually adjust zoom using the zoom controls
Responsive: If the container is resized, users can re-trigger fit-width via the toolbar button

Performance Considerations

Fit width calculation is lightweight and runs only on document load
The component measures canvas dimensions and container size once
Recalculation occurs only when a new PDF is loaded, not on every zoom action
Ideal for applications with variable viewport sizes

Conflict Prevention

If you attempt to set both attributes:

// ⚠️ Not recommended - causes warning
<PDFAtelier
  src="/document.pdf"
  license="YOUR_LICENSE_KEY"
  defaultZoom={1.5} // Ignored
  setFitWidthDefault={true} // Takes precedence
/>

A console warning will be issued. Choose one fitting your use case:

Use defaultZoom for fixed zoom levels
Use setFitWidthDefault for responsive/adaptive layouts

PDF Atelier