I have been working on a simple application and i am trying to set an images a back-ground for my main page (the image cover all my background ) i have checked many answers that are on stackoverflow but i could not it correct, i wonder how to fix that ?
A screenshot
App {
text-align: center;
height: 100%;
background: url("N.png") no-repeat;
background-size: cover;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-title {
font-size: 1.5em;
}
.App-intro {
font-size: large;
}
#keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
Set the height of the parent elements to 100% also.
html,
body,
#root {
height: 100%;
}
Related
in Plain JS I can say const corners = document.querySelectorAll('.corner') then I can add event listener to it.
My question is
Haw can I do that with react ?
Is it posibale to add on function in the parent <div> and program
it to add event listener for of its Childs
import React, { useState } from 'react'
import '../css/style.css'
function Boxshape() {
return (
<div
className='item'>
<div className='box'>
<div
onMouseOver={() => console.log('mouse over element A')}
className='corner A'></div>
<div className='corner B'></div>
<div className='corner C'></div>
<div className='corner D'></div>
</div>
</div>
)
}
export default Boxshape
this is my css just in case you are carries
.item{
height: 100px;
width: 100px;
position: absolute;
background-color: aquamarine;
}
.corner{
position: absolute;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: black;
z-index: 2;
}
.A{
top:-1px;
left: -1px;
cursor: nw-resize;
}
.B{
top:-1px;
right: -1px;
cursor: ne-resize;
}
.C{
bottom:-1px;
left: -1px;
cursor: sw-resize;
}
.D{
bottom:-1px;
right: -1px;
cursor: se-resize;
}
Yes, you can attach an onmouseover event to the parent and retrieve the targets. Here is a plain HTML snippet, but you can translate this to React.
function logCorner(e) {
const targetClassNames = e.target.className;
if (targetClassNames.includes('corner')) {
console.log(`mouse over ${targetClassNames}`)
}
}
body {
padding:2rem;
}
.item{
height: 500px;
width: 500px;
position: absolute;
background-color: aquamarine;
}
.corner{
position: absolute;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: black;
z-index: 2;
}
.A{
top:0px;
left: 0px;
cursor: nw-resize;
}
.B{
top:0px;
right: 0px;
cursor: ne-resize;
}
.C{
bottom:0px;
left: 0px;
cursor: sw-resize;
}
.D{
bottom:0px;
right: 0px;
cursor: se-resize;
}
<div className='item'>
<div class='box' onmouseover="logCorner(event)">
<div class='corner A'></div>
<div class='corner B'></div>
<div class='corner C'></div>
<div class='corner D'></div>
</div>
</div>
Depending on how complex your corner divs become you can adopt a variety of patterns.
Here is a simple example that abstracts the corner divs to a Handle component
function Boxshape() {
return (
<div className='item'>
<div className='box'>
<Handle className="A" />
<Handle className="B" />
<Handle className="C" />
<Handle className="D" />
</div>
</div>
)
}
function Handle({className}) {
const mouseOverHandler = () => {
console.log(`mouse over: ${className}`)
}
return (
<div
onMouseOver={mouseOverHandler}
className={`corner ${className}`}></div>
)
}
export default Boxshape
Yeah, you can pass in the event in the element tag, and then make a function (you decide the functions name), and then you can pass in the function into the element, by saying this.
don't do () cause we only log it once on click, also we put it in brackets, cause it's a js code, not a react.
function handleClick() {
console.log('Don\'t you dare click me lol')
};
<button onClick={handleClick}>I\'m a button</button>
At first look at my codes:
JSX:
import React from "react";
import "./styles.scss";
export default function App() {
return (
<div className="App">
<h1> This is a Portfolio Item </h1>
<div className="item-container">
<div className="img-container">
<img
src="https://tf-react-chester.now.sh/images/portfolio-image-5.jpg"
alt="Portfolio 1"
/>
</div>
<h3>This is the Title of Item </h3>
<h4>
This is the description of Item. This is the description of Item.{" "}
</h4>
</div>
</div>
);
}
And CSS(SASS):
.App {
.item-container {
width: 100%;
height:auto;
.img-container {
position: relative;
$margin: 20px;
&::before{
position: absolute;
content: '';
**width: calc(100%-20px);
height: calc(100%-20px);** /* These two line don't work. */
left: 10px;
top: 10px;
background-color: #fff;
transition: all 0.5s ease-in-out;
transform: scaleX(0);
transform-origin: 0;
}
&:hover {
transform: scaleX(1);
}
img{
max-width: 100%;
}
}
}
}
I am trying to create a ::before animated content over the image. But when I am using calc() method it doesn't work at all.
What's the reason?
Note: I have tried some solution to the same problem from StackOverflow but those don't work for me.
This is the codesandbox link:CodeSandBox
Try with spaces ;)
width: calc(100% - 20px);
height: calc(100% - 20px);
I am trying to make use of react-modal for the first time. When I click on the sign-in button, the react-modal component is invoke but seems to be hiding behind the cover page which is a video landing page.
The React devtool displays the appropriate states before the sign-in button is clicked
before the sign-in button is clicked
When the sign-in button is now clicked, the react devtool now displays that the ModalPortal component is rendered showing the appropriate states
when the sign-in button is clicked
SignInModal.scss
.ReactModalPortal>div {
opacity: 0;
}
.ReactModalPortal .ReactModal__Overlay {
align-items: center;
display: flex;
justify-content: center;
transition: opacity 200ms ease-in-out;
}
.ReactModalPortal .ReactModal__Overlay--after-open {
opacity: 1;
}
.ReactModalPortal .ReactModal__Overlay--before-close {
opacity: 0;
}
.modal {
position: relative;
background: #464b5e;
color: white;
max-width: 90rem;
outline: none;
padding: 3.2rem;
text-align: center;
}
.modal__title {
margin: 0 0 1.6rem 0;
}
.modal__body {
font-size: 2rem;
font-weight: 300;
margin: 0 0 3.2rem 0;
word-break: break-all;
}
CoverPage.js Component
import Header from './Header';
import HeaderVideo from './HeaderVideo';
import SignInModal from './SignInModal';
import React, { Component } from 'react';
class CoverPage extends Component {
state = {
modalIsOpen: false
};
onOpenModal = () => {
this.setState(() => ({
modalIsOpen: true
}));
};
onCloseModal = () => {
this.setState(() => ({
modalIsOpen: false
}));
};
render() {
return (
<div>
<Header />
<HeaderVideo onOpenModal={this.onOpenModal} />
<SignInModal
modalIsOpen={this.state.modalIsOpen}
onOpenModal={this.onOpenModal}
onCloseModal={this.onCloseModal}
/>
</div>
);
}
}
export default CoverPage;
HeaderVideo.js Component
import React from 'react';
import Signup from './Signup';
import CoverInfo from './CoverInfo';
const HeaderVideo = props => {
return (
<div className="video-container">
<video preload="true" autoPlay loop volume="0" postoer="/images/1.jpg">
<source src="images/vine.mp4" type="video/mp4" />
<source src="images/vine1.webm" type="video/webm" />
</video>
<div className="video-content">
<div className="container content">
<div className="row">
<div className="col-md-9">
<CoverInfo onOpenModal={props.onOpenModal} />
</div>
<div className="col-md-3">
<Signup />
</div>
</div>
</div>
</div>
</div>
);
};
export default HeaderVideo;
CoverInfo.js Component
import React from 'react';
const CoverInfo = props => {
return (
<div className="info">
<div>
<h1>Welcome to EventCity!</h1>
</div>
<div>
<p>
At EventCity! we pride ourselves on the unrivalled personal {`event`} services,we provide
to our clientele. We guide you from the stressful decision making {`process`},ensuring you
are comfortable,whether it is a wedding, corporate {`function `}or even a kiddies party,we
create a buzz around you, taking you to the next level.
</p>
</div>
<div>
<h3>Innovation, {`Performance`} and Delivery</h3>
</div>
<button type="button" className="btn btn-success btn-lg" onClick={props.onOpenModal}>
Sign In here
</button>
</div>
);
};
export default CoverInfo;
video-cover.scss
video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 1;
}
.video-content {
z-index: 2;
position: absolute;
background: rgba(0, 0, 0, 0.6);
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.content {
padding-top: 120px;
}
You need to set the z-index property on the Modal's overlay, which normally has a z-index of 0. The CSS class is .ReactModal__Overlay
Here is the pure-React way of doing it:
const customStyles = {
content : {
...
},
overlay: {zIndex: 1000}
};
<Modal style={customStyles}>
...
</Modal>
.modal {
position: fixed;
z-index:9999;
top :0;
left:0;
right:0;
bottom:0;
background: #464b5e;
color: white;
outline: none;
padding: 3.2rem;
text-align: center;
}
Example of react-modal inline styles Set the styles in the react-modal inline styles. The z-index to 100 but make just like below
style={{
overlay: {
zIndex: 100,
backgroundColor: 'rgba(70, 70, 70, 0.5)',
},
I apologizes in advance for this stupid question.
I created a series of components using the creat-react-app boilerplate. I imported them into the app.js and they render as expected but if I try move the components on the page using the app.css by giving my components an id tag. Nothing happens.
What am I missing? I thought that once you import the component you can just treat it as another html element on the page.
Again I apologizes for the simple question and grateful for any help.
As requested code:
one of my components;
import React from 'react';
import {Panel, Image} from 'react-bootstrap';
import galaxy from '/Volumes/Main Drive/Test_WebSite_2/src/Assets/galaxy.jpg';
import David from '/Volumes/Main Drive/Test_WebSite_2/src/Assets/David.jpg';
import { bootstrapUtils } from 'react-bootstrap/lib/utils';
bootstrapUtils.addStyle(Panel,'main','backgroundImg');
const IntroPanel =()=>(
<div>
<style type="text/css">
{`
.panel-backgroundImg{
width: 300px;
height: 150px;
border: 1px solid gray;
border-radius: 0px;
padding-bottom: 0px !importnt;
padding-top: 0px !importnt;
}
#background{
position: fixed;
}
.galaxy-background{
width: 298px;
height: 148px;
}
#galaxy-pos{
position: fixed;
left: 1px;
top: 73px;
}
.DavidProp{
width: 80px;
height: 80px;
border-radius: 50%;
border: 1px solid gray;
box-shadow: 0 0 0 3px white, 0 0 0 4px gray;
}
#DavidPos{
position: fixed;
left: 110px;
top: 185px;
}
.panel-main {
width: 300px;
height: 150px;
border-radius: 0px;
border: 1px solid gray;
padding-bottom: 0px !importnt;
padding-top: 0px !importnt;
right: 200px;
}
#mainPanel{
position: fixed;
top: 222px;
left: 0px;
}
.Name{
font-weight: Bold;
}
#NamePos{
position: fixed;
top: 275px;
left: 95.5px;
}
.Intro{
}
#IntroPos{
position: fixed;
top: 300px;
left: 10.5px;
}
.sighting{
font-style: oblique;
font-size: 14px;
font-weight: Bold;
}
`}
</style>
<div>
<Panel bsStyle="backgroundImg" id="background">
<img src={galaxy} className="galaxy-background" id="galaxy-pos" alt="backgroundImg"/>
</Panel>
<Panel bsStyle="main" id="mainPanel">
<p className="Name" id="NamePos">
David Townsend
</p>
<p className="Intro" id="IntroPos">
"I am a Leaf on the wind, Watch how I soar"
<p>-Wash, <span className="sighting">Serenity</span></p>
</p>
</Panel>
</div>
<div>
<Image src={David} className="DavidProp" id="DavidPos" />
</div>
</div>
);
export default IntroPanel;
Here is the App.js:
import React, { Component } from 'react';
import './App.css';
import MenuBar from './Components/MenuBar.js'
import IntroPanel from './Components/IntroPanel.js'
import AboutPanel from './Components/AboutPanel.js'
class App extends Component {
render() {
return (
<div className="App">
<div>
<MenuBar Name="Inside David Townsend's Brain"
LinkName1="Thoughts" Link1="#"
LinkName2="About" Link2="#"
LinkName3="Ideas" Link3="#"
LinkName4="Resume" Link4="#" />
</div>
<div>
<IntroPanel id="test" />
</div>
<div >
<AboutPanel />
</div>
</div>
);
}
}
export default App;
Here is the App.css:
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-intro {
font-size: large;
}
#keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
#test{
position: fixed;
top: 300px;
left: 10.5px;
}
I answered my own question. The answer is in two parts.
I needed to change the css position: fixed; to position: relative;
If I understand it right the css fixed position is basically the world coordinates of the web page and the css relative position is a local coordinate of the parent object.
To move the React component I created a <div> with the created React component inside of it and moved the <div> using CSS.
I have no doubt that there is probably a more elegant way but this is how I solved my issue.
If I put the code of the gallery to display: table-cell block, the gallery does not update its width after reducing the width of the parent block.
HTML:
<div class="page">
<div class="sidebar">
Sidebar
</div>
<div class="mainbar">
Mainbar
<div class="fotorama" data-width="100%" data-ratio="3/2">
</div>
</div>
</div>
CSS:
.page {
display: table;
width: 100%;
}
.sidebar,
.mainbar {
padding: 10px;
display: table-cell;
}
.sidebar {
width: 30%;
background: #BEF781;
}
.mainbar {
background: #F3F781;
width: 70%;
}
Example: http://jsfiddle.net/o3cjqeau/6/
I ran into the same problem, adding "table-layout: fixed;" worked for me:
.page {
display: table;
table-layout: fixed;
width: 100%;
}