I try to make the Gallery.js script appear above the header. I can only make it display next to it, because by default the script takes the whole height. How can I change it?
<div className="App">
<Gallery images={this.state.IMAGES} />
<header className="App-header">
<Link to="/success">
<button variant="outlined">
back
</button>
</Link>
</header>
</div>
.App-header {
min-height: 100vh;
}
.App-header has as min height the full heigth
Related
how do I set the width of the modal of react-responsive-modal?
https://react-responsive-modal.leopradel.com/#props
<div style={{width: '600px'}} >
<Modal open={open} onClose={this.onCloseModal} closeOnOverlayClick={true}>
<CreateSubmenu onFormSubmit={this.onSubmenuFormSubmit} editData={editSubmenuData}/>
</Modal>
</div>
I think it would be the best it by styling class in css
.react-responsive-modal-modal { width: 500px }
You can also use react ref to add style using javascript https://reactjs.org/docs/glossary.html#refs
EDIT:
I created working code example:
In index.html I added styles:
<style>
.react-responsive-modal-modal {
width: 200px;
}
</style>
https://codesandbox.io/s/react-responsive-modal-4tuc1?file=/index.html
I have an SVG image that must be imported. The original image is too big so it must be made smaller.
This is the image added in code:
render() {
return (
<div>
<Grid>
<img src={mySvgImage}></img>
//other elements
</Grid>
</div>
);
}
Playing with Developers tools I had discovered that if in Styles > element.style it is added: height: 10% the image size is shrunk to the desired size. Like here:
So how can this be done in code?
I added it like inline CSS but doesn't work:
render() {
return (
<div>
<Grid>
<img style={{ heigth: '10%' }} src={mySvgImage}></img>
//other elements
</Grid>
</div>
);
}
Tried with saving it in a css file and import it with className='myClassName', same, no changes. The image has the original size.
How can this be done?
You might have a typo:
// not heigth
<img style={{ height: '10%' }} src={mySvgImage}></img>
.imgClassName {
height: 10%;
}
<div>
<Grid>
<img className="imgClassName" src={mySvgImage}></img>
</Grid>
</div>
I just need a way to make the footer sticky and stay at the bottom of the page while using react.
The footer does not stay at the bottom of the page, despite following the materialize docs and creating the header, main, footer format in my app.
The footer does display correctly but refuses to go to the bottom (be a sticky footer).
Here is the render method of app.js:
render() {
return (
<React.Fragment>
<Header />
<main>
... my stuff here ...
</main>
<Footer />
</React.Fragment>
);
}
Here is the Header component:
export default function About() {
return (
<header></header>
);
}
Here is the Footer component (copied exact from the materialize docs):
export default function About() {
return (
<footer className="page-footer">
<div className="container">
<div className="row">
<div className="col l6 s12">
<h5 className="white-text">Footer Content</h5>
<p className="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
</div>
<div className="col l4 offset-l2 s12">
<h5 className="white-text">Links</h5>
<ul>
<li><a className="grey-text text-lighten-3" href="#!">Link 1</a></li>
</ul>
</div>
</div>
</div>
<div className="footer-copyright">
<div className="container">
© 2014 Copyright Text
<a className="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
);
}
The footer does display correctly but refuses to go to the bottom (be a sticky footer).
I have this in the head of index.html (the docs say this is how to make a sticky footer):
<script>
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
</script>
(I think it is because react mounts my app content inside a <div id="root"> in index.html and thus breaks the header, main, footer format materialize requires for the footer to be sticky.)
I just need a way to make the footer sticky and stay at the bottom of the page while using react.
In react jsx you must use className instead of class.
class is a reserved word in javascript.
You can use a <div> tag instead of a <React.Fragment> with display: flex and min-height: 100vh. In the <Footer /> tag you can apply a style with align-self: flex-end it should align the footer to the bottom of the page.
You can see this fiddle: https://jsfiddle.net/brunohgv/cjypx5wL/4/
I'm trying to create a header and sidebar where the header sits just left of the sidebar and not overlayed like the image below.
I've created the Sidebar and Header components separately in different files and am importing both to render into an App.js file like below:
App.js:
render() {
return (
<div className='fp-wrapper'>
<AppSidebar />
<div className='fp-panel-main'>
<AppHeader />
</div>
</div>
);
}
The issue is that the two components are being rendered ontop of each other (see screenshot). Is there any way to build these components separately and have them fit together?
I have found that one way to solve this is to build the components directly to the sidebar (see Sidebar.Pusher & text Stuff) which is rendered correctly sitting right of the sidebar whereas the header is being overlapped.
Sidebar:
render() {
const { activeItem } = this.state
return (
<Sidebar.Pusher>
<Sidebar
as={Menu}
animation='push'
direction='left'
icon='labeled'
inverted
visible='true'
vertical
width='thin'
>
<Menu.Item as='a'>
<Icon name='home' />
Lexis
</Menu.Item>
<Menu.Item as='a'>
Page 1
</Menu.Item>
<Menu.Item as='a'>
Page 2
</Menu.Item>
</Sidebar>
<Sidebar.Pusher>
Stuff
</Sidebar.Pusher>
One way to do it would be wrapping the <AppSidebar> in a <div className="sidebar"> and use display: flex to display them side by side, like this.
render(){
return (
<div className='fp-wrapper'>
<div className="sidebar">
<AppSidebar />
</div>
<div className='fp-panel-main'>
<AppHeader />
</div>
</div>
);
}
and add CSS to that
.fp-wrapper {
width: 100%;
display: flex;
flex-wrap: nowrap; //This will keep the layout at all screen sizes.
}
.sidebar {
width: 30%;
}
.fp-panel-main {
width: 70%;
}
Note: You can also add a className or id to <SideBar.Pusher> and you wouldn't need to wrap the <AppSideBar /> with the <div className="sidebar">.
i using the semantic-ui-react. I have a Container main which has an Segment inside for show page details. but this Segment's height is changing according content inside. i want to set an mix height to alway stay fixed size. here is my code:
class App extends Component {
render() {
return (
<div className="App">
<Container>
<Header />
<Segment />
</Container>
</div>
);
}
}
You can set minHeight style/css on your component or any div inside :
<Segment style={{ minHeight: 15 }} />