I have tried to add background Image in my application using inline CSS styling but I'm unable to add in semantic-ui-react component and also the div.
Tried by backgroundImage:url(${https://wallpapercave.com/wp/wp2449777.png}) using this in my div and also the component called in semantic-ui-react
import React,{Component} from 'react';
import {Container,Image,Segment} from 'semantic-ui-react';
import Certificate from '../ethereum/certificate';
import web3 from '../ethereum/web3';
class certificateHere extends Component{
static async getInitialProps(props){
const numberofCertificates = await Certificate.methods.getCertificateCount().call();
const recentCertificate = await Certificate.methods.certificates(numberofCertificates-1).call();
return { numberofCertificates , recentCertificate};
}
render(){
const { numberofCertificates , recentCertificate}= this.props;
return (
<div className='main'
style={{
textAlign:'center',
backgroundImage:`url(${https://wallpapercave.com/wp/wp2449777.png})`
}}
>
<Segment >
<div className='sub'>
<h1><b>Blockchain Certification</b></h1>
<h3 >This is to certify that</h3><br/>
<p><b>{recentCertificate.CandidateName} has successfully completed his {recentCertificate.CourseName} developer Program which<br/>
is of 14 hrs online course: Build projects using solidity on {recentCertificate.DateOfCompletion}.</b></p>
</div>
<Image src='' size='small' style={{ marginLeft: 'auto', marginRight: 'auto'}} />
<div style={{ position: 'absolute',
bottom: '8px',
left: '16px'}}
>
<h4 className='issued'style={{textAlign:'left', textDecoration: 'underline'}}>Issued by:{recentCertificate.InstituteName}</h4>
<h4 className='location'style={{textAlign:'left',textDecoration: 'underline'}}>Location:{recentCertificate.Location}</h4>
</div>
<div style={{ position: 'absolute',
bottom: '8px',
right: '16px'}}>
<h4 className='issuer'style={{textAlign:'right',textDecoration: 'underline'}}>Issuer Name:{recentCertificate.IssuerName}</h4></div>
<style jsx>{`
h1 {
color: orange;
font-style: oblique;
font-size: 50px;
}
h3{
font-size: 40px;
color:orange;
padding-top: 25px;
}
p{
font-size: 20px;
color: orange;
padding:30px;
}
h4.issued{
color: orange;
padding-bottom: 25px;
}
h4.location{
padding-bottom: 100px;
}
h4.issuer{
padding-bottom: 100px;
}
.main{
backgroundColor:green;
}
`}</style>
</Segment>
</div>
);
}
}
export default certificateHere;
I just want the background image for this component covering the entire page.
Try using backgroundImage: ‘url(https://wallpapercave.com/wp/wp2449777.png)’
Related
I am working on a project which will feature a leaderboard with player icons, name and scores.
Here is my initial design that im trying to implement.
Im using cards to hold each element and will eventually will be inserting data from my DB, however rn I'm just trying to get the design skeleton together all smooth. I can get the text working and aligned fine but cant figure out how to it with text. Before I was just using the cards for text and the images as its own element, it worked fine til I tried to put more than one row.
Now when I'm trying to put the image in as a card, it's just printing info about the image instead of the actual image. I'm quite new to React so sorry if its a simple solution. I've been playing with this all day and cant find a solution that works for me.
Heres the code so far! Thanks so much for taking the time to read and any advice is greatly appreciated!
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';
import dogicon from './assets/doggo.png'
import './index.css';
export const Grid = styled.div`
`;
export const Row = styled.div`
display: flex;
background-color: #c3b0d3;
display: block ruby;
`;
export const Col = styled.div`
flex: ${(props) => props.size};
`;
const CardStyle = styled.div`
display: block ruby;
padding-left: 30px;
padding-right: 30px;
`;
console.log(dogicon);
const LeaderboardHeader = () => {
return (
<div className="leadheader">
<h2>LEADERBOARD</h2>
</div>
)
}
class Card extends React.Component {
render(){
return (
<div className="card">
<p>{this.props.name}</p> <p>{this.props.score}</p> <p>{this.props.icon}</p>
</div>
)
}
}
class App extends React.Component {
// fires before component is mounted
constructor(props) {
// makes this refer to this component
super(props);
// set local state
this.state = {
name: "PLAYER 1",
score: "200",
icon: require('./assets/doggo.png'),
};
}
render() {
const {name} = this.state;
const{score} = this.state;
const{icon} = this.state;
return (
<div className="container">
<LeaderboardHeader />
<Grid>
<Row>
<CardStyle>
<Col size={1}>
<Card icon={icon}/>
</Col>
</CardStyle>
<CardStyle>
<Col size={1}>
<Card name ={name} />
<Card name ={name} />
<Card name ={name} />
</Col>
</CardStyle>
<CardStyle>
<Col size={1}>
<Card score={score} />
<Card score={score} />
<Card score={score} />
</Col>
</CardStyle>
</Row>
</Grid>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
Index.css
#import url('https://fonts.googleapis.com/css2?family=Passion+One&display=swap');
body {
font: 50px;
font-family: 'Passion One', cursive;
margin: 20px;
background: #7E549F; overflow: hidden;
text-align: center;
}
.container{
width: 550px;
}
.leadheader {
margin-top: 100px;
background-color: #422D53;
color: #C3B0D3;
text-align: center;
width: 100%;
height: 50px;
font-size: 45px;
text-align: center;
border-radius: 5px 5px 0 0;
margin: 0;
padding-bottom: 25px;
}
.card {
background-color: #C3B0D3;
color: #2A1D34;
margin: 0 auto;
padding: 100px 0;
font-size: 40px;
}
You should use that image data in the src attribute of an <img> tag. Since you are using <p>{this.props.icon}</p> it is coerced to string, hence displaying the text value of the image.
So, this would be the final result:
class Card extends React.Component {
render(){
return (
<div className="card">
<p>{this.props.name}</p> <p>{this.props.score}</p> <img src={this.props.icon} />
</div>
)
}
}
I am using React-typescript in my app. For styling I am using Style-components. I am really new Style-components. Lots of syntax are new to me. I normally use css. I have decided I will convert my css into Style-component. So I can use it different components. I have created one Wrapper components where I put my Label with style components. I also created two components one is Input and another one is Textarea. I want to use Wrapper components both Input and Textarea components. I followed one youtube tutorial. Where I converted html and css into react-css. which works fine as expected. But I am struggling to convert react css into style-components. specially the focus and valid option. I really don't know how to use them. Also I am facing difficulties when label size vary. It takes sometimes too left or sometimes too right. Here is the Image:
.
I really don't know how to fix those issues.
This is my Youtube tutorial based on React component
import React from 'react'
import './new.css'
const Test = () => {
return (
<div className="main">
<div className="input-group">
<input type="text" id="firstname" className="inputField" autoComplete="off" required />
<label htmlFor="name" className="labels">First name</label>
</div>
</div>
)
}
export default Test;
This is the css
.main{
position: relative;
}
.inputField{
outline: none;
padding: 16px 22px;
border: 1px solid #dadce0;
font-size:18px;
border-radius:5px;
}
.inputField:focus{
border: 2px solid royalblue;
}
.labels{
color: #8d8d8d;
position: absolute;
top: 27px;
left: 55px;
background: #ffffff;
transition: 300ms;
transform: translate(-50%, -50%);
}
.inputField:valid + .labels{ // I don't know how to use this `Valid` in style-component
top: -1px;
padding: 0 3px;
font-size:14px;
color: #8d8d8d;
}
.inputField:focus + .labels { // I don't know how to use this `focus` in style-component
top: -1px;
padding: 0 3px;
font-size:14px;
color: royalblue;
transition: 300ms;
}
This is the wrapper component where I used Label styling with style-components and others requirements.
import React from 'react';
import styled from 'styled-components';
const Container = styled.div`
position: relative;
`
const Label = styled.label`
display: block;
color: #8d8d8d;
background: #ffffff;
position: absolute;
left: 50px;
top: 29px;
pointer-events: none;
transition: 300ms;
transform: translate(-50%, -50%);
`
const Error = styled.p`
color: red;
`
const Description = styled.p`
color: blue;
`
export interface IInputWrapperProps {
label?: string;
required?: boolean;
description?: string;
error?: string;
wrapperStyle?: React.CSSProperties;
children?: JSX.Element;
}
export default ({
label, error, description, children, required, wrapperStyle
}: IInputWrapperProps) => {
return (
<ErrorBoundary id="InputWrapperErrorBoundary">
<div style={wrapperStyle}>
<Container>
<Label>
{label} {required && <span style={{ color: 'red' }}> *</span>}
</Label>
{children}
</Container>
{description && <Description>{description}</Description>}
{error && <Error>{error}</Error>}
</div>
</ErrorBoundary>
);
}
This is my Input component styling with style-componenents
import React, { useState, memo } from "react";
import styled from "styled-components";
import InputWrapper, { IInputWrapperProps } from "../wrapper";
import { Label } from "../wrapper"
const Input = styled.input.attrs(() => ({
className: 'text-input'
}))`
border: 1px solid #dadce0;
background: #fdfdfd;
font-size:18px;
border-radius: 5px;
box-shadow: none;
padding: 16px 30px;
outline: none;
&:focus {
border: 2px solid royalblue;
}
${Label}:focus & {
top: -12px;
padding: 0 3px;
font-size:14px;
color: royalblue;
transition: 300ms;
}
`
export interface ITextInputProps extends IInputWrapperProps {
value: string | undefined;
onChange: (i: string) => void;
}
export default memo(({
value, onChange, ...wrapperProps
}: ITextInputProps) => {
return (
<InputWrapper
{...wrapperProps}
>
<div>
<Input
value={value}
onChange={e => onChange(e.target.value)}
/>
</div>
</InputWrapper>
)
});
This is the parent component where I am rendering those two input fields
<InputTesting
label="Frist Name"
value={undefined}
onChange={(i) => console.log(i)}
/>
<br></br>
<br></br>
<InputTesting
label="Hello"
value={undefined}
onChange={(i) => console.log(i)}
/>
Before I answer the question, I need to say two things: first, I couldn't understand so much about your styled-components code, so I'll just transform your react/CSS code to react-typescript/styled-component. Second, I didn't get what you mean by "difficulties when label size varies", so I'm not focusing on this in the answer. That been said, let's go to the code.
Input.tsx
import React from 'react';
import styled from 'styled-components';
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>{
id: string;
label: string;
}
const InputGroup = styled.div`
position: relative;
`;
const InputLabel = styled.label`
color: #8d8d8d;
position: absolute;
top: 27px;
left: 55px;
background: #ffffff;
transition: 300ms;
transform: translate(-50%, -50%);
`;
const InputField = styled.input`
outline: none;
padding: 16px 22px;
border: 1px solid #dadce0;
font-size: 18px;
border-radius: 5px;
&:focus
{
border: 2px solid royalblue;
}
&:valid + ${InputLabel}
{
top: -1px;
padding: 0 3px;
font-size:14px;
color: #8d8d8d;
}
&:focus + ${InputLabel}
{
top: -1px;
padding: 0 3px;
font-size:14px;
color: royalblue;
transition: 300ms;
}
`;
const Input: React.FC<InputProps> = ({ id, label, ...rest }) => {
return (
<InputGroup>
<InputField id={id} {...rest} />
<InputLabel htmlFor={id} >{label}</InputLabel>
</InputGroup>
);
}
export default Input;
The idea here is to create an input component that already has a label inside it. Initially, I create an interface called InputProps which extends all attributes from a common InputElement and forces the parent component to put an id and a label attribute.
Them I used styled-components to copy all styles from the youtube guy. To put pseudo-classes on styled-components you have to use a sass' feature called parent selector. Using the ampersand, you can refer to the parent selector. Another thing you have to use is styled-components reference. This feature will allow you to refer to the styled-label in the code.
Now that you've created the Input component, let's use it on the App.
App.tsx
import React from 'react';
import Input from './Input';
function App() {
return (
<>
<Input required type="text" label="First Name" id="first-name" />
<Input required type="text" label="Hello" id="hello" />
</>
);
}
export default App;
This is the final result.
Learning React.js framework and need some pointers on styling. CSS isn't my forte.
How do I style the static content div in the middle and make it scrollable only within the div?
No styling:
https://i.imgur.com/26wNAfH.jpg
How to style this?
https://i.imgur.com/c5nYCOz.jpg
Here's the scroll function:
https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/part%202.mp4
app.css
.name {
font-weight: bold;
font-size: 20px;
}
.centered {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
.center {
position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */
}
.content {
text-align: center;
border: 2px solid grey;
border-radius: 5px;
position: fixed;
/* center the div */
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
/* give it dimensions */
min-height: 10em;
width: 90%;
/* just for example presentation */
top: 5em;
background-color: white;
}
Output: https://i.imgur.com/Eyv6hab.png
HTML:
import React, { Component } from "react";
import "../App.css";
import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
const API = "https://www.hatchways.io/api/assessment/students";
class App extends Component {
constructor(props) {
super(props);
this.state = {
students: [],
isLoading: false,
error: null
};
}
componentDidMount() {
this.setState({ isLoading: true });
fetch(API)
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error("Something went wrong ...");
}
})
.then(data =>
this.setState({ students: data.students, isLoading: false })
)
.catch(error => this.setState({ error, isLoading: false }));
}
render() {
const { students, isLoading, error } = this.state;
if (error) {
return <p>{error.message}</p>;
}
if (isLoading) {
return <p>Loading ...</p>;
}
return (
<body>
<div className="content">
<div>
{students.map(student => (
<div key={student.id}>
<p>
<img src={student.pic} />
</p>
<p className="name">
{student.firstName} {student.lastName}
</p>
<p>Email: {student.email}</p>
<p>Company: {student.company}</p>
<p> Skill: {student.skill}</p>
<p>Average: {student.grades}</p>
</div>
))}
</div>
</div>
{/* <div class="card mb-3">
{students.map(student => (
<div class="row no-gutters">
<div class="col-md-4">
<img src={student.pic} class="card-img" alt="..." />
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">
{student.firstName} {student.lastName}
</h5>
<p class="card-text">
<p>Email: {student.email}</p>
<p>Company: {student.company}</p>
<p> Skill: {student.skill}</p>
<p>Average: {student.grades}</p>
</p>
</div>
</div>
</div>
))}
</div> */}
</body>
);
}
}
export default App;
This might not help I am unfamiliar with that JS framework. I am only posting this because nobody has answered and maybe this can help.
<style>
scroll
{
max-height: 400px;
overflow-y: scroll;
}
</style>
<div class="scroll">
I'm trying to display a overlay when a certain Input field is clicked. I'm doing this in react. How can I do this?
This is my code
import React, { Component } from 'react';
import cam from '../../Resources/img/cam.png';
import SinglePost from '../../Components/Post/single_post';
class Middle extends Component {
constructor(props) {
super(props);
this.state = {
posts: []
}
}
render() {
function popup_ques(e) {
e.preventDefault();
alert("now the overlay should appear");
}
return (
<div className="middle_div">
<input className='post_data_input' placeholder="Ask your question here" ref="postTxt" onClick={popup_ques}/>
</div>
);
}
}
export default Middle;
What is the approach I should take?
I have created a sample react component.
I hope this will help you in somewhat way to achieve what you want.
class Test extends React.Component {
constructor(props) {
super(props);
this.state = {
style : {
width : 350
}
};
this.openNav = this.openNav.bind(this);
this.closeNav = this.closeNav.bind(this);
}
componentDidMount() {
document.addEventListener("click", this.closeNav);
}
componentWillUnmount() {
document.removeEventListener("click", this.closeNav);
}
openNav() {
const style = { width : 350 };
this.setState({ style });
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
document.addEventListener("click", this.closeNav);
}
closeNav() {
document.removeEventListener("click", this.closeNav);
const style = { width : 0 };
this.setState({ style });
document.body.style.backgroundColor = "#F3F3F3";
}
render() {
return (
<div>
<h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>In this example, the navigation menu will slide in, from left to right:</p>
<span style={{fontSize:30,cursor:"pointer"}} onClick={this.openNav}>☰ open</span>
<div
ref = "snav"
className = "overlay"
style = {this.state.style}
>
<div className = "sidenav-container">
<div className = "text-center">
<h2>Form</h2>
<p>This is a sample input form</p>
</div>
<a
href = "javascript:void(0)"
className = "closebtn"
onClick = {this.closeNav}
>
×
</a>
<div className = "list-group">
{/*your form component goes here */}
{this.props.children}
</div>
</div>
</div>
</div>
);
}
}
ReactDOM.render(
<Test/>,
document.getElementById('test')
);
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
.overlay h2, .overlay p {
color:white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="test"></div>
Input:
<input onFocus={() => this.setState({show_overlay: true})} />
somewhere arround in same render() function add overlay div:
<div
style={{display: this.state.show_overlay === true ? 'block' : 'none'}}
>
overlay
</div>
of course add styling to div as needed to have proper overlay effect, what's needed by your UI
To turn overlay off, you will need to add another event listener on some action, like e.g. click
<button onClick={() => this.setState({show_overlay: false})}>
Close overlay
</button>
Hello I've searching a way to display a overlay with a form when I give the focus to a certain input field. I want to do this using react. How can I do this?
my code
import React, { Component } from 'react';
class Middle extends Component {
constructor(props) {
super(props);
this.state = {
posts: []
}
}
render() {
function popup_ques(e) {
e.preventDefault();
alert("now the overlay should appear");
}
return (
<div className="middle_div">
<input className='post_data_input' placeholder="Ask your question here" ref="postTxt"
onClick={popup_ques}/>
</div>
);
}
}
export default Middle;
I have written a function to display an alert when the input field is clicked.. instead of the alert I want to display a transparent overlay with a form.
I want to do something like this
http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_overlay
Thanks inadvance.
So here i have written code to change the className of the side bar. Every time you call toggleSideBar it will change className from hideSideBar to showSideBar and vice versa. css for hideSideBar and showSideBar should be written as in the link of code school. Hope it will work.
import React, { Component } from 'react';
class Middle extends Component {
constructor(props) {
super(props);
this.state = {
sidebar: 'hideSideBar',
posts: [],
}
}
toggleSideBar() {
if(this.state.toggleBar === 'showSideBar') {
this.setState({ toggleBar: 'hideSideBar' });
} else {
this.setState({ toggleBar: 'showSideBar' });
}
}
render() {
return (
<div className="middle_div">
<input
className='post_data_input'
placeholder="Ask your question here"
ref="postTxt"
onClick={this.toggleSideBar.bind(this)}
/>
<div className={this.state.sidebar} />
// This will be the sidebar
</div>
</div>
);
}
}
export default Middle;
I have created a react component based on link you have given in question.
I hope this will help you in somewhat way to achieve what you want.
class Test extends React.Component {
constructor(props) {
super(props);
this.state = {
style : {
width : 350
}
};
this.openNav = this.openNav.bind(this);
this.closeNav = this.closeNav.bind(this);
}
componentDidMount() {
document.addEventListener("click", this.closeNav);
}
componentWillUnmount() {
document.removeEventListener("click", this.closeNav);
}
openNav() {
const style = { width : 350 };
this.setState({ style });
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
document.addEventListener("click", this.closeNav);
}
closeNav() {
document.removeEventListener("click", this.closeNav);
const style = { width : 0 };
this.setState({ style });
document.body.style.backgroundColor = "#F3F3F3";
}
render() {
return (
<div>
<h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>In this example, the navigation menu will slide in, from left to right:</p>
<span style={{fontSize:30,cursor:"pointer"}} onClick={this.openNav}>☰ open</span>
<div
ref = "snav"
className = "overlay"
style = {this.state.style}
>
<div className = "sidenav-container">
<div className = "text-center">
<h2>Form</h2>
<p>This is a sample input form</p>
</div>
<a
href = "javascript:void(0)"
className = "closebtn"
onClick = {this.closeNav}
>
×
</a>
<div className = "list-group">
{/*your form component goes here */}
{this.props.children}
</div>
</div>
</div>
</div>
);
}
}
ReactDOM.render(
<Test/>,
document.getElementById('test')
);
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
.overlay h2, .overlay p {
color:white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="test"></div>