The scroll bar only becomes visible for left and right scrolling when I reach the very bottom of the content

I want to implement scroll controls in my pdf viewer. Although scrolling up and down is working well, I am facing an issue where the horizontal scroll bar does not appear until I reach the bottom of the PDF file. Below is the CSS code I am using:

.pdf-content {
    overflow-y: auto;
    border: 1px solid #EEE;
    padding: 0px;
    margin: 0px;
}

Here is the HTML code snippet:

<div class="pdf-content" [style.width]="imageWidth" [style.height]="imageHeight">
    <pdf-viewer *ngIf="fileUrl" style="display: block;" 
        [src]="fileUrl" 
        [show-all]="false" 
        [original-size]="false" 
        [rotation]="rotation"
        [page]="page"
        [zoom]="zooming"
        (after-load-complete)="callBackFn($event)">
    </pdf-viewer>

    <md-spinner *ngIf="loadingPdf && fileUrl" class="center"></md-spinner>
</div>

https://i.sstatic.net/hvBgK.png

https://i.sstatic.net/mlVQ5.png

htmlcssangular

Answer №1

Your webpage has divided scroll bars across multiple elements. To fix this, consider updating the CSS from overflow-y: auto to simply overflow: auto. This will consolidate the scroll bars onto a single element for a better user experience.

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

Angular 10: Oops! An issue occurred stating that the mat-form-field needs to have a MatFormFieldControl inside

When attempting to set up a form group on a page, I encountered the following error: ERROR Error: No value accessor for form control with name: 'modalidade' at _throwError (forms.js:2431) at setUpControl (forms.js:2339) at FormGroupDirective.addC ...

htmlangulartypescript

Transforming a canvas element into an image sans the use of toDataURL or toBlob

Recently, I developed a small tool which involves adding a canvas element to the DOM. Strangely, when trying to use toBlob or toDataURL, I encountered an issue with the canvas being tainted and received the error message (specifically in chromium): Uncaugh ...

javascripthtml

Leverage an HTML table to serve as a data source for populating a Kendo UI template

My latest creation is a unique service that generates HTML tables based on request parameters. The current implementation returns the data as an HTML page in string format. Here's a sample output: <!DOCTYPE html> <html> <head> ...

htmltelerikkendo-uidatasource

Let's apply some CSS to the font style within the body

I've been incorporating a "footer.php" page into all other pages of my website. This footer showcases the site's name at the bottom of the screen and uses a custom font loaded with @font-face. Initially, I had something like this placed inside t ...

htmlcssw3c-validation

PHP - fwrite() or fputs() Can Occasionally Mishandle Accented Characters

I have been developing a PHP application that generates an HTML file as its final output. However, I am facing a problem where French characters are inconsistently written to the file incorrectly (this is not happening on the webpage itself, as when I view ...

phphtmlutf-8fwrite

Creating a Mat Table in Angular 7 by Mapping an Object with an Array of Objects

I've been working on mapping one of my objects to a mat-table. The input object from the Web API looks like this: [ { "inventoryId": 1004, "inventoryName": "Red Shirt Material", "dateReport": [ { ...

angularangular7mat-tableng-container

Tips for incorporating css @keyframes within a cshtml file:

My cshtml page includes a Popup that I created, but I encountered an issue with keyframes. When I tried to use it without keyframes, the fade effect was lost. I am looking for a way to fix my @keyframes. (I tested the code on Chrome and Opera) I found the ...

javascripthtmlcss

What is causing the <iframe> to malfunction when I use it?

I am encountering a problem with a basic snippet of HTML code: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8> <title>iframe Example</title> </head> <body> <div> & ...

htmlcss

Hidden back navigation strategy in AngularJS 2 with location strategy

After creating a custom LocationStrategy to disable browser location bar changes, I am now looking to integrate smaller apps into various web pages without affecting the browser's location. While navigation works smoothly with this new strategy, I am ...

typescriptangular

jquery personalized auto-suggest

I have multiple input[type="text"] elements with the class .autocomp. When I search for something, PHP retrieves data from a MySQL database and displays it in HTML format using jQuery. My question is, what is the most effective approach among these option ...

javascriptjqueryhtmlclassxhtml

Trouble keeping HTML/Javascript/CSS Collapsible Menu closed after refreshing the page

My issue is that the collapsible menu I have created does not remain closed when the page is refreshed. Upon reloading the page, the collapsible menu is always fully expanded, even if it was collapsed before the refresh. This creates a problem as there is ...

javascripthtmlcssmenu

Creating visually appealing forms with Bootstrap 4 in Django Template for loop

I am attempting to display my formdata (including text and an image) on the screen using bootstrap in a way that arranges the blocks of data (text + image) next to each other instead of one below the other. I have tried adjusting column sizes, but have b ...

cssdjangoformsbootstrap-4

Ensure that the entire DIV is interactive, with the exception of the dropdown

I have successfully made the entire DIV clickable, but I am facing an issue with the dropdown menu. Whenever I click on the dropdown button, it not only opens up the dropdown menu but also quickly redirects to 'next.html'. Is there a way to preve ...

javascriptjqueryhtmlbootstrap-4

There was a TypeError error that occurred: Unable to access the property 'title' of null in Angular/Firebase

Seeking to retrieve data from Firebase's real-time database by passing values in an input form, I encountered an issue whenever I attempt to utilize [(ngModel)]="product.title". ERROR TypeError: Cannot read property 'title' of nu ...

angulartypescriptfirebase-realtime-database

Completely shrink the middle row first when resizing the browser before shrinking the other rows

Utilizing a simple three row structure: <div class="EditorHeaderWrapper"> <h1>Title</h1> </div> <div class="EditorMainRowWrapper"> // Content of the main row goes here </div> <div class="EditorFooterWrapper"> ...

htmlcss

Ways to extract information from an Object and save it into an array

In my Angular2 project, I am working on retrieving JSON data to get all the rooms and store them in an array. Below is the code for the RoomlistService that helps me fetch the correct JSON file: @Injectable() export class RoomlistService { constructor( ...

javascriptarraysjsonangulartypescript

Is there a way to use prettier to format HTML codes without breaking up the tags?

As someone new to web development, I have recently encountered some challenges with coding, one of them being Prettier. This tool formats codes into parts, making it difficult for me to understand the code properly. After formatting, the code gets separat ...

htmlvisual-studio-codebootstrap-5prettier

The Angular (click) event requires two clicks in order to trigger the associated Typescript function

I'm facing an issue with a Typescript function that I've linked to (click) in my HTML. Oddly, I have to click the button twice for the function to be executed. Interestingly, if I don't provide any parameters, the function works as expected ...

javascripthtmlangulartypescript

Transforming Nested JSON Data into an Interactive HTML Table

I am attempting to transform this nested JSON data into an HTML table: { "language":"en", "retrieved_url":"https://www.canlii.org/en/ca/scc/doc/1986/1986canlii46/1986canlii46.html?autocompleteStr=r%20v%20oakes&aut ...

htmljsonflask

The CSS design morphs as I adjust the browser size. Despite my limited coding experience of just a few weeks, I've encountered a challenging obstacle

Hi there, I've been searching on W3 and various other sources but haven't found a solution to my problem. I have managed to create the layout I want, however, it starts falling apart when I resize the browser window. I'm relatively new to co ...

htmlcss