I am trying to add a background image of a div in a component but it's not working.
{slides.map((item) => {
return (
<div key={item.id} className="item_slider"
style={{background: `url(/images/covers/${item.cover})`}}
>
<div className="caption">
<h4>{item.topic}</h4>
<p>{item.title}</p>
</div>
</div>
)
})}
item_slider css
.item_slider {
height: 700px;
background-size: cover !important;
background-position: center center !important;
position: relative;
font-family: 'Fjalla One', sans-serif;
}
images are in public folder though I copied them in src folder also but no luck. Can anyone help me on this?
Try with your own URL
class App extends React.Component {
constructor(props) {
super(props);
this._size = '350x150'
this._style = {
backgroundImage: `url(http://via.placeholder.com/${this._size})`
}
}
render() {
return (
<div style={this._style} className="example">
<h1>Content here</h1>
</div>
)
}
}
ReactDOM.render( < App / > , document.getElementById("root"));
.example {
background-size: cover !important;
background-position: center center !important;
position: relative;
height: 300px;
font-family: 'Fjalla One', sans-serif;
}
<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="root"></div>
So, your style should work, except with backgroundImage:
...
style={{backgroundImage: `url(/images/covers/${item.cover})`}}
...
Just make sure your paths are correct and ${item.cover} actually has a value. If it still doesn't work, might as well try and move that style from CSS into your inline style because it's the same element anyway.
Try this:
style={{backgroundImage: 'url(' + require(`/images/covers/${item.cover}`) + ')'}}
If it doesn't work, try with an image URL:
const url = "https://images.freeimages.com/images/large-previews/f2c/effi-1-1366221.jpg";
and:
style={{backgroundImage: 'url(' + require(`url`) + ')'}}
Does this work? If it does, the problem is probably with the image path.
Put the image in the same folder of the component and then try (I assume that the image name is zzz.jpg:
style={{backgroundImage: 'url(' + require(`./zzz.jpg}`) + ')'}}
If this works as well, check again the path...
Related
So I have a div which has a background-image property with my image inside my object.
<div className={containerStyles.image} style = {{ backgroundImage: `url(${img})`}}></div>
I need to resize it to my container but it just eats up the whole container.
Here is the CSS code :
.image {
border-radius: 4px;
max-width: 100%;
display: block;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
height: 100%;
}
And when I try to run the next thing shows up :
How do I make it only take the container size and also not make the text not fit in the container itself?
If anyone wonders here is the card thats inside the container with grid attribute :
return ( <div className = {containerStyles.card}>
<div className={containerStyles.image} style = {{ backgroundImage: `url(${img})`}}></div>
<p className = {containerStyles.card_name} id = 'based'>{name}</p>
<p className = {containerStyles.card_position}>{position}</p>
<p>{names + ' '}</p>
</div>
);
}
I'm new to react. I am creating a cardlist with react bootstrap. Problem is no matter what I do When my list become larger it overflow and show like this.
Note that my other half is hidden on top of the browser.
my fragment of code is below.
class Admin extends Component {
render() {
const examlist = exams ? (
exams.map((exam) => {
let tempTime = new Date(exam.startTime.seconds * 1000);
let time = tempTime.toLocaleDateString("en-GB", {
hour: "numeric",
hour12: true,
});
return (
<AddExamTab
key={exam.id}
title={exam.title}
description={exam.description}
id={exam.id}
className={exam.class}
time={time}
/>
);
})
) : (
<div className="container">
<h4>
<Spinner />
</h4>
</div>
);
return (
<div className="container">
<AddExam />
{examlist}
</div>
);
}
}
Maybe I have done somthing silly. what am I doing wrong here? Can anyone tell me? I'd be very grateful if anyone help me in this problem.
It's not a React related problem, but a CSS related.
You should experiment with the parent div (with "container" class). Try to create your own class, add height and overflow properties.
Here is a small example of how you can implement that:
.container {
height: 200px;
width: 50%;
overflow-y: scroll;
background-color: #828282;
}
.container > div {
height: 100px;
margin-bottom: 2px;
background-color: #929292;
}
<div class="container">
<div>x1</div>
<div>x2</div>
<div>x3</div>
<div>x4</div>
<div>x5</div>
</div>
I'm literally fighting in finding a clean solution to the scroll issue in the IOS devices. In my App.js i've simply the background body and a modal with some contents. When the modal is shown i'd like to block the scroll in the background (myBodyContent) and still let the scroll in the modal component. I'm quite new to both javascript and React and this not helping me at all.
The cleanest solution (according to me) i was able to find is the body-scroll-lock package but it seems i'm not able to successfully use it. here is my code:
App.js
class App extends Component {
targetRef = React.createRef();
targetElement = null;
constructor(props) {
super(props);
}
componentDidMount() {
this.targetElement = this.targetRef.current;
disableBodyScroll(this.targetElement);
}
render() {
const myModal = (
<Modal ref={this.targetRef}>
// my long content here
</Modal>);
return (
<React.Fragment>
{myModal}
<Layout>
<myBodyContent>
</Layout>
</React.Fragment>
);
}
}
Modal.js
class Modal extends Component {
shouldComponentUpdate(nextProps, nextState){
return (nextProps.show !== this.props.show)
}
render () {
return (
<div>
<Auxi>
<Backdrop
show = {this.props.show}
clicked = {this.props.modalClosed}
/>
<div className={style.Modal}
style={{
transform: this.props.show ? 'translateY(0)' : 'translateY(-100vh)', // vh is special unit for outside screen
opacity: this.props.show ? '1': '0'
}}>
{this.props.children}
</div>
</Auxi>
</div>
);
}
}
Modal css
.Modal {
position: fixed;
z-index: 500;
background-color: white;
width: 80%;
overflow-y: hidden;
overflow: auto;
padding-right: 15px; /* Avoid width reflow */
border: 1px solid #ccc;
box-shadow: 1px 1px 1px black;
padding: 16px;
top: 5%;
left: 5%;
box-sizing: content-box;
transition: all 0.3s ease-out;
}
#media (min-width: 600px) {
.Modal {
width: 80%;
height: 80%;
left: 10%;
top: 10%
}
}
With the above code, simply everything is locked and i cannot scroll neither the modal nor the myBodyContent.
Can you help me understanding what i'm doing wrong? Or suggest me some other ways to achieve the same result?
Thanks in advance for your help.
You don't have targetElement (it's null) inside App componentDidMount because you try to set ref for React component but not HTML element.
To fix this you need to forward ref inside Modal component like that:
const myModal = (
<Modal forwardedRef={this.targetRef}>
// my long content here
</Modal>
);
and then :
class Modal extends Component {
shouldComponentUpdate(nextProps, nextState){
return (nextProps.show !== this.props.show)
}
render () {
return (
<div ref={this.props.forwardedRef}>
<Auxi>
<Backdrop
show = {this.props.show}
clicked = {this.props.modalClosed}
/>
<div className={style.Modal}
style={{
transform: this.props.show ? 'translateY(0)' : 'translateY(-100vh)', // vh is special unit for outside screen
opacity: this.props.show ? '1': '0'
}}>
{this.props.children}
</div>
</Auxi>
</div>
);
}
}
Thanks Max, i've tried but unfortunately the result is the same. I've also tried to enclose the Modal in a div directly in the App.js and apply the ref directly there without passing it as props...but it's the same. No way to scroll anything.
I'm kinda new to react and I'm trying to display a tooltip on an image.
<OverlayTrigger placement="right" overlay={(<Tooltip id="hi">Hello, world!</Tooltip>)} triggerType="hover">
<img alt="" className="char-img rotate_m_5" src="/images/characters/wolf_xs.png"/>
</OverlayTrigger>
But nothing happens when the cursor hovers the image.
I have no errors just nothing happens
Edit :
I saw in Chrome DevTools that the tooltip appears in the HTML but not in the app, might be a CSS issue.
<div id="hi" role="tooltip" class="fade in tooltip top" style="top: 313.75px; left: 448.039px;"><div class="tooltip-arrow" style="left: 50%;"></div><div class="tooltip-inner">Hello, world!</div></div>
Thanks
Here you go
class App extends React.Component {
render() {
return ( <
ReactBootstrap.OverlayTrigger placement = 'top'
delay = {
{
show: 1000
}
}
overlay = { <
ReactBootstrap.Tooltip id = "tooltip" >
This is a sample text <
/ReactBootstrap.Tooltip>
} >
<
img width = "300px"
src = "https://cdn.pixabay.com/photo/2017/07/01/19/48/background-2462431_960_720.jpg" / >
<
/ReactBootstrap.OverlayTrigger>
)
}
}
ReactDOM.render( < App / > ,
document.getElementById('root')
);
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/react-bootstrap#next/dist/react-bootstrap.min.js" crossorigin></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" crossorigin="anonymous">
<div id="root" />
Need to add the CSS class "show" to the tooltip
<Tooltip id="hi" className="show">Hello World!</Tooltip>
Use this code issue solve
.popover .arrow {
background: transparent !important;
z-index: 99;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #c7c7c7;
bottom: -7px;
}
I'm trying to get a child component to render in react and it's not rendering. If I write the actual JSX composed in the child component in the parent, it renders, Why is that? The examples in the documentation show that this is possible, I don't know what I'm doing wrong.
Example here: https://jsfiddle.net/69z2wepo/309969/
class App extends React.Component {
render() {
return(
<Rectangle />
);
}
}
function Rectangle(){
return (
<div className="Rectangle">
<square />
</div>
);
}
function square(){
return (
<div className="square">
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('container')
);
.Rectangle {
position: relative;
background-color: #222;
height: 760px;
width: 40px;
}
.square {
position: absolute;
background-color: green;
top: 0px;
left: 0px;
height: 20px;
width: 20px;
}
<!Doctype>
<html>
<head>
<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>
</head>
<body>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
</body>
The end result should show a dark grey rectangle, with a 20x20 pixel green square affixed to the top left of it.
Name your components starting with a capital letter.
function Square(){
return (
<div className="square">
</div>
);
}
function Rectangle(){
return (
<div className="Rectangle">
<Square />
</div>
);
}
If you are trying to render the child component "square" then change the name square to Square and also change the function name square to Square. Component name always needs to start with Capital Letter. Otherwise it will not render.
There are 2 issues here:
Components name should start with capital letters.
In your fiddle you are using the logoutBox className but you wrote a .square css class.
class App extends React.Component {
render() {
return (
<Rectangle />
);
}
}
function Rectangle() {
return (
<div className="Rectangle">
<Square />
</div>
);
}
function Square() {
return (
<div className="square">
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
.Rectangle {
position: relative;
background-color: #222;
height: 760px;
width: 40px;
}
.square {
position: absolute;
background-color: green;
top: 0px;
left: 0px;
height: 20px;
width: 20px;
}
<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="root" />