I am building a time block with all the hours of the day the container only takes up 75vh and is set to scroll on overflow. I am trying to have the page load and scroll to the current time within my time block but I am having trouble figuring how to scroll within the div instead of the whole page. This works when I have the container set to 100vh but the overflow: scroll is creating a real issue for me. I see lots of answers for this issue in Angular an jQuery. But I am trying to do this in reactjs, and Im not sure how to target the scroll bar within my div.
onLoad I am calling this function:
const scrollToTime = () => {
const currentHour = moment().hour().toString()
const currentTimeEl = document.getElementById(currentHour)
window.scrollTo({
top: currentTimeEl.offsetTop,
behavior: "smooth"
})
}
I've thought of using Element.scrollTo() but this does not work.
This is a short snippet of what my container looks like:
<div className="dayView">
<hr className="day-divider1" />
<div className='dayView-timeSlot' id="12">
<Row className="time-row" >
<Col md="1" className="time-label">12:00 AM</Col>
<Col md="1" className="trash"><Trash /></Col>
<Col md="8" className="appointment-slot">
{" "}
</Col>
</Row>
</div>
<hr className="day-divider-dashed" />
<div className='dayView-timeSlot' id="12">
<Row className="time-row">
<Col md="1" className="time-label">12:30 AM</Col>
<Col md="1" className="trash"><Trash /></Col>
<Col md="8" className="appointment-slot">
{" "}
</Col>
</Row>
</div>
<hr className="day-divider1" />
...
</div>
.dayView{
height: 75vh;
overflow: scroll;
}
Is there a way to target the scroll within my dayView container?
Related
so i have divs created in react basically they are components and i want to style them using bootstrap like this:
div div div
div div
div div
so basically there are 5components,the top 3 should be small and stack next to each others with small margin. the middle two are bigger and they are under the right and left divs and the bottom ones the same as the middle divs.
i have tried doing like col-6 for the middle and col-4 for the top ones but they were all over the place and messy.
this is what i tried without using css just bootstrap:
<div className="container">
<div className="row">
<div className="col-lg-4">
<Card />
<ActualLineChart data={systolic}/>
<ActualLineChart data={Diastolic}/>
</div>
</div>
<div className="row">
<div className="col-lg-6">
<div>
<ActualBarChart data={systolicAndDiastolicAndPulseAverageNew}/>
</div>
<ActualScatterChart data={systolicAndDiastolicAndPulseAverageNew}/>
</div>
</div>
<div className="row">
<div className="col-lg-6">
<DistributionChart/>
<DistributionChart />
</div>
</div>
</div>
how can i do this behavior?
I am guessing that if you are using react-bootstrap you probably have already installed it and included react component in your app.js file using this
import { Container, Row, Col } from 'React-Bootstrap';
Then you can simply use this for your desired output.
<Container>
<Row>
<Col xs="4">
component 1
</Col>
<Col xs="4">
component 2
</Col>
<Col xs="4">
component 3
</Col>
</Row>
<Row className="justify-content-between">
<Col xs="4">
component 4
</Col>
<Col xs="4">
component 5
</Col>
</Row>
<Row className="justify-content-between">
<Col xs="4">
component 6
</Col>
<Col xs="4">
component 7
</Col>
</Row>
</Container>
Output will be look like this:
I'm trying to render my JSON data in a bootstrap column format, ideally I would have 3 items on each row, with it wrapping to the next row. Right now, it's only rendering one item per row. Could someone point me in the right direction in terms of what I'm missing here?
Part of my component:
let parksJsx = ''
if (!parks) {
parksJsx = 'loading...'
} else {
parksJsx = parks.map(park => (
<Container key={park.Name}>
<Row>
<Col lg={4} className="park-data">
<h5>{park.Name}</h5>
<img src={park.Thumbnail}/>
<li>Location: {park.Location}</li>
<li>Est. {park.Established}</li>
<li>Area: {park.Area}</li>
<li>Recreation Visitors: {park['Recreation visitors']}</li>
<p>{park.Description}</p>
<br />
</Col>
</Row>
</Container>
))
}
return (
<div>
<h2 className="header">All U.S. National Parks:</h2>
<div className="park-container">
{parksJsx}
</div>
</div>
)
Current CSS:
.park-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
.park-data {
flex: 0 1 auto;
}
Change your code to this:
let parksJsx = ''
if (!parks) {
parksJsx = 'loading...'
} else {
parksJsx = parks.map(park => (
<Col key={park.name} lg={4} className="park-data">
<h5>{park.Name}</h5>
<img src={park.Thumbnail}/>
<li>Location: {park.Location}</li>
<li>Est. {park.Established}</li>
<li>Area: {park.Area}</li>
<li>Recreation Visitors: {park['Recreation visitors']}</li>
<p>{park.Description}</p>
<br />
</Col>
))
}
return (
<div>
<h2 className="header">All U.S. National Parks:</h2>
<div className="park-container">
<Container>
<Row>
{parksJsx}
</Row>
</Container>
</div>
</div>
)
The problem was that you were rendering a container with a row per park item instead of putting all the park items inside one container with a row.
The solution was to move the container with row components out of the individual park items and put them outside the parks map.
If I could recommend some formatting, I'd suggest you implement your component as follows:
return (
<div>
<h2 className="header">All U.S. National Parks:</h2>
<div className="park-container">
{!parks ? 'loading...' :
<Container>
<Row>
{parks.map(park => (
<Col key={park.name} lg={4} className="park-data">
<h5>{park.Name}</h5>
<img src={park.Thumbnail}/>
<li>Location: {park.Location}</li>
<li>Est. {park.Established}</li>
<li>Area: {park.Area}</li>
<li>Recreation Visitors: {park['Recreation visitors']}</li>
<p>{park.Description}</p>
<br />
</Col>
))}
</Row>
</Container>
}
</div>
</div>
)
Then the logic is a lot easier to read from top to bottom.
First you need to separate the render function for a park and left there only a column with content, then you may try render all it in one row and it will work just fine because Row element has a display: flex .
I was got a row of buttons I like to adjust to changes in screen resolution or browser window resizing. Right now, when I change the screen resolution or browser window size, the button starts to overlap to the second row. I read that bootstrap and adjust the size of the buttons or text to handle the changes.
I read another post and added the following code but its not quite working
<Grid fluid={true}>
<Row">
<Col md={3}>
<Button ...>
</Col>
<Col md={3}>
<Button ...>
</Col>
<Col md={3}>
<Button ...>
</Col> <Col md={3}>
<Button ...>
</Col>
</Row>
</Grid>
When I resize the screen View from 100% and below, the buttons are resizing in height and all buttons stays on the same row. However, when I change the view resizing with Ctrl + mouse wheel to over 100%, the buttons overlap to the next line. I also see the button row overlap when resizing the browser window size.
Is there a way to resize the buttons when over 100% and changing the browser window size?
I tried to add max-width: 90% !important in the css styling, but that did not work.
Any help is appreciated. Thanks
A solution is to use react-bootstrap Grid system like this:
This behaviour will make sure that the Columns (aka your buttons in this case) to flow automatically when there is no space left, they will start from next line and not overlap as you have now:
import { Container, Row, Col } from 'react-bootstrap'
...
<Container>
<Row>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
</Row>
</Container>
Or if you're only using css:
<div className='container'>
<div className='row'>
<div className='col'><Button ... /></div>
<div className='col'><Button ... /></div>
<div className='col'><Button ... /></div>
<div className='col'><Button ... /></div>
</div>
</div>
I am using canvas-gauges in Reactjs. When I try to render direct canvas it's not rendering the canvas, so I have used <RadialGauge units='km/h'> react components. Here, I am not able to set 100% height and width for gauges. I don't want to set as it as px. Installed the following package by npm install react-canvas-gauges
<RadialGauge
id='mycanvas'
units='rpm'
title='x1000 RPM'
width={200}>
</RadialGauge>
Actual working code with px value
<Row>
<Col md="12" xl="12">
<Card>
<CardBody className="dashboard-card-widgets" >
<Row>
<Col md="6" xl="6">
<RadialGauge
units='rpm'
title='x1000 RPM'
width={200}
height={200}
value={3}
minValue={0}
maxValue={8}
majorTicks={['0', '1','2','3','4','5','6','7','8']}
minorTicks={5}
borders={false}
strokeTicks={true}
highlights={[{from: "6", to: "8", color: "rgba(200, 50, 50, .75)"}]}
ColorPlate={'#fff'}
borderShadowWidth={0}
needleType={'arrow'}
needleWidth={3}
needleCircleSize={7}
needleCircleOuter={true}
needleCircleInner={false}
animationDuration={1500}
animationRule={'linear'}
fontNumbersSize={30}
></RadialGauge>
</Col>
</Row>
</CardBody>
</Card>
</Col>
</Row>
Expected result in render:
<canvas id="mycanvs" width="100%" height="100%"></canvas>
I am creating a React form where user can upload an image. I am using a function createObjectURL() as given below which i set as the state.
This is the image component
<Row className="form-row">
<Col md={8} className="image-field">
<div className="input-image-file">
<img src={this.state.image} className="myimage" alt="choose an image"></img>
</div>
</Col>
<Col md={4} className="image-buttons">
<Row className="form-row">
<FormControl type="file" onChange={this.onImageChange.bind(this)} ></FormControl>
</Row>
<Row className="form-row">
<Button className="delete-image" onClick={this.deleteImage.bind(this)}><i className="fa fa-trash"></i> Delete</Button>
</Row>
</Col>
</Row>
this is the onImageChange and deleteImage function
onImageChange(event){
this.setState({image: URL.createObjectURL(event.target.files[0])},()=>{
console.log(this.state.image)
})
}
deleteImage(){
this.setState({image : null})
}
the URL is like
"blob:http://localhost:3000/e5531071-c8fc-46db-a934-98678c1cec3a"
I send this data to backend and create an entry in mongodb also where is the URL is saved correctly. I have an option called edit which retrieves all the contents of the form for the user to edit. All contents are getting displayed except the Image.
I get an error like
GET blob:http://localhost:3000/e5531071-c8fc-46db-a934-98678c1cec3a 404 (Not Found)
please do help me thanks in advance this is the console error log