Scrollbar is not displayed in Iframe

Having trouble displaying an iframe with a scroll bar.

To view the issue, visit using email: [email protected] and password: 111111

After refreshing the page using F5, click on "new invoice" on the right side. The content is long but no scroll bar appears.

The CSS code I'm using is:

.frm {
  position: fixed;
  width: 100%;
  height: 100vh;
  overflow-y: scroll !important;
  overflow-x: hidden !important; 
}

Here's how the HTML looks:

<iframe frameborder="5" class="frm" ng-src="{{trustSrc(url)}}" scrolling="yes"></iframe>
htmlcssangularjsiframeionic-framework

Answer №1

Your ionic.app.css file is hiding scrollbars:

::-webkit-scrollbar {
  display: none;
}

It may be necessary to remove this styling as overriding it could prove difficult. Here's a similar question.

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

Loading Angular.js scripts into the webpage

My app is built using the MEAN stack. When a user visits the URL: http://localhost:3000/edit/0 Where 0 represents a record id. Initially, it seems like everything should work fine, but I am facing an issue where my scripts are not loading in the edit.js ...

javascriptangularjsmean-stack

Retrieving an image from the image repository

Having issues with Ionic 3, Angular CLI 7, and Angular 5. I'm encountering difficulties in fetching an image from the library. The problem arises when calling getPicture function. The error message reads: “Object(WEBPACK_IMPORTED_MODULE_1__ioni ...

angularionic-frameworkionic3ionic-native

Enhancing JQuery UI Accordion with simple ICONS

Is it necessary to use the Jquery CSS file for adding icons, or is there an alternative method? I'm hoping I can avoid using it as I am working within Wordpress and enqueuing the Jquery CSS seems like a complex task for me. Apologies for the basic q ...

jquerycssuser-interfacejquery-uiaccordion

Utilizing AngularJS to create a vertical calendar

Looking to create a vertical navigation displaying the date and day for the current week using angularjs. When clicking on the navigation div, I want an alert with the selected date to appear. I attempted this in Plunker using various templates, but was u ...

javascriptjqueryangularjstwitter-bootstrap

PHP infinite redirection loop

I have encountered an issue where a user can successfully submit an event to a calendar, but I am facing difficulty redirecting them back to the original page. I attempted to use the following code snippet: header("Location: http://localhost/Project/Vie ...

phphtmlredirectheader

Encountering a cumbersome play button prior to the start of an MP4 video in an HTML5 application

Our app utilizes mp4 videos that are embedded and loaded locally. However, before the video begins playing, a large, unsightly play button briefly flashes on the screen, occupying the entire container. Is there any method to prevent this occurrence or pot ...

csshtmlvideoionic-frameworkhtml5-video

Eliminating an ngRepeat item from the $rootScope array does not automatically result in the item being removed from the html code

Attempting to eliminate an li from a ul using angular. Although the element is successfully removed from the array, AngularJS does not remove the li until it is interacted with, such as being hovered over or clicked. See the code below: app.js myApp.run( ...

javascriptangularjs

Sharing data between controllers in AngularJS is a common challenge for many developers. There are various

Is there a way to dynamically retrieve the title in indexCtrl by sharing $scope.title? var app = angular.module('app', []); app.controller('firstCtrl', function($scope){ $scope.title = 'OneFC'; }) app.controller('s ...

angularjs

When using the .subscribe() method, subscriptions terminate immediately and cease functioning

My material table's dataSource is obtained externally, and one of my filter fields needs to display unique values from one of the object attributes. To achieve this, I decided to use a subscription to refresh the data on subsequent 'refresh' ...

javascripthtmlangularrxjsangular-material

Allow users to select options after they click a radio button

I have a pair of radio buttons and two sets of select options within different classes. Upon selecting the first radio button, the select options belonging to class1 should be enabled. On the other hand, upon selecting the second radio button, the select ...

javascripthtml

A guide on organizing and categorizing data by name with angularjs

Presented here is a list of descriptions associated with specific names. I am seeking guidance on how to group or list the descriptions by name. html: <body ng-app="app" ng-controller="MainCtrl"> <div ng-repeat="nameGroup in loopData"> & ...

javascriptangularjsfilterangularjs-ng-repeatgrouping

Attempting to implement a Python-based Selenium test on a Bootstrap modal

Here is the HTML code snippet: <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div class="modal-content"> <div class="modal-header"> <h5 ...

pythonhtmlseleniumtesting

When the user clicks, display one div and conceal the others

https://codepen.io/leiacarts/pen/PoqRxNZ I need assistance with two specific tasks related to my website layout. Firstly, I am struggling to ensure that images displayed in the red sections remain constrained and automatically resize within the content di ...

javascriptjquerycss

Divide the toggle buttons into separate rows for better organization

Snippet: <mat-button-toggle-group value="0" (change)="toggleChangeQuestion($event)" name="selectQuestions" #group2="matButtonToggleGroup"> <div *ngFor="let item of test; let i = index;"> ...

cssangularangular-materialmaterial-uitogglebutton

Issue with displaying and hiding list elements using jQuery

I am attempting to create an accordion feature using <li> elements with classes .level1, .level2, .level3, and so on. The problem I am encountering is that when I click on a .level2 element, the items hide correctly until the next .level2 element wit ...

javascriptjqueryhtml

Exploring the utility of the load_file function in the simple HTML DOM method

After writing this code and it was functioning properly. <?php include ('require/simplehtmldom_1_5/simple_html_dom.php'); echo $html=file_get_html('http://www.site.com'); ?> Now I want to make it work using the object method. He ...

phphtmldom

Issue with Unslider functionality when using navigation buttons

I've implemented the OpenSource "unslider" to create sliding images with navigation buttons, but I'm facing an issue with the code provided on http:www.unslider.com regarding "Adding previous/next lines." Here are the CSS rules and HTML tags I h ...

javascriptjqueryhtml

Why does the selectedItems in the AngularJS grid keep coming back as undefined?

Is there a specific reason why the angularjs grid in my sample isn't displaying the selectedItems properly? Every time I attempt to reference the selectedItems, it returns "undefined." I have tested this in both Chrome and IE with identical outcomes. ...

javascriptangularjsng-grid

maintaining page state without navigating

I'm exploring the concept of using HTML5 pushState and I have found it to be quite effective. I am able to add states, navigate back in the browser, and everything seems to function properly. However, upon refreshing the page, I am consistently met wi ...

htmlroutespushstate

Utilizing Bootstrap 4.5 for a seamless user experience, implementing separate scrollbars for improved navigation, and ensuring

I'm currently working on a layout that involves organizing elements into 3 columns using Bootstrap 4.5. The center column will contain a lengthy body of text. Within the right column, there are two divs, one of which should be fixed either to the to ...

htmljquerycssbootstrap-4jquery-tocify-js