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
I recently created a script to change the background color when a radio button is selected. While it works for checkboxes, I noticed that when another radio button is selected, the previous one still remains with the selected color. <script type="text/ ...
I have been attempting to set up the material dashboard by cloning the repository using the following command: git clone https://github.com/creativetimofficial/material-dashboard-react.git. I am using node version 16 for this setup. After running npm inst ...
I have a schedule array that outlines the working hours of a company for each day of the week. I am looking to determine if the company is currently open or closed, and if open, display the closing time. If closed at the current time, I want to show the n ...
How can I effectively send a stream to a child process for streaming audio from a client to a server? I have successfully obtained the audio stream from a client. const ss = require('socket.io-stream'); const socketIo = require('socket.io& ...
I've encountered an issue while trying to call the setShowCart(true) function in Navbar.jsx. I'm unsure of how to fix this. import React from 'react' import Link from 'next/link'; import {AiOutlineShopping} from 'react-ic ...
I'm struggling to implement a mobile menu for my website. After adding the necessary code, when I view the page in a mobile viewport, all I see are two sets of periods ("..."). However, unlike in the code snippet provided, the list does appear on the ...
Playing around with Highcharts in this plunker has led me to wonder if it's possible to dynamically set the color of a bar based on its value. In my current setup, I have 5 bars that change values between 0 and 100 at intervals. I'd like the colo ...
Creating a function that involves multiple boxes with a search function. The search function is working for the most part, but when clicking on a result, certain content should display. function filterFunction() { var input, filter, ul, li, a, i; ...
As I embark on creating my very first website, I find myself delving into the world of fonts from Font Squirrel. However, a challenge arises as I realize that not all the fonts I downloaded from the site are easy to use. The real struggle comes when deal ...
In the function below, I am attempting to retrieve the user's current location and update specific location properties: export const getCurrentLocation = () => { const location = { userLat: '5', userLng: '' } navi ...
While working on my vue3 project and writing tests with jest, I have encountered an issue where jest is incorrectly marking the CSS within several single file components as untested, even though it doesn't need to be tested. Moreover, its assessment ...
Attempting to convert a JSON file into an array and then randomly selecting 5 items from it. I suspect the issue lies in my render/return statement at the end of ImageContainer.js, but as a newbie in ReactJS, it could be anything. Any assistance or guida ...
Whenever I make a request using curl or hurl, an issue arises. Despite req.headers['content-length'] showing the correct length and req.headers['content-type'] being accurate, req.body returns as {}. Below is the Hurl test: POST http:/ ...
Issue: I am facing a problem with my text input. The placeholder can hold a maximum of 2000 characters, but when the user starts typing, the height of the text input does not automatically shrink back down. It seems like the height of the multiline text ...
I'm attempting to run a basic query to my Azure SQL server from NodeJs, but I'm encountering errors indicating that I cannot establish a connection to the server. The details provided in my code are correct because I've used them successfull ...
I've been experimenting with SVG animation. My goal is to change the color of a circle when it's hovered over. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 437 ...
Within the "myCollection" target collection, there exists a field named "japanese2". This field is an array or an object that contains another object with a property called "japanese2a", initially set to 0 but subject to change. My goal is to update this p ...
Having a bit of an issue here. I'm working on an app where users can upload images using axios. In order to enhance the user experience, I'm trying to implement a loading bar. Here's what it looks like: <div class="loadingbox" :style="{ ...
I've been struggling with converting an AJAX response containing XML text into a downloadable file. I've tried various methods but haven't had success. In the past, I was able to work with a similar scenario involving a pdf, where the conte ...
Here is the HTML code provided: <label for="xxxx" id="Password_label"> <div class="xxxx">Password 555</div> 555 <div class="xxx"></div> </label> I am attempting to replace the text "555" that appears inside th ...