CSS "Issue with enabling scroll functionality on Chrome browser"

Having an iframe with content that fits inside, I utilized the overflow:scroll property to ensure scrollbars are always present. While this solution worked in Firefox and IE, unfortunately it did not have the same effect in Chrome.

#iframeid
{
    height:500; width:1150
}
#iframeid::-webkit-scrollbar
{
    width: 12px;
    overflow-x:scroll;
    overflow-y:scroll;
}

However, instead of solving the issue, the code above ended up completely removing the scrollbars. Is there something crucial that I am overlooking?

cssgoogle-chromeiframewebkit

Answer №1

Implement the scrolling attribute within an iframe element.

<iframe width="200" height="200" scrolling="yes/no/auto"></iframe>

Answer №2

Here is a simple CSS solution:

#myiframe{
    height:500px;
    width:1150px;
    overflow:scroll;
}

This code has been tested and works well in Chrome: http://jsfiddle.net/ukcG9/6/

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

Steps for executing the code on cPanel

Below is the code I have been using to convert PPT files to IMG <html> <head> <title>ShotDev.Com Tutorial</title> </head> <body> <?php $ppApp = new COM("PowerPoint.Application"); $ppApp->Visible = True; ...

phphtmlcss

CSS: Flexible Sidebar - Dynamic Content

Can someone provide clarification on this visual illustration? To sum it up, I am looking to create a sidebar div that adjusts its width based on the content within, alongside a mainContent section that fills the remaining window width. ...

htmlcssxhtml

Adjust the height of the box based on the content within its flexbox

I have a flexbox div nested inside another div, and I'm trying to adjust the height of the outer box based on the content of the inner flexbox. Here is the link to the current fiddle. The issue I am facing is that the text in the second box overflows ...

htmlcssflexbox

Create a React MUI component that allows menu items to become sticky when selected

Is there a way to make the mui MenuItem stay sticky to Select while scrolling down? To see the issue in action, check out this codesandbox example https://codesandbox.io/s/quirky-knuth-5hr2dg?file=/Demo.tsx Simply click on the select and start scrolling ...

javascriptcssreactjsmaterial-uidrop-down-menu

Struggling to create a dynamic design for a nested column using bootstrap

After creating a layout in Figma, I have set up a grid structure as follows: <div class="container-fluid"> <div class="row" id="sobre-nos-wrapper"> <div class="col"> <div class="row"> <div class="col ...

csstwitter-bootstrapbootstrap-4

Is there a way to implement an onclick event on a specific line of text that triggers a popup box only when the text is clicked, without the popup appearing automatically when

I received assistance from a fellow user to customize a popup that turned out great. However, I'm having trouble getting the onclick function to work properly so that the popup only appears when the phone number is clicked. Ideally, I want the phone n ...

javascripthtmlcssonclick

Integrating Ruby code and outputting content with puts in an HTML

In my html.erb file, I have some HTML code. Within it, I included this Ruby snippet: <li <%= puts "class='active'" %>>Link</li> However, when I test the code on a Rails server, the class="active" part does not appear as expect ...

htmlcssruby-on-railsruby

Effective HTML element placement with CSS styling

My HTML code includes a form containing a table. Take a look: This is the Code I'm Using: <html> <head></head> <body> <form onsubmit="" id="form1" action="" method="post" name="form1" style="position: rela ...

htmlcssweb-applicationsxhtml

Implementing a Timer on an HTML Page with JavaScript

I am looking to add a timer to my HTML page using JavaScript. The timer should get the selected date and time from an input field <input type="date" /> and control it. If the time difference between the current time and the selected time is less than ...

javascriptjqueryhtmlcsstimer

How to centrally align an image with HTML tags <p></p>

https://i.sstatic.net/iTBOI.jpg I need help with HTML alignment for my website How can I center align the text with the image? #main__img { text-align: center; height: 80%; width: 80%; } .main__content p { margin-top: 1rem; font-s ...

javascripthtmlcssjekyll

Issue with flex-grow property not functioning as expected in Internet Explorer 11

Hello! I'm running into an issue with flexbox in Internet Explorer: http://jsfiddle.net/EvvBH/ I've noticed that the #two element has flex: auto, which is meant to make it expand to fill the container, even if there's limited content. Ho ...

cssinternet-explorerflexbox

Curved edges navigation bar design

Having trouble rounding the corners of my navigation bar. When I use border-radius: 15px;, it rounds all the corners of the <a> tag, but I only want to round the corners of the <li> tags to adjust the margins of the whole toolbar. Check out th ...

htmlcss

Exploring the functionality of Virtual Studio Design view while developing asp.net applications with compelling CSS design

When I use an external CSS to style my controls, the layout appears disorganized in the Design View of VS2008. Every time I make a modification to my CSS, I am unable to preview it in design view. Instead, I have to run the web page and open my browser to ...

asp.netcssvisual-studio-2008view

Activate the ion-navbar button when submitting from the modal page

import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; import {ModalPage} from '../modal-page/modal-page'; @Component({ selector: 'page-page2', templateUrl: 'pa ...

htmlcssangularionic2ionic-popup

The issue I am facing with this self-closing TITLE tag causing disruption to my webpage

I am encountering a problem with my basic webpage. <html> <head> <title/> </head> <body> <h1>hello</h1> </body> </html> When viewed in both Chrome and Firefox, the webpage ...

csshtml

Ways to stop click propagation in the case of a parent anchor link containing a button among its children

Every time I click on the Link parent, it triggers a click event on the button as well. I want these events to be independent. <Link className="product-item__link" to={`/products/${product.category}/${product.id}`} > <div className ...

javascripthtmlcssreactjs

Ensure that the top border is aligned perfectly with the top of the page while keeping the text in its

I am a beginner student working on my very first project, so I appreciate your patience as I learn. Currently, I am trying to add a hover effect to the navigation bar links where a blue bar appears at the top of the link and touches the border of the page ...

htmlcssflexbox

Issues with the appearance of CSS styles on a Firebase site

After deploying a SPA in Firebase, I noticed that the CSS styles only appear correctly after refreshing the browser. I have created a short video demonstrating the issue: https://www.youtube.com/watch?v=dIuQ-axizj8 This is my firebase.json configuration: ...

cssreactjsfirebasemern

The design breaks occur exclusively in the Android default browser

I am experiencing issues with the design of a nested div element when viewed in the default Android browser. Unfortunately, I don't have access to tools that would allow me to identify the cause of this problem. However, the design functions correctly ...

jqueryhtmlcsscross-browser

What's the reason for the font weight property in CSS not affecting the font family?

The code structure in my HTML file includes a link to Google Fonts with the following call: <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet"> Following that, I specify the font family and weight in the CSS section: ...

htmlcssfonts