I am trying to use the react-sticky package to make a sticky header, but my header keeps scrolling out of view. This is the package: https://www.npmjs.com/package/react-sticky
I am not sure if I am using the StickyContainer or Sticky compnents correctly. I am actually a bit confused about the "style" prop you're supposed to pass to the Sticky container.
If anyone can help, will be much appreciated. Thanks!
Here's the code for App.js:
import React, { Component } from 'react';
import './App.css';
import Header from './components/Header';
import Footer from './components/Footer';
import HomePage from './components/pages/HomePage';
import OurWork from './components/pages/OurWork';
import ContactUs from './components/pages/ContactUs';
import { BreakpointProvider } from 'react-socks';
import { StickyContainer, Sticky } from "react-sticky";
import { setDefaultBreakpoints } from 'react-socks';
setDefaultBreakpoints([
{ small: 0 },
{ medium: 700 }
]);
class App extends Component {
pageStyle = {
display: 'flex',
flexDirection: 'column'
}
render() {
return (
<BreakpointProvider>
<StickyContainer>
<div className="App">
<Sticky>
{({style}) => <Header style={style}/>}
</Sticky>
<div className="page" style={this.pageStyle}>
<HomePage />
<OurWork />
<ContactUs />
</div>
<Footer />
</div>
</StickyContainer>
</BreakpointProvider>
);
}
}
export default App;
Here is the Header component:
import React, { Component } from 'react';
import Logo from './Logo'
import NavBar from './NavBar';
import logo from '../images/transparent.png';
class Header extends Component {
headerStyle = {
height: 100,
margin: 20,
display: 'flex',
justifyContent: 'space-between',
zIndex: 10
};
render() {
return (
<div className="header" style={this.headerStyle}>
<Logo logo={logo}/>
<NavBar />
</div>
);
}
};
export default Header;
No external library is required for sticky header, check this resource React Table Sticky Header without external library
Demo
The trick is like
1 . divide the header and data part
Use fixed width for both
Wrap data container with a div , give that container div a fixed height,
allow
.container {
overflox-y : scroll;
height: 300px;
}
Related
I have a screen with an expendable header and below that a Material Top Tabs navigator implemented like this:
import React from 'react';
import Animated from 'react-native-reanimated';
import { ScreenLayout } from '#layouts';
import { CollapsedContentHeader, ExpandedContentHeader } from '#widgets';
import { useContentDetailsScreen } from './useContentDetailsScreen';
import { ContentTabNavigator } from '../../navigation/ContentTabNavigator';
export const ContentDetailScreen: React.FC = () => {
const {
activeTabId,
handleHeaderLayout,
headerContainerStyle,
collapsedOverlayStyle,
renderTabBar,
tabRefs,
tabScrollHandlers,
sharedProps,
} = useContentDetailsScreen();
return (
<ScreenLayout>
<Animated.View onLayout={handleHeaderLayout} style={headerContainerStyle}>
<ExpandedContentHeader id={activeTabId} />
</Animated.View>
<Animated.View style={collapsedOverlayStyle}>
<CollapsedContentHeader id={activeTabId} />
</Animated.View>
<ContentTabNavigator
tabBar={renderTabBar}
tabRefs={tabRefs}
tabScrollHandlers={tabScrollHandlers}
sharedProps={sharedProps}
/>
</ScreenLayout>
);
};
The ExpandedContentHeader contains an ImageBackground, the CollapsedContentHeader only a text.
The ContentTabNavigator contains three tabs, and each tab is scrollable also.
My goal is to make the whole screen scrollable with the tabs also.
I tried to wrap the whole content in a ScrollView, but then the tabs disappear
I need my button (which is defined in Logout component) to be near to the Nav item.
When I call it, it would put it at the middle of the screen and won't consider the top and left defined in style.
This is Logout component:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class LogOutButton extends Component {
static contextTypes = {
store: PropTypes.object.isRequired,
};
handleClick = () => {
this.props.onLogout();
};
render() {
const LogoutButtonStyle = {
color: 'black',
background: '#b7e1f7',
height: 50px,
width: 100px,
left: 10,
top: 10,
display:'inline-block'
}
return <button type="button" onClick={this.handleClick} style = {LogoutButtonStyle}>Back to Microsoft Give</button>;
}
}
Also, if I remove the 'top' and 'left', the button's location would still be the same.
This is the WholeScreen component in which I add logout component into:
render(){
.......
return(
<div className="WholeScreen">
<div>
<Nav bsStyle="pills" activeKey={this.state.year} onSelect={this.handleSelect} >
{buttons}
<LogoutButtonComponent onLogout={this.onLogoutClick}/>
</Nav>
</div>
<div>
<YearlySummary year={this.state.year} yearData={yearData}/>
</div>
</div>
);
}
}
I put the logout button inside the same with the navigation, but it would put the logout button at the center and not next to it.
I have recently started with React.js along with material-ui library. I am aware of the Grid system for layouts that material-ui uses. However, unlike Bootstrap, the container extends from end to end. Say, I want to create a global container to hold content which should have a max width of 1140px, what is the correct way to do it? Currently I am using withStyles provided by material-ui as shown by the code sample below
import React, { Component } from 'react';
import { withStyles } from '#material-ui/core/styles';
const styles = {
contentBody: {
maxWidth: '1140px',
marginLeft: 'auto',
marginRight: 'auto'
}
};
class ContentBody extends Component {
render() {
return (
<Grid container className={this.props.classes.contentBody}>
{this.props.children}
</Grid>
);
}
}
export default withStyles(styles)(ContentBody);
I'm using Antd for a ReactJs project, but I saw that there is an erroneous rendering in the components layout.
Here is my code
import React from 'react';
export default class Test extends React.Component {
render() {
return (
<div style={styles.test}>
<p>This is a text</p>
<img style={styles.image}
src={require('../../assets/images/test.png')}
/>
</div>
)
}
}
var styles = {
test: {
display: "flex",
justifyContent: 'center',
alignItems: 'center',
backgroundColor:'#334455'
},
}
Which results in this rendering
As you can see they are not aligned horizontally.
But if I comment this line inside my App.js
// import 'antd/dist/antd.css';
Then everything renders perfectly
Why is this happening? Am I doing something wrong?
your ntd/dist/antd.css file may have some css(i.e. for image OR p or div tag) which affects the layout of your elements
I'm building a page and I want a material-ui element to have a background image using background-image CSS property. I have googled for it of course, and there are solutions but for some reason I can't see that image.
P.S.1: even changing that MUI element to regular hasn't helped me at all.
P.S.2: when I'm using inside container it shows, but that's not what I want.
UPDATE1: Tried adding height and width to container, still no luck...
import React from 'react';
import Paper from 'material-ui/Paper';
import IconButton from 'material-ui/IconButton';
import ActionHome from 'material-ui/svg-icons/action/home';
const styles = {
paperContainer: {
backgroundImage: `url(${"static/src/img/main.jpg"})`
}
};
export default class Home extends React.Component{
render(){
return(
<Paper style={styles.paperContainer}>
</Paper>
)
}
}
You have to import the image as the following, using the relative path.
import React from 'react';
import Paper from 'material-ui/Paper';
import IconButton from 'material-ui/IconButton';
import ActionHome from 'material-ui/svg-icons/action/home';
import Image from '../img/main.jpg'; // Import using relative path
const styles = {
paperContainer: {
backgroundImage: `url(${Image})`
}
};
export default class Home extends React.Component{
render(){
return(
<Paper style={styles.paperContainer}>
Some text to fill the Paper Component
</Paper>
)
}
}
I've found a fix for my case. Actually setting container height in pixels have helped.
Here's the code:
import React from 'react';
const styles = {
paperContainer: {
height: 1356,
backgroundImage: `url(${"static/src/img/main.jpg"})`
}
};
export default class Home extends React.Component {
render() {
return (
<div style={styles.paperContainer}>
</div>
)
}
}
I got this to work for material-ui, where the padding on my parent element was 24px so I added 48px to the width of the background image to make it work...
const styles = {
heroContainer: {
height: 800,
backgroundImage: `url(${"../static/DSC_1037.jpg"})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
width: `calc(100vw + 48px)`,
margin: -24,
padding: 24,
}
};
<Grid
container
direction="column"
justify="flex-end"
alignItems="right"
style={styles.heroContainer} >
<Grid item>Goes here</Grid>
</Grid>
Had the same issues while working with Material UI React and the Create React App. Here is the solution that worked for me. Note that I set up a webpack alias for the relative path
import BackgroundHeader from "assets/img/BlueDiamondBg.png"
const BackgroundHead = {
backgroundImage: 'url('+ BackgroundHeader+')'
}
<div style={BackgroundHead}>
Like Romainwn said, you need to import the image to the file. Make sure you use the relative path to parent, so instead of
static/src/img/main.jpg #looks for static folder from current file location
Do
/static/src/img/main.jpg #looks for file from host directory:
Another hack to do it would be adding an inline style tag to the component:
import React from 'react';
import Paper from 'material-ui/Paper';
import IconButton from 'material-ui/IconButton';
import ActionHome from 'material-ui/svg-icons/action/home';
import Image from '../img/main.jpg'; // Import using relative path
export default class Home extends React.Component{
render(){
return(
<Paper style="background:path/to/your/image;">
</Paper>
)
}
}
You can you sx props in MUI v5
import React from 'react';
import Paper from 'material-ui/Paper';
import Image from '../img/main.jpg';
export default class Home extends React.Component{
render(){
return(
<Paper sx={{ backgroundImage: `url(${Image})` }}>
</Paper>
)
}
}