I am having an issue with the height of a theme-ui component I embedded. Even though the console shows it correctly, it is displaying at 100% height.
<Embed src={url} sx={{width: '800px', height: '400px'}}/>
This embed is contained within a modal that is set to occupy 100vw by 100vh.
Any help would be appreciated. Thank you!
After extensive testing of this component, I can confirm that there are no issues when a specific size is defined.
Make sure to include /** @jsx jsx */ in your code and then declare jsx by importing it like this
import { jsx } from "theme-ui";Also, be sure to use the latest version of theme-ui. In my example, I am using version 0.3.1
UPDATE:
Upon further investigation, it seems necessary to create your own component where you can define an iframe because the Embed component does not allow direct changes to some CSS properties.
With theme-ui, you can create an iframe using the Box component by setting the "as" prop like this:
<Box as="iframe" .../>Check out OwnEmbed.js:
/** @jsx jsx */
import { jsx, Box } from "theme-ui";
// Rest of the JavaScript code goes here...
The implementation of OwnEmbed is similar to the Embed component
In Main.js:
/** @jsx jsx */
import React from "react";
import OwnEmbed from "./OwnEmbed";
// Rest of the JavaScript code for Main component goes here...
By highlighting the element in the browser, you will see the correct size reflected. https://i.stack.imgur.com/parGC.png
For more information, refer to this link: Change size Embed from theme-ui
Welcome I am embarking on a project to construct a webpage using HTML, CSS, JavaScript (jQuery), and nearly 1000 images. The length of the HTML page is substantial, around 5000px. My vision involves creating a captivating visual experience for users as t ...
I am encountering an issue while trying to utilize a npm package called timestamp notes. After executing the following commands: $npm install timestampnotes $timestamp I receive the error message: timestamp:126: command not found: slk Subsequently, I ...
Currently, I am working on implementing avatar upload functionality in my Next.js blog with a Node.js server. For this project, I am utilizing Apollo client along with apollo-upload-client on the client side and apollo-express-server on the server side. H ...
Currently, I have a form that retrieves data from a database and includes a number input type field. When the field is empty, it defaults to displaying "0." However, I would like to hide the "0" and only show the value if it is different from 0. Despite a ...
Explaining the Issue The problem arises when using withPageAuthRequired with getServerSideProps, as the pageProps object is empty. Despite following common practices, the pageProps parameter remains undefined. Expected Outcome Upon calling getServerSideP ...
The following code is used: jQuery(document).ready(function() { console.log($(this)); }); After running this code, the object displayed in the console is: [Document mypage.html#weather] How can I retrieve the last ID from this object? In this ...
After receiving a response from the server, I need to adjust the button based on the friends_status field in the following response: { "responseHeader": { "type": "314", "status": "200", "message": "Successfully found the profile" }, "ne ...
Recently, I developed a function that generates random divs containing circles. The function randomly selects a border color for each circle, and this feature is functioning correctly. To enhance the appearance, I decided to add a box shadow to the circl ...
JavaScript: var data='<div id="hai">this is div</div>'; I am looking to retrieve only the ID "hai" using a regular expression in JavaScript. The expected output should be, var id = regularexpression(data); The variable id should n ...
I included this vector into my local host code, but the JSON file does not seem to load. geojson_layer = new OpenLayers.Layer.Vector("features", { projection: epsg4326, strategies: [new OpenLayers.Strategy.Fixed()], pro ...
Within my node.js application, I am looking to secure a specific route so that users can only access the page /post if they are coming from /blog. If the user accesses the route from any other source, they should be redirected to /. I have implemented the ...
Want to ensure typechecking works when defining React Class/Function components in TypeScript? Struggling to find a comprehensive guide on how to do it correctly. I've managed to define the Props and State interfaces, but I'm unsure about how to ...
Looking to rearrange the order of items using flexbox, but hitting a roadblock because one of the items I want to reorder is in a different div and not a direct child of the same parent as the other items. <div class="wrapper"> <div class="some ...
Here is the data I need help with: var information = [ { "_id": "5e458e2ccf9b1326f11b5079", "xxTitle": "testtttttttttttt", "hhhhhhhhhh": "sssssssss", "xxzzzzzz": null, "oooooooooooooo": "ssssss", "xxDescription": "sssssss", "xxDetails": "ssssssss", "llll. ...
During my attempts to execute server-side rendering with components that reference the window object, I encountered an error. Specifically, when including slick-carousel (https://github.com/kenwheeler/slick), the following error arose: var Slick = window. ...
My Angular application (view source code on Stackblitz) is running Angular 15, and it utilizes reactive forms along with a ControlValueAccessor pattern to construct a parent form containing child form groups. However, I am encountering an issue where the d ...
I have tried implementing OAuth in AngularJS using Hello.js following what I believe is the best practice. However, I am encountering some issues with my current approach as described below: After injecting Hello.js into Angular and setting up the OAuth p ...
Can someone help simplify this JavaScript code for me? I would really appreciate it. Thank you! $(function() { $("#show1").click(function() { $("#showmore1").toggle(); }) $("#show2").click(function() { $("#showmore2").toggle(); ...
Currently, I am using Puppeteer to access a website and capture a screenshot of a video. Unfortunately, the default Chromium browser that Puppeteer uses does not support certain video types. I have managed to get it working by launching Puppeteer with a l ...
Currently, I am unsure about what to search for in order to fulfill the following requirement. Specifically, I am utilizing the given type for react props: interface ComponentProps { message : string, minValue? : number, minValueValidationMessage? ...