I'm having an issue with Scrollbars just in Safari.
App.js
import Main from './components/Main';
function App() {
return (
<>
<div className="app">
<div className="app-main-container">
<div style={{position: 'absolute', inset: '0px 0px 0px 0px'}}>
<div className="app-container">
<div className="rct-app-content">
<div className="app-header">
</div>
<div className="rct-page">
<Main />
</div>
</div>
</div>
</div>
</div>
</div>
</>
)
}
export default App;
In my Main file I have the Scrollbar
import React, { useState, useEffect } from 'react';
import { Scrollbars } from 'react-custom-scrollbars';
const Main = () => {
const getScrollBarStyle = () => {
return {
height: 'calc(100vh - 50px)'
}
}
return (
<>
<Scrollbars
className="rct-scroll"
autoHide
autoHideDuration={100}
style={getScrollBarStyle()}
>
<div className="rct-page-content">
<div className="row">
<h3>TEST</h3>
</div>
</div>
</Scrollbars>
</>
)
}
export default Main;
When I run in Firefox and Chrome, the "TEST" is displayed in the screen, but in Safari it is empty.
Related
I have a simple div which uses react-tooltip
Inside the tooltip I am trying to render kendo progress bar but it doesn't seem to be working, the bar is shown but the progress is not shown
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import ReactDOMServer from 'react-dom/server';
import 'react-tooltip/dist/react-tooltip.css'
import { Tooltip as ReactTooltip } from 'react-tooltip'
import { ProgressBar } from '#progress/kendo-react-progressbars';
const App = () => {
const TooltipContentTemplate = () => {
return <div>
<ProgressBar value={20} labelVisible={false}/>
</div>
};
return (
<div className="container">
<div className="row mb-4" id="1"
data-tooltip-html={ReactDOMServer.renderToString(<TooltipContentTemplate></TooltipContentTemplate>)}>
Hello World
</div>
<ReactTooltip style={{zIndex:"10", backgroundColor:"black",color:"black",width:"200px",height:"300px",border:'1px solid black'}} anchorId="1"/>
<div>
<ProgressBar value={20} labelVisible={false}/>
</div>
</div>
);
};
ReactDOM.render(
<App />,
document.querySelector('my-app')
);
Without hover on Hello World
On hover
I am trying with above code
This seems to be an issue related to the usage of ReactDOMServer.renderToString(), not sure what though.
You can try putting the tooltip content inside the tooltip component directly, instead of using data-tooltip-html on the anchor.
Your code updated:
import * as React from "react";
import * as ReactDOM from "react-dom";
import "react-tooltip/dist/react-tooltip.css";
import { Tooltip as ReactTooltip } from "react-tooltip";
import { ProgressBar } from "#progress/kendo-react-progressbars";
const App = () => {
const TooltipContentTemplate = () => {
return (
<div>
<ProgressBar value={20} labelVisible={false} />
</div>
);
};
return (
<div className="container">
<div className="row mb-4" id="1">
Hello World
</div>
<ReactTooltip
style={{
zIndex: "10",
backgroundColor: "black",
color: "black",
width: "200px",
height: "300px",
border: "1px solid black"
}}
anchorId="1"
>
{/* tooltip content here */}
<TooltipContentTemplate></TooltipContentTemplate>
</ReactTooltip>
<div>
<ProgressBar value={20} labelVisible={false} />
</div>
</div>
);
};
ReactDOM.render(<App />, document.querySelector("my-app"));
I'm making a small imdb clone in reactJS and I just managed to add a carousel to the component that renders out movies. The problem is that the clickevent for each movie doesn't work anymore. What's the simplest way to solve this without rewriting the entire component?
I could add a onclick event to the carousel but then i have to return all the neccessary data from the movie component and later send it to moviePage which seems redundant
Home.js
import { React } from "react";
import SearchBox from "./components/SearchBox";
import Movie from "./components/Movie";
import { Carousel } from "react-responsive-carousel";
function Home(props) {
return (
<div className="App">
<div className="row d-flex align-items-center mt-4 mb-4">
<SearchBox
searchValue={props.searchValue}
setSearchValue={props.setSearchValue}
/>
</div>
<h1>Movies</h1>
<div className="block">
<Carousel onClickItem={console.log("you pressed")}>
{props.data.map((movie, index) => {
return (
<Movie
key={movie.id}
movie={movie}
placeMovie={props.placeMovie}
index={index}
/>
);
})}
</Carousel>
</div>
<h1>Recently viewed</h1>
<div className="inline-view">
{props.latestView.map((n) => {
return (
<img
key={n.id}
src={"https://image.tmdb.org/t/p/w500" + n.backdrop_path}
alt={n.poster_path}
/>
);
})}
</div>
</div>
);
}
export default Home;
Movie.js
import React from "react";
import { NavLink } from "react-router-dom";
export default function Movie(props) {
const handleClick = () => {
props.placeMovie(props.index);
};
return (
<div className="image-container d-flex justify-content-start m-3">
<div>
<NavLink onClick={handleClick} to={`/MoviePage`}>
<img
className="image-list"
src={"https://image.tmdb.org/t/p/w500" + props.movie.backdrop_path}
alt={props.movie.path}
/>
</NavLink>
<h4 class="font-weight-bold">{props.movie.title}</h4>
<h5 class="font-weight-light">Score:{props.movie.vote_average}</h5>
</div>
</div>
);
}
Heres the moviepage that displays more info when you click on a movie item
import React from "react";
function MoviePage(props) {
return (
<div>
<div className="card-single">
<div>
<img
className="image-single"
src={"https://image.tmdb.org/t/p/w500" + props.movie.backdrop_path}
alt={props.movie.path}
/>
<div class="card-title">
<h1 class="font-weight-bold">{props.movie.title}</h1>
</div>
<h3 class="card-text">{props.movie.overview}</h3>
<h5 class="font-weight-light">
Language: {props.movie.original_language}
</h5>
<h5 class="font-weight-light">
Release date: {props.movie.release_date}
</h5>
</div>
</div>
</div>
);
}
export default MoviePage;
my background image is not working can any buddy check it?
import React from 'react'
import "./Home.css"
// backgroundimage
import bgImg from "./../assests/img/bg-sec1.jpg"
function Home() {
return (
<div>
<div styles={{ backgroundImage:`url(${bgImg})` }}>
<h1>This is red car</h1>
</div>
</div>
)
}
function Home() {
return (
<div>
<div style={{ backgroundImage:url(${bgImg}) }}>
<h1>This is a red car</h1>
</div>
</div>
)
}
At least you must fix typo styles->style.
Tysm for help in advance!
I am doing famous react Course of Coursera!
IN App.js Menu is rendered as Component. MenuComponent.js is as follows:
import React,{Component} from 'react';
import DishDetail from './DishDetail';
import { Card, CardImg, CardImgOverlay} from 'reactstrap';
class Menu extends Component {
constructor(props) {
super(props);
this.state = {
selectedDish: null
}
}
onDishSelect(dish) {
this.setState({ selectedDish: dish});
}
renderDish() {
if (this.state.selectedDish)
return <DishDetail dish={this.state.selectedDish} />;
else
return(
<div></div>
);
}
render() {
const menu = this.props.dishes.map((dish) => {
return (
<Card
key={dish.id}
className="col-12 col-md-5 m-1"
onClick={() => this.onDishSelect(dish)}
>
<CardImg width="100%" className="card-img-top" src={dish.image} alt={dish.name} />
<CardImgOverlay className="card-image-overlay">
<h5>{dish.name}</h5>
</CardImgOverlay>
</Card>
);
});
return (
<div className="container">
<div className="row">
{menu}
</div>
<div className="row">
<div classNmae="col-12 col-md-5 m-1">
{this.renderDish(this.state.selectedDish)}
</div>
</div>
</div>
);
}
}
export default Menu;
DishDetail.js is as follows:
import React, { Component } from 'react';
import { Card, CardImg, CardText, CardBody,CardTitle} from 'reactstrap';
class DishDetail extends Component {
render () {
return (<div className="row">
<div classname="col-6 col-md-4" >
<Card>
<CardImg style={{maxWidth:'443 px', maxHeight:'443 px'}} top src={this.props.dish.image} alt={this.props.dish.name} />
<CardBody>
<CardTitle>{this.props.dish.name}</CardTitle>
<CardText className="text-center">{this.props.dish.description}</CardText>
</CardBody>
</Card>
</div>
<div className="col-6 col-md-4">
<h3>Comments</h3>
{
this.props.dish.comments.map( (comment) => {
return (
<div id={comment.id}>
<p>{comment.comment}</p>
<p>--{comment.author} , {comment.date}</p>
</div>
)
})
}
</div>
</div>
);
}
}
export default DishDetail;
I want render Dish Detail and it's comments in form col-6 col-6 means side by side. But Instead of that, I am getting output like:-
Desired Output is like:
Tysm for solving in advance!
Try to use it this way:
import React, { Component } from 'react';
import { Card, CardImg, CardText, CardBody,CardTitle} from 'reactstrap';
class DishDetail extends Component {
render () {
const myStyle = {
maxWidth:'443px',
maxHeight:'443px'
}
return (<div className="row">
<div classname="col-6 col-md-4" >
<Card>
<CardImg style={myStyle} top src={this.props.dish.image} alt={this.props.dish.name} />
<CardBody>
<CardTitle>{this.props.dish.name}</CardTitle>
<CardText className="text-center">{this.props.dish.description}</CardText>
</CardBody>
</Card>
</div>
<div className="col-6 col-md-4">
<h3>Comments</h3>
{
this.props.dish.comments.map( (comment) => {
return (
<div id={comment.id}>
<p>{comment.comment}</p>
<p>--{comment.author} , {comment.date}</p>
</div>
)
})
}
</div>
</div>
);
}
}
export default DishDetail;
https://www.w3schools.com/react/showreact.asp?filename=demo2_react_css_inline_object
It's a 443px unit, there is no space between 443 and px. Otherwise, the CSS will not be applied to your selected element.
<Card>
<CardImg
style={{ maxWidth: "443px", maxHeight: "443px" }}
top
src={this.props.dish.image}
alt={this.props.dish.name}
/>
<CardBody>
<CardTitle>{this.props.dish.name}</CardTitle>
<CardText className="text-center">{this.props.dish.description}</CardText>
</CardBody>
</Card>
One more example where 10 px (with space) unit will not work.
import React from 'react';
export default class App extends React.Component {
render() {
const mystyle = {
color: "white",
backgroundColor: "DodgerBlue",
padding: "10 px", // check here not applied
fontFamily: "Arial"
};
return (
<div>
<h1 style={mystyle}>Hello Style!</h1>
<p>Add a little style!</p>
</div>
);
}
}
Demo on Sandbox
I'm new in ReactJs and I only know a few things as of now. I'm trying to create this Google map with directions which is successful
MapRender.js
import React from 'react';
import { render } from 'react-dom';
import Map from './mapProps';
//import './style.css';
const googleMapsApiKey = "API_KEY";
export default function FinalMap() {
const FinalMap = props => {
const {places} = props;
const {
loadingElement,
containerElement,
mapElement,
defaultCenter,
defaultZoom
} = props;
return (
<Map
googleMapURL={
'https://maps.googleapis.com/maps/api/js?key=' +
googleMapsApiKey +
'&libraries=geometry,drawing,places'
}
markers={places}
loadingElement={loadingElement || <div style={{height: `100%`}}/>}
containerElement={containerElement || <div style={{height: "80vh"}}/>}
mapElement={mapElement || <div style={{height: `100%`}}/>}
defaultCenter={defaultCenter || {lat: 25.798939, lng: -80.291409}}
defaultZoom={defaultZoom || 13}
/>
);
};
const places = [
{latitude:14.7539407,longitude:121.0338431},
{latitude: 14.625981794368357,longitude: 121.06170033978614},
]
render(<FinalMap defaultZoom={12} places={places} />, document.getElementById('root'));
}
And this is my App.js
import React from 'react';
import picture1 from '../../src/picture1.jpg';
import RechartBar from '../postlist/Rechart-Bar';
import RechartLine from '../postlist/Rechart-Line';
import driverstat from '../driverprofiles/driverstat';
import AppMap from './Maps/map';
import MapRender from './Maps/MapRender';
function Home() {
return (
<div className="Bodydiv">
<div className="homediv">
<div className="userdiv">
<div className="userdiv-profile">
<div className="userdiv-profile-photo">
<img src={picture1} className="photo" alt="picture1"></img>
</div>
<div className="userdiv-profile-name">
</div>
<div className="userdiv-profile-name">
Name:
</div>
<div className="userdiv-profile-name">
Driver ID:
</div>
<div className="userdiv-profile-name">
Plate Number:
</div>
<div className="userdiv-profile-name">
Status:
</div>
</div>
<div className="userdiv-stats">
Statistics
{driverstat.map((item, index) => {
return (
<li key={index} className={item.cName}>
{item.icon}
</li>
);
})}
<h4 class="view-history">View History</h4>
<input type="button" className="backtodrivers-btn" alt="back" value="Back"/>
</div>
</div>
<div className='mapdiv'>
<MapRender/>
</div>
</div>
<RechartBar/>
<RechartLine/>
</div>
);
}
export default Home;
The problem is It does run but it made my other elements go away because the map was rendered as seen in the last part of my MapRender.js, what I wanted to do is place this in a component and then call that component in my App.js (Similar to what I have done in RechartBar and RechartLine at the end of my App.js.
Thanks
You are replacing entire app with FinalMap component using this line.
Remove this line from MapRenderer.js
render(<FinalMap defaultZoom={12} places={places} />, document.getElementById('root'));
import React from 'react';
import { render } from 'react-dom';
import Map from './mapProps';
//import './style.css';
const googleMapsApiKey = "API_KEY";
export default function FinalMap(props) {
const {
places,
loadingElement,
containerElement,
mapElement,
defaultCenter,
defaultZoom
} = props;
return (
<Map
googleMapURL={
'https://maps.googleapis.com/maps/api/js?key=' +
googleMapsApiKey +
'&libraries=geometry,drawing,places'
}
markers={places}
loadingElement={loadingElement || <div style={{height: `100%`}}/>}
containerElement={containerElement || <div style={{height: "80vh"}}/>}
mapElement={mapElement || <div style={{height: `100%`}}/>}
defaultCenter={defaultCenter || {lat: 25.798939, lng: -80.291409}}
defaultZoom={defaultZoom || 13}
/>
);
};
Then in App.js
import React from 'react';
import picture1 from '../../src/picture1.jpg';
import RechartBar from '../postlist/Rechart-Bar';
import RechartLine from '../postlist/Rechart-Line';
import driverstat from '../driverprofiles/driverstat';
import AppMap from './Maps/map';
import MapRender from './Maps/MapRender';
function Home() {
return (
<div className="Bodydiv">
<div className="homediv">
<div className="userdiv">
<div className="userdiv-profile">
<div className="userdiv-profile-photo">
<img src={picture1} className="photo" alt="picture1"></img>
</div>
<div className="userdiv-profile-name">
</div>
<div className="userdiv-profile-name">
Name:
</div>
<div className="userdiv-profile-name">
Driver ID:
</div>
<div className="userdiv-profile-name">
Plate Number:
</div>
<div className="userdiv-profile-name">
Status:
</div>
</div>
<div className="userdiv-stats">
Statistics
{driverstat.map((item, index) => {
return (
<li key={index} className={item.cName}>
{item.icon}
</li>
);
})}
<h4 class="view-history">View History</h4>
<input type="button" className="backtodrivers-btn" alt="back" value="Back"/>
</div>
</div>
<div className='mapdiv'>
<MapRender places={[
{latitude:14.7539407,longitude:121.0338431},
{latitude: 14.625981794368357,longitude: 121.06170033978614},
]}/>
</div>
</div>
<RechartBar/>
<RechartLine/>
</div>
);
}
export default Home;