Is it possible to incorporate MUI React components within an iframe?

Looking to replicate the style seen in this Material UI website screenshot, I aim to design a container that will encompass my iframe contents, such as the navBar and menu drawer. However, I want to utilize Material UI's components for these elements. How should I tackle this task?

The challenge I'm currently facing is that while my nav bar remains within the iframe, it appears that the drawer will slide out from the browser window instead of the designated iframe box.

To further complicate matters, I need to embed an additional iframe within this existing one to house my text content.https://i.stack.imgur.com/USQGP.png

htmlcssreactjsiframematerial-ui

Answer №1

Here is a practical demonstration of the concept you mentioned: Final outcome:

Main Page https://stackblitz.com/edit/react18-mui-srfhzb?file=Drawer.jsx,App.tsx

Iframe Content https://stackblitz.com/edit/react18-mui-c69cpe?file=Drawer.jsx,App.tsx

https://i.stack.imgur.com/T2Aer.png

Code:

import * as React from 'react';
import Drawer from '@mui/material/Drawer';
import Button from '@mui/material/Button';

export default function TemporaryDrawer() {
  const [open, setOpen] = React.useState(false);

  const toggleDrawer = (newOpen) => () => {
    setOpen(newOpen);
  };

  return (
    <div>
      <Button onClick={toggleDrawer(true)}>Open drawer</Button>
      <Drawer open={open} onClose={toggleDrawer(false)}>
        Example Drawer
      </Drawer>
    </div>
  );
}

Usage:

<Box sx={{ width: '90%', margin: 'auto' }}>
  <iframe
    src="your-iframe-page-url"
    title="description"></iframe>
</Box>

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

Accessing the current window dimensions using CSS

I'm experimenting with a way to set the background of the entire body element. <html> <head><head/> <body> <div class="wrapper"></div> </body> </html> How can I determine the height and width of the cu ...

jqueryhtmlcss

What steps can be taken to modify the border color of a Material-UI Box/Tab component to display in black?

I'm currently working on a React app where I am using the Box and Tab component from Material-UI. My goal is to change the border color of the Box component to black while still maintaining its function as a divider. Despite trying to set the borderCo ...

reactjsmaterial-ui

Obtaining a single element from a hidden display while dragging using Jquery UI

Is there a way to move an element outside of a container with overflow hidden when using drag and drop functionality in CSS? Currently, when I drag an element with the "item" class, it stays within the confines of the container with overflow set to hidden. ...

jquerycssjquery-uioverflowdraggable

Discover a step-by-step guide on incorporating a swipe animation into a responsive carousel

I'm currently using next JS in combination with tailwind css and the react-responsive-carousel package. The issue I'm facing is that when I swipe through the images, they transition horizontally without any additional effects such as fade or ease ...

reactjsnext.jstailwind-css

What is the best way to configure routes in react-router version 5?

Every time I try to access the "/view" route, the entire BaseLayout gets rendered and despite my numerous attempts, I have not been able to find a solution. import React from 'react'; import { BrowserRouter as Router, Route } from "react-rou ...

reactjsreact-router

Interact with jQuery to trigger events upon clicking on a list item, excluding checkboxes within the list

I'm in the process of developing a straightforward web application. I have a dynamically generated list on one section: Subsequently, I set up an event that triggers when any element within the list is clicked: $(document).on('click', &apo ...

javascriptjqueryhtmlcheckbox

Sharing CSS styles among multiple single-page applications (SPAs) developed using the React

I am currently working on multiple micro SPAs that exist independently within an Express environment. I am facing a challenge with importing a global CSS file that is located outside of the apps, as it is not being recognized. The use of @import url(asset ...

javascriptcssreactjsexpress

Whenever I try to make my links responsive, they don't seem to work as intended

This is the HTML snippet <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> ...

htmlcssbootstrap-4

Set the size of the website to remain constant

Is it possible to keep your website at a consistent size so that when viewed on a larger screen, it simply adds more background or space to the page? (I prefer not to use media queries to change the style as the screen size increases) ...

htmlcss

Metro ran into a problem when attempting to resolve the `clsx` module. The error was caused by the module having a `main` field that could not be found

I'm facing an issue while trying to utilize react expo with material ui for developing a gym log application. Every time I attempt to implement something from material ui, I encounter an error. My environment includes Windows 11, node.js 18.18.1, and ...

reactjsnode.jsmaterial-uiexpopackage.json

What is the reason behind every element in bootstrap being enclosed within an anchor tag?

I am currently delving into the world of bootstrap for the first time and encountering an issue with the grid system. Somehow, whenever I try to incorporate an - a href="#" - tag within the grid, it distorts the layout inexplicably. I have been struggling ...

phphtmlbootstrap-grid

Can an excess of CSS impact the speed and performance of a website?

After conducting thorough research on this specific topic, I was unable to locate the precise answer that I require. For instance, there are numerous divs within my project that necessitate a border. One approach is to create a distinct CSS class such as ...

htmlcss

Using React with Typescript: Can the parent component access data fetched from a nested child component?

Can I access data retrieved from a child component (using a graphql query) in a parent component? For example, how can I use the data fetched by React-component-4 in React-component-1? Is there a way to do this or do I have to duplicate the data fetching ...

reactjstypescriptgraphql

Failed npm test in React JS due to withoutRouter not being located inside the Router

I encountered an error while running npm test, does anyone know how to resolve it? FAIL src/App.test.js (13.306s) × renders learn react link (2323ms) ● renders learn react link Invariant failed: You should not use <withRouter(App) /> out ...

node.jsreactjstestingreact-routercircleci

What is the best way to enlarge a specific section of a map or image using HTML?

Can you resize a specific area of a map in HTML? ...

htmldictionaryscalearea

Utilizing the useSearchParams() function to retrieve live data in Next.js

Is there anyone who has successfully migrated from the pages router to the app router in Next.js? I am facing an issue with dynamic data migration. In the pages router, dynamic data is retrieved on a page using useRouter().query, but in the app router, it ...

reactjstypescriptmongoosenext.js

Adjust the dimensions of the bootstrap dropdown to match the dimensions of its textbox

The second textbox features a bootstrap dropdown with extensive content that is overflowing and extending to other textboxes below it. I am looking for a way to resize the dropdown to fit the size of its corresponding textbox. UPDATE: I want the dropdown ...

javascripthtmlcssbootstrap-5

Reveal Content once you give us a thumbs up on Facebook

Is there HTML/PHP code that can display specific content only after a user clicks the "Like" button on an external website, not an app? ...

phphtmlfacebookfacebook-like

Working with CSS3 transitions in PHPStorm is a breeze

For some reason, my phpstorm does not provide code completion for CSS properties like -webkit-translate, translate, or animation. Has anyone encountered this issue before? Any suggestions on how to fix it? ...

cssphpstorm

What causes HTML validator errors in all head meta-tags?

After running my HTML through a validator, I was shocked to discover around 80 errors even though the site appeared to be functioning properly. Here is an excerpt of the code: <!DOCTYPE html> <html lang="da-DK"> <head> <meta charset=" ...

htmlvalidation