I have this embed theme-ui component and it's height doesn't works. In the console appears ok, but it displays with 100%;
<Embed src={url} sx={{width: '800px', height: '400px'}}/>
The embed is inside a modal of 100vw for 100vh
Thanks
I've been testing with this component, and there is no problem when I define a specific size.
Be sure that you're putting in your code /** #jsx jsx */ and after that declare jsx, like this import { jsx } from "theme-ui";
And try to use the lastest version, in the example I'm using 0.3.1 for theme-ui
UPDATE
Digging deeper, I think it's necessary create your own component where you can define an iframe because Embed component doesn't allow you change some css properties directly.
Theme-ui allows you create an iframe using Box component setting the a prop like this:
<Box as="iframe" .../>
OwnEmbed.js
/** #jsx jsx */
import { jsx, Box } from "theme-ui";
const OwnEmbed = ({
src,
frameBorder = 0,
allowFullScreen = true,
width = "100%",
height = 0, /** <-- It's necessary set height from outside*/
iFrameWidth = 560,
iFrameHeight = 315,
allow,
...props
}) => {
return (
<Box
{...props}
__css={{
width: width,
height: height,
position: "relative",
overflow: "hidden"
}}
>
<Box
as="iframe"
src={src}
width={iFrameWidth}
height={iFrameHeight}
frameBorder={frameBorder}
allowFullScreen={allowFullScreen}
allow={allow}
__css={{
position: "absolute",
width: "100%",
height: "100%",
top: 0,
bottom: 0,
left: 0,
border: 0
}}
/>
</Box>
);
};
export default OwnEmbed;
The implementation it's same as Embed component
Main.js
/** #jsx jsx */
import { jsx, Embed, Box, Flex } from "theme-ui";
import React from "react";
import OwnEmbed from "./OwnEmbed";
class Main extends React.Component {
render() {
return (
<Box p={1} bg="red">
<OwnEmbed
src="https://www.youtube.com/embed/GNCd_ERZvZM"
width="100px"
height="100px"
/>
<hr />
<OwnEmbed
src="https://www.youtube.com/embed/mQ055hHdxbE"
width="200px"
height="200px"
/>
<hr />
<OwnEmbed
src="https://www.youtube.com/embed/7oVnHbHhxLo"
width="400px"
height="200px"
/>
</Box>
);
}
}
export default Main;
If you highlight the element in the browser you'll see the correct size.
Take a look at this: Change size Embed from theme-ui
Related
I am implementing the exact same code shown in the material-ui library documentation here
https://mui.com/x/react-data-grid/layout/#flex-layout
I am trying to implement the flex layout,
I just did the exact same steps and the console shows the error all the time:
Sandbox:
https://stackblitz.com/edit/react-8ahs3n?file=src/App.js
Please help, appreciated.
In the documentation example you linked to there is one additional div wrapping what you have in your code: <div style={{ height: 400, width: '100%' }}>. Including that wrapper element (which gives the element an intrinsic height as mentioned in the console warning) gets rid of the console error. Here's a modified version of your stackblitz that does not have the error: https://stackblitz.com/edit/react-m2uoq1?file=src%2FApp.js.
The 400px height in the documentation example can be replaced by whatever height you want -- it just can't be percent-based. If you want the DataGrid to be the full height of the browser, you can use 100vh instead of 100%.
Here's an example:
import * as React from "react";
import { DataGrid } from "#mui/x-data-grid";
import { useDemoData } from "#mui/x-data-grid-generator";
import CssBaseline from "#mui/material/CssBaseline";
export default function FlexLayoutGrid() {
const { data } = useDemoData({
dataSet: "Commodity",
rowLength: 50,
maxColumns: 6
});
return (
<>
<CssBaseline />
<div style={{ height: "100vh", width: "100%" }}>
<div style={{ display: "flex", height: "100%" }}>
<div style={{ flexGrow: 1 }}>
<DataGrid {...data} />
</div>
</div>
</div>
</>
);
}
In my example I included the CssBaseline component in order to get rid of the default 8px margin on the <body> element -- otherwise using 100vh will cause a scroll bar to appear; however the default margin (or a custom margin in your app) can be accounted for in other ways by using calc (e.g. height: "calc(100vh - 16px)").
Use a wrapper component such as Box from Material UI with flex display and height:
<div style={{ height: 400, width: '100%' }}>
<Box style={{
display: "flex",
height:400,
justifyContent: "center",
alignItems: "center"
}}
>
<Datagrid/>
</Box>
</div>
I have attempted to let 'react-pdf' to change its size by using media query.
I do understand that:
// when I put mouse cursor on <Document>, it displays:
(alias) class Document import Document
<div className="pdf">
<Document file={HomePDF}>
<Page scale={1.5} pageNumber={1} />
</Document>
</div>
is how to adjust the scale in general.
But with media query on css,
#media only screen and (max-width: 600px) {
.home-text {
width: 400px;
}
.pdf {
width: 400px;
}
}
Despite reading the document, I can't get an idea.
https://react-pdf.org/styling#media-queries
The size of pdf displayed on the page does not take effect.
With this error message:
"Compiled with problems:X
ERROR in ./src/pages/Home/Home.js 12:15-32
export 'StyleSheet' (imported as 'StyleSheet') was not found in 'react-pdf/dist/esm/entry.webpack5' (possible exports: Document, Outline, Page, pdfjs)"
I feel like I lost the way. What should I do to change the size of this react-pdf outcome other than the hook? Or is there a way I can do?
// Home.js
import React from "react";
import "./Home.css";
// pdf
import React from "react";
import "./Home.css";
// pdf
import { Document, Page } from "react-pdf/dist/esm/entry.webpack5";
import { StyleSheet } from "#react-pdf/render";
import HomePDF from "../../pdf/resume.pdf";
const styles = StyleSheet.create({
section: {
width: 200,
"#media max-width: 400": {
width: 300,
},
"#media orientation: landscape": {
width: 400,
},
},
});
function Home() {
return (
<>
<div className="home-wrapper">
{/* layer very back */}
<div className="home-content">
<div className="home-text">
{/* profile picture, box */}
<img
className="profile"
src={require("../../images/me-photo.jpg")}
/>
<hr />
{/* pdf */}
<div className="pdf">
<Document file={HomePDF}>
{/* <Page scale={1.5} pageNumber={1} /> */}
<Page size="A4" style={styles.page} />
</Document>
</div>
</div>
<hr />
</div>
</div>
</>
);
}
export default Home;
I'm stuck and can't place the background image on my next JS app.
Here is my code.
globals.css
.container {
padding: 0 2rem;
background-image: url(../public/images/landing-page-illustration.svg);
}
index.js
import Head from 'next/head'
import Image from 'next/image'
import Navbar from '../components/navbar';
import styles from '../styles/Home.module.css'
export default function Home() {
return (
<div className={styles.container}>
<Navbar/>
</div>
);
}
You just need to do this. It works for me. Update the tailwind class with your css.
<div className="relative"> <!--position: 'relative' -->
<Image
src="image path"
layout="fill"
objectFit="cover"
/>
<div className="w-full relative"><!-- position: 'relative' -->
<h2 className="text-center font-semibold text-4xl pb-8 pt-14 text-pink-600">hello</h2>
</div>
</div>
The height of background will increase according to the content. You can fix the height by
height:'80vw'
I also stuck in this problem then I just used next-images and declare this in the jest.config.js file like this -
module.exports = {
async redirects() {
return [
{
...
},
];
},
reactStrictMode: true,
future: { webpack5: true },
images: {
domains: ['https://...'],
},
};
const withImages = require('next-images');
module.exports = withImages();
and just used<img /> tag to render the image
<img
src={Wave}
style={{
zIndex: -1,
width: '100%',
position: 'absolute',
}}
className='md:bottom-px origin-center rotate-180 md:rotate-0 '
alt=''
/>
Apparently I'm having such a hard time styling material-ui components, maybe it's my poor knowledge of the framework, nevertheless let's judge that when I'm done explaining the situation.
I have a landing page that displays a video as the background and what I want is to add other components to the center of that video screen like typographies.
here's my component:
import React, {Fragment, useState} from 'react'
import {createStyles, Grid, makeStyles, Typography} from '#material-ui/core'
import DrawerC from '../components/drawer'
import AppbarC from '../components/appbar'
import background from '../assets/background.mp4'
const useBackgroundStyle = makeStyles((theme)=>createStyles({
root:{
width: '100%',
height: '100%',
overflowX: 'hidden'
},
typographyMiddle:{
∎∎∎∎∎∎ SOME STYLING TO POSITION THE TYPOGRAPHY IN THE MIDDLE ∎∎∎∎∎∎
position: 'absolute',
∎∎∎∎∎∎ ------------------------------------- ∎∎∎∎∎∎
},
[theme.breakpoints.down('md')]:{
root:{
width: window.screen.width,
height: window.screen.height,
objectFit: 'cover',
objectPosition: '20% 0%',
overflowX: 'hidden'
}
}
}))
export default function () {
const backgroundStyle = useBackgroundStyle()
const [drawerState, handleDrawerState] = useState(false)
const [datepickerState, handleDatepicker] = useState(false)
return(
<Fragment>
<AppbarC handleDrawerState={handleDrawerState} handleDatepicker={handleDatepicker} />
∎∎∎∎∎∎ THIS IS THE PART OF THE CODE THAT MATTERS ∎∎∎∎∎∎
<video autoPlay='autoplay' muted loop id="myVideo" className={backgroundStyle.root}>
<source src={background} type="video/mp4" />
</video>
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justify="center"
style={{ minHeight: '100vh' }}
className={backgroundStyle.typographyMiddle}
>
<Typography className={backgroundStyle.typographyMiddle}> THIS IS A TEST </Typography>
</Grid>
∎∎∎∎∎∎ ------------------------------------- ∎∎∎∎∎∎
<DrawerC state={drawerState} handleDrawerState={handleDrawerState} />
</Fragment>
)
}
I tried this method which I saw in another stackoverflow question asked by someone else but all it did was to center the typography but it added extra white space to the page.
So the main questions I would like to know the answers to really are:
what is the best way to centralize an element which is not a part of the framework?
what is the best way to centralize a component that IS a part of the framework?
what is the best way to style an element/component and test it when using the framework?
how does the framework's styling work?
You should be able to use "position:relative" on the parent (wrapper) component and then use "position:absolute" on the child component and using % + vh you can place the child component anywhere within the parent component.
Whats my requirement: i have some images in my external folder and i need to import to component and display it and also have to use Virtual Scroll here i have to display 1 row in div and in that 1 row have to show 5-6 images
What i did : i consumed images using context from external folder and showed images in 1 rows in div and 5-6 images but i am facing issue unable to set it to Virtual scrolling
as i checked react-virtualized & react-window plugin but i am not sure how my data is used in that format
After using the react-tiny-virtual-list images are getting stacked
below is my code
class App extends React.Component{
state={
Response:[],
}
importAll(r) {
return r.keys().map(r);
}
componentWillMount() {
let data = this.importAll(require.context('./imageFolder/', false, /\.(png|jpe?g|svg)$/));
this.setState({ Response:data})
}
render(){
return(
<div className="container" id="imagecontainer">
<div className="viewport">
{this.state.Response.map((image, index) => <img key={index} src={image} alt="info"></img> )} }
</div>
</div>
)
}
.container {
padding: 0% 6%;
height: 400px;
}
.viewport {
height: -webkit-fill-available;
width: 100%;
border: 1px solid black;
overflow: scroll;
}
img {
height: 250px;
width: 150px;
padding: 35px;
}
After implementing React-tiny-list
<div id="container">
<div id="viewport">
<VirtualList
height='400px'
width='100%'
itemCount={this.state.items.length}
itemSize={20} // Also supports variable heights (array or function getter)
style={{padding:'20px'}}
renderItem={({index, style}) =>
<div key={index} style={style}>
<img key={index} src={this.state.items[index]} alt="info"></img>
</div>
}
/>
</div>
</div>
you can also use the https://github.com/bvaughn/react-virtualized plugin in this if you want to display this as table you can choose list or you can choose grid also .For you requirement i recommend using Masonry from 'react-virtualized';
below is the sample for displaying
import React from 'react';
import {
CellMeasurer,
CellMeasurerCache,
createMasonryCellPositioner,
Masonry
} from 'react-virtualized';
import 'react-virtualized/styles.css';
var images = [];
const columnWidth = 250;
const defaultHeight = 260;
const defaultWidth = columnWidth;
const cache = new CellMeasurerCache({
defaultHeight,
defaultWidth,
fixedWidth: true
})
// Our masonry layout will use 3 columns with a 10px gutter between
const cellPositioner = createMasonryCellPositioner({
cellMeasurerCache: cache,
columnCount: 4,
columnWidth,
spacer: 27
})
function cellRenderer ({ index, key, parent, style }) {
const datum = images[index]
const height = columnWidth || defaultHeight ;
return (
<CellMeasurer
cache={cache}
index={index}
key={key}
parent={parent}
>
<div style={style}>
<img
src={datum}
style={{
height: height,
width: columnWidth,
display: "block"
}}
alt="info"
/>
</div>
</CellMeasurer>
)
}
class Grid extends React.Component{
importAll(r) {
return r.keys().map(r);
}
componentWillMount() {
images = this.importAll(require.context('../imageFolder/', false, /\.(png|jpe?g|svg)$/));
}
render(){
return(
<div id="container">
<div id="viewport">
<Masonry
cellCount={images.length}
cellMeasurerCache={cache}
cellPositioner={cellPositioner}
cellRenderer={cellRenderer}
height={400}
width={1320}
/>
</div>
</div>
)
}
}
export default Grid;
I hope this will resolve your issue
If you're having trouble implementing the virtual scroll, note that the order of the imports is important when doing this, so pay heed to this - it could be contributing to your issue. (An aside: There is an npm plugin for implementing a virtual list.)
An overview of the import order for virtual scroll is:
import * as React from 'react';
import Paper from '#material-ui/core/Paper';
import {
Grid,
VirtualTable,
TableHeaderRow,
} [from material ui];
import {
your-components
} from 'your-path';
(above is non-specific, just a rough guide to the order)
You could also use a ScrollView if you are unable to implement a "Virtual scroll".
The following style will give you a horizontal scroll (as opposed to the default vertical), to enable you to display your images in a horizontally-scrollable row
<ScrollView horizontal={true}>
Hope this helps