I am creating a airline reservation system using mern stack
I did the navbar and all is well but everytime I add a div or an element in general it's outside the page and I have to style it to be at the position I want it
I want the buttons to be in the middle of the page without forcing it using style
EDIT 1: here is my navbar element
import React from "react";
import { Component } from 'react';
import './style.css';
import background from "./background.jpg";
import SideBar from "./sidebar";
export default class Navbar extends Component {
showSettings (event) {
event.preventDefault();
}
render () {
// NOTE: You also need to provide styles, see https://github.com/negomi/react-burger-menu#styling
return (
<div id="App" style = {{ backgroundImage: `url(${background})`, backgroundPosition: 'center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
position:"relative",
width: '100vw',
height: '100vh' }}>
<SideBar pageWrapId={"page-wrap"} outerContainerId={"App"} />
</div>
);
}
}
try to change position from relative to absolute
Related
Hello this is for a React/Gatsby website i'm working on.
I'm searching for a way to animate the child paragraph of a div using only CSS transition:
<div>
<p>{excerpt}</p>
</div>
Where excerpt is a variable i'm changing via Javascript when the cursor hovers the parent <div>.
This is the simplified React component. excerpt is a React state:
import React, { useState } from 'react'
const PostExcerpt = ({ post, featured }) => {
const [excerpt, setExcerpt] = useState(post.shortExcerpt)
const handleHover = (event, hover) => {
event.preventDefault()
if (hover) setExcerpt(post.longExcerpt)
else setExcerpt(post.shortExcerpt)
}
return (
<div
onPointerOver={(event) => {
handleHover(event, true)
}}
onPointerOut={(event) => {
handleHover(event, false)
}}
>
<p>{excerpt}</p>
</div>
)
}
export default PostExcerpt
The height of the <p> is adjusted automatically when content changes and i would like to animate the height change.
How can I transition height: 0; to height: auto; using CSS? doesn't apply because the height of my element is always set to auto. It simply changes because it follows content dimensions.
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 using react-monaco-editor but I am not able to make it responsive. It takes a fixed height and width in the components. If I change the screen size, the width stays fixed.
<MonacoEditor
width="1200"
height="600"
language="typescript"
theme="vs-dark"
defaultValue="//type your code here"
value={code}
options={options}
onChange={this.onChange}
editorDidMount={this.editorDidMount}
className='editor1'
/>
If I remove the width and height from the component, the component diminishes. I tried overriding the component className with flex. But it doesn't seem to work well.
.react-monaco-editor-container {
flex: 2;
}
Can you help me with the CSS to make this responsive?
Simply in options set automaticLayout: true
You could add a resize handler in order to figure out the available space for your editor container and pass it to your Monaco Editor right away.
There are as well different libraries that assist you with that:
https://www.npmjs.com/package/react-resize-detector
Here you can find a Sandbox example with using the library above:
https://codesandbox.io/s/vibrant-goldwasser-3d8j7?fontsize=14&hidenavigation=1&theme=dark
import React from "react";
import { withResizeDetector } from "react-resize-detector";
const Editor = ({ width, height }) => (
<div
style={{
background: "grey",
height: height,
width: width
}}
>
Editor container with {width} x {height}
</div>
);
export default withResizeDetector(Editor);
After a few things didn't work with CSS, I tried javascript to solve this
updateDimensions = () => {
this.setState({
width: window.innerWidth - 501,
height: window.innerHeight - 50,
});
};
componentDidMount() {
window.addEventListener("resize", this.updateDimensions);
}
componentWillUnmount() {
window.removeEventListener("resize", this.updateDimensions);
}
Storing the height and width in the state and changing on resize event did the job.
I am trying to make one pdf page as one base64 image using react-pdf in my reactjs web application.
and I have tried everything that I know of for making the image as an A4 size
image and fill the image completely so that one image comes as one entire page in react-pdf
I have tried width:100%, height:100%, object-fill, tried to increase the size.
but so far I am unsuccessful.
Right now the image comes on center and does not make it to all the corners in the page.
import React, { Component } from 'react'
import ReactPDF, { Page, Text, View, Document, StyleSheet , Font, Image,} from '#react-pdf/renderer';
import pic from "../pics/pic.jpeg"
// Create styles
const styles = StyleSheet.create({
page: {
flexDirection: 'row',
backgroundColor: '#fff',
width:"100%",
orientation:"portrait"
},
image: {
width: '100%',
height:"100%",
padding: 10,
backgroundColor: 'white',
},
});
// Create Document Component
export default class ImageToPDF extends Component {
render() {
return (
<Document >
<Page object-fit="fill" style={styles.page} size="A4">
<View object-fit="fill" style={styles.image}>
<Image object-fit="fill" style={{ padding:"0, 0, 0, 0", margin:"33%, 2rem, 2rem, 2rem",
transform: 'rotate(90deg)'}} src={pic} alt="images" />
</View>
</Page>
</Document>
)
}
}
Expected output: One image comes as one page in the pdf using react-pdf.
Actual result: one image comes in the middle of a page using react-pdf and has a lot of margin on all four sides
Thanks a lot for the help. I really appreciate it
A bit late i guess, but maybe someone else can be helped by this.
I think the code below will do the trick.
I've altered a few things:
The view element had padding, i removed it.
applied objectFit to the image element, I would suggest to use "cover" instead of "fill".
Let me know if this helped.
import React, { Component } from 'react'
import ReactPDF, { Page, Text, View, Document, StyleSheet, Font, Image } from '#react-pdf/renderer';
import pic from "../pics/pic.jpeg"
// Create styles
const styles = StyleSheet.create({
page: {
flexDirection: 'row',
backgroundColor: '#fff',
width: '100%',
orientation: 'portrait',
},
view: {
width: '100%',
height: '100%',
padding: 0,
backgroundColor: 'white',
},
image: {
objectFit: 'cover',
},
});
// Create Document Component
export default class ImageToPDF extends Component {
render() {
return (
<Document >
<Page object-fit="fill" style={styles.page} size="A4">
<View style={styles.view}>
<Image style={styles.image} src={pic} alt="images" />
</View>
</Page>
</Document>
);
};
};
I have this kind of situation. I am using Navigation bar wrapper that when clicked pull out an overlay across whole page.
For this to work all the elements that overlay goes across are sibling elements. One of those siblings is Header, Body, Footer...
I need to position navigation bar absolutely on top of Header element, so it doesn’t go out of boundaries of Header. If I put position absolute on Navigation bar it positions it relative to whole page since there is no parent element with position relative above it. If I put position relative on Header it doesn't help since it a sibling and not parent of Navigation bar.
Is it possible to absolutely position one element relative to its sibling element?
EDIT: Don't know how much code will help since it's a pretty big application and I bolied the question down to simple terms.
Scenes
const Scenes = (props: Props) => (
<NavigationWrapper routes={props.routes}>
<Header />
{renderRoutes(props.routes)}
</NavigationWrapper>
)
NavigationWrapper
/* #flow */
import React, { Component, Fragment, } from 'react'
import { NavLink, } from 'react-router-dom'
import Icon from 'semantic-ui-react/dist/commonjs/elements/Icon/Icon'
import Image from 'semantic-ui-react/dist/commonjs/elements/Image/Image'
import Menu from 'semantic-ui-react/dist/commonjs/collections/Menu/Menu'
import Sidebar from 'semantic-ui-react/dist/commonjs/modules/Sidebar/Sidebar'
import Responsive from 'semantic-ui-react/dist/commonjs/addons/Responsive/Responsive'
// Flow
import type { Element, } from 'react'
import logo from '../../../assets/img/logo.png'
import './navigationWrapper.local.scss'
const NavBarMobile = ({
children, onPusherClick, onToggle, rightItems, visible,
}) => (
<Sidebar.Pushable>
<Sidebar
as={Menu}
animation="overlay"
icon="labeled"
items={rightItems}
vertical
visible={visible}
>
<Menu.Item>
<Image size="mini" src={logo} />
</Menu.Item>
<Menu.Menu>{rightItems.map(item => <Menu.Item as={NavLink} {...item} exact />)}</Menu.Menu>
</Sidebar>
<Sidebar.Pusher dimmed={visible} onClick={onPusherClick} style={{ minHeight: '100vh', }}>
<Menu fixed="top" inverted>
<Menu.Item onClick={onToggle} position="right">
<Icon name="sidebar" />
</Menu.Item>
</Menu>
{children}
</Sidebar.Pusher>
</Sidebar.Pushable>
)
const NavBarDesktop = ({ rightItems, }) => (
<Menu>
<Menu.Item>
<Image size="mini" src={logo} />
</Menu.Item>
<Menu.Menu position="right">
{rightItems.map(item => <Menu.Item as={NavLink} {...item} exact />)}
</Menu.Menu>
</Menu>
)
const NavBarChildren = ({ children, }) => children
type State = {
visible: boolean,
}
type Props = {
children: Object,
}
class NavigationWrapper extends Component<Props, State> {
state = {
visible: false,
}
handlePusher = () => {
const { visible, } = this.state
if (visible) this.setState({ visible: false, })
}
handleToggle = () => this.setState({ visible: !this.state.visible, })
render(): Element<any> {
const rightItems = [
{
to: '/',
content: 'Kuci',
key: 'home',
},
{
to: '/o-nama',
content: 'O Nama',
key: 'aboutus',
},
{
to: '/usluge',
content: 'Usluge',
key: 'services',
},
{
to: '/kontakti',
content: 'Kontakti',
key: 'contacts',
},
]
const { children, } = this.props
const { visible, } = this.state
return (
<Fragment>
<Responsive {...Responsive.onlyMobile}>
<NavBarMobile
onPusherClick={this.handlePusher}
onToggle={this.handleToggle}
rightItems={rightItems}
visible={visible}
>
<NavBarChildren>{children}</NavBarChildren>
</NavBarMobile>
</Responsive>
<Responsive minWidth={Responsive.onlyTablet.minWidth}>
<NavBarDesktop rightItems={rightItems} />
<NavBarChildren>{children}</NavBarChildren>
</Responsive>
</Fragment>
)
}
}
export default NavigationWrapper
I am passing everything inside NavigationWrapper and render it as a children. It looks like this inside of DOM. As you can see in the console, ui menu is navigation bar, container__header is cover image. They are all siblings. I need to position ui menu relative to container__header, for example put it in the middle, but if I put for example bottom: 0, it must not go out of container__header.
Without seeing an example of your code, it's difficult to assist; however, it sounds like you want to use position: fixed as opposed to position: absolute.
Use JQuery to get the sibling-elements position after the page has completely loaded, then use jquery to set the CSS of your element to the exact position in which it needs to be. -another trick is to open Developer Tools in your browser and just look for the CSS section, and change it to each possible option for position and see if any of them or a combination of CSS attributes work for you. It's very easy in FireFox.