I am using the react-particles-webgl npm package to render this webgl canvas:
I want the canvas to take up the entire screen. When I change the position of this element to "fixed" in the Chrome Developer tools it takes up the entire screen. So I went and changed the inline style of the particle field element to <ParticleField style={{ position: "fixed" }} /> But it still says the position is relative in the chrome developer tools. How do I change this?
This means ParticleField may not have style prop. You can either add style as prop for ParticleField, or wrap ParticleField with a div then use style={{position:fixed}} for that div
<div style={{ position: "fixed" }}><ParticleField /></div>
Look at the source of the library you're using. The key part would be the return statement in the component, which is effectively your render:
return (
<scene>
<group ref={group}>
{/* Bounding box that particles exist inside of */}
{showCube && (
<boxHelper>
<mesh name="object">
<meshBasicMaterial
attach="material"
color="white"
blending={AdditiveBlending}
wireframe
transparent
/>
<boxBufferGeometry attach="geometry" args={[r, r, r]} />
</mesh>
</boxHelper>
)}
{/* Lines connecting particles */}
{lines.visible && (
<lineSegments
geometry={lineMeshGeometry}
material={lineMeshMaterial}
/>
)}
{/* Particles */}
{particles.visible && (
<points geometry={pointCloudGeometry} material={pointMaterial} />
)}
</group>
</scene>
);
I would target <scene style={{ position:fixed; }}> based on what I see here. Another option might be to feed it through something like styled-components as an HOC.
Related
Here is a code sandbox example where I am trying to display a map inside of a specific component. But, I am not able to get the deck.gl and react-map-gl divs to live inside their parent. instead, they spill out to the extent of the document body.
The basic layout of the example is:
<Box id='mapcontainer'>
<DeckGL id="deck-gl">
<MapView id="map" >
<StaticMap/>
</MapView>
</DeckGL>
</Box>
It appears that Deck.gl is creating a <div> and a <canvas> element between the <Box id='mapcontainer'> div and the <DeckGL id='deck-gl'> div, and I can not get the div and canvas to live inside of their parent Box.
The id of the <div> and the <canvas> appear to be created from the id passed into the DeckGL component, id="deck-gl-wrapper" and id="deck-gl" respectively. Where "deck-gl" is the id I passed into the <deckGL> component.
That may or may not be the actual problem, but using the elements inspector in devtools that is my best guess right now.
Can anyone help me figure out why deck.gl and react-map-gl components are not living within their parent bounds? Even when I set the parent and/or canvas props in the DeckGL component?
Documentation links:
react-map-gl
deck.gl
A functioning example is included in the codesandbox linked above. I have included many of the things I have tried as comments but no luck so far.
https://codesandbox.io/s/deck-gl-and-mui-react-e3t23?file=/src/App.js
Thank you...
For local quick reference, the app.js file looks something like this.
import Box from "#material-ui/core/Box";
import DeckGL from "#deck.gl/react";
import { MapView } from "#deck.gl/core";
import { LineLayer } from "#deck.gl/layers";
import { StaticMap } from "react-map-gl";
const MAPBOX_ACCESS_TOKEN = <tokenInCodeSandboxIfYouNeedIt>
const INITIAL_VIEW_STATE = {
longitude: -122.41669,
latitude: 37.7853,
zoom: 13,
pitch: 0,
bearing: 0
};
const data = [
{
sourcePosition: [-122.41669, 37.7853],
targetPosition: [-122.41669, 37.781]
}
];
function App() {
return (
<Box
id='mapcontainer'
sx={{
border: 1,
height: 450,
width: "auto",
m: 5
}}
>
<DeckGL
initialViewState={INITIAL_VIEW_STATE}
controller={true}
id="deck-gl"
>
<LineLayer id="line-layer" data={data} />
<MapView
id="map"
controller={false}
>
<StaticMap
mapStyle="mapbox://styles/mapbox/dark-v9"
mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN}
/>
</MapView>
</DeckGL>
</Box>
);
}
export default App;
In order to allow the deck.gl component to take up the available space of the parent component you can add position: 'relative' into the overrides for your Box with an id of mapcontainer.
I am building a project based on this React Template.
In one of the componenets I have a Select List and under it there's a Card element.
The problem is that when I click on the list the items appear under the card element as you see below:
I had a feeling this was caused by the CSS code of the template itself that configures the card to appear over all other elements.
So what I did is I created a new react project with:
npx create-react-app
And my suspicion was right.
I copied basically the same code:
const selectStyles = {
control: (styles) => ({ ...styles, backgroundColor: "white" }),
option: (styles) => {
return {
...styles,
backgroundColor: "green",
"z-index": -5,
};
},
};
export default class App extends Component {
render() {
return (
<Fragment>
<Select
className="basic-single"
classNamePrefix="select"
defaultValue={colourOptions[0]}
name="color"
options={colourOptions}
styles={selectStyles}
/>
<Card
style={{
position: "absolute",
"background-color": "red",
"z-index": 5,
}}
>
<CardImg
top
width="100%"
src="/assets/318x180.svg"
alt="Card image cap"
/>
<CardBody>
<CardTitle tag="h5">Card title</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Card subtitle
</CardSubtitle>
<CardText>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</CardText>
<Button>Button</Button>
</CardBody>
</Card>
</Fragment>
);
}
}
And the select items appear ABOVE the card:
The card is colored in red.
CONCLUSION: The problem is caused by the card css code of the template.
As you see, I tried with different configurations with the z-index attribute, but to no avail.
Any idea how to fix this?
The problem is with the z-index and position, whichever content you want to show in the top should have higher z-index value.
Try giving the select dropdown the high values compared to card.
Try removing both css attributes position: absolute and z-index if it is not needed. Position absolute is only used when to need to move the content to wherever you want to the respective relative parent container. So if you are just practicing and not doing design try to remove both.
I'm working on a React project, and I need to add a semi-transparent, fullscreen, persistent image overlay. How can I do this? Any positioning stuff that I've tried before (including position: absolute have resulted in other screwed-up formatting.
Here's where I'd need it to go:
render() {
return (
<div>
{/* // overlay goes here */}
<div className="App" ref={ div => this.appElement = div}>
<div className = "Panels" ref={ div => this.panelElement = div}>
{this.instantiatePanels()[this.state.currentDisplayedIndex]}
</div>
</div>
</div>
);
}
Maybe something like this? I've used position: fixed so it covers the entire scrolling area.
Disclaimer:
I'm new to ReactJS, and web-development as a whole. Did my best to research before, and did not find an answer.
I'm probably missing something simple, but can't figure it out - so sorry if this question's answer is a one liner "How-Did-I-Miss-That' sort of answer.
Feel free to comment/answer with best practices I missed, or things I can improve in this question.
Thanks is advance to anybody that reads this!
My Own Research:
Float 3 Divs - I did not need the z-axis property, as non of my divs are on top of the other.
3 Divs LTR - Talks about 3 divs aligned horizontally, not vertically. The same method did not work for me in the vertical axis.
3 Divs LTR #2 - This talks about flex, so I tried it too. In the right direction, but not enough.
Vertical Align etc - could not make it happen with this solution either.
(5... 1000) A bunch of other first-second-third results in Google search queries like: "ReactJS vertical 3 divs" and the likes.
Actual Question:
Trying to make a basic outline of a mockup web-page, which consists of 3 divs:
Header Div - In The Top, Not Sticky (=when you y axis scroll, it does not appear).
Content Div - In The Middle, Y/X Axis Scrollable.
Bottom Nav Div - In The Bottom, Sticky.
Mockup:
My Current Status:
Can't make my bottom-menu div to appear. it's stuck under the frame.
Can't be sure my bottom-menu div is actually sticky because of the point above.
The contents tab div has no margin from the Header div, which makes the upper end of the text in it - unreadble.
My Code:
Did a lot of back-and-fourth on this, and this is the closest version I have for this simple (yet - not working!) task:
App.jsx
import React from "react";
import BottomMenu from "../BottomMenu/BottomMenu";
import Header from "../Header/Header";
import ContentTab from "../ContentTab/ContentTab";
const App = () => {
return (
<div style = {{display: "flex", flexDirection: "column", overflow: "visible",
direction: "rtl"}}>
<Header/>
<ContentTab />
<BottomMenu />
</div>
);
};
export default App;
Header.jsx
import React from "react";
import { Toolbar, AppBar } from "#material-ui/core";
import Typography from '#material-ui/core/Typography';
const Header = props => {
return (
<div>
<AppBar color="primary" style={{alignItems: 'center'}}>
<Toolbar>
<Typography>
Test
</Typography>
</Toolbar>
</AppBar>
</div>
);
};
export default Header;
ContentTab.jsx
import React from "react";
import Typography from "#material-ui/core/Typography";
import Paper from "#material-ui/core/Paper";
const ContentTab = (props) => {
return (
<div style={{height: "80%", width: "100%"}}>
<Paper align="center" elevation={3}>
<Typography paragraph>First</Typography>
<Typography paragraph>TextTab</Typography>
<Typography paragraph>Last</Typography>
</Paper>
</div>
);
};
export default ContentTab;
BottomMenu.jsx
import React from "react";
import BottomNavigation from "#material-ui/core/BottomNavigation";
import BottomNavigationAction from "#material-ui/core/BottomNavigationAction";
import RestoreIcon from "#material-ui/icons/Restore";
import FavoriteIcon from "#material-ui/icons/Favorite";
import LocationOnIcon from "#material-ui/icons/LocationOn";
import { Toolbar, AppBar } from "#material-ui/core";
export default function BottomMenu() {
const [value, setValue] = React.useState(0);
return (
<div style={{
position: "fixed", bottom: "0", width: "100%", height: "10%"}}>
<AppBar
style={{ background: '#FFFFFF', alignItems: "center" }}
>
<Toolbar>
<BottomNavigation
value={value}
onChange={(event, newValue) => {
setValue(newValue);
}}
showLabels
>
<BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
<BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
<BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
</BottomNavigation>
</Toolbar>
</AppBar>
</div>
);
}
Actually; the issue is that you're using the Material-UI component AppBar. If this were just a regular DIV tag then you could position it the way you want. To use the AppBar component and make it do what you what then this should do the trick:
remove the outer DIV on the BottomMenu component
style the BottomMenu component's appBar with top of auto and bottom of 0 and give it a position property of fixed.
additionally, style the Header component's appBar with position of static.
this:
in BottomMenu:
<AppBar
position="fixed"
style={{
top: "auto",
bottom: "0",
background: "#FFFFFF",
alignItems: "center"
}}
>
in Header:
<AppBar
position="static"
color="primary"
style={{ alignItems: "center" }}
>
Here's a link to the docs that show it doing what you want:
https://material-ui.com/components/app-bar/
and here's a link to a code sandbox with your code.
https://codesandbox.io/s/material-ui-with-bottom-appbar-ugk31
In general, what I've found with Material-UI is that some of their components have positioning logic built into them and you need to use their properties for positioning instead of trying to do it with CSS.
I am new to react and I have a react component structure like:
<MainComponent>
<Button />
<Content />
</MainComponent>
Now when I click on the Button, I need to replace the existing div (say div1) of the Content component with another div (div2). Can you please tell me how to do it. Thank you.
Note: Till now, on click event I have been changing the data of the single div using state and prop. Now I got to replace the whole div with another one.
Like this.
render() {
var returnIt;
if (useDivOne) returnIt = (<div id='one'></div>);
else returnIt = (<div id='two'></div>);
return (returnItj);
}
If this is your structure:
<MainComponent>
<Button />
<Content />
</MainComponent>
and Content renders something like:
<div>
this is div 1
</div>
I would think you would need to pass a prop to Content that would tell you which div to render, then in Content's Render you manipulate the properties of Boolean logic to present a different component:
class Content extends Component {
render() {
return(
{
!this.props.RenderDiv2Bool &&
<div>
This is Div1 and it will be rendered
because RednerDiv2Bool is false.
</div>
}
{
this.props.renderDiv2Bool &&
<div>
This is Div2 and it will be rendered
because RednerDiv2Bool is true.
</div>
}
)
};
}
Not necessarily better but just another way to do it.