Develop Reference

facing issue vertically Aligning items in Bootstrap

I want to give same row line to all the grid without mentioning height. So, I used align-item-stretch but arrow button not adjusting.
How to align the arrows to be on the same height?
Here my code
Here are the image
<div
className="m-2 p-0 shadow-lg rounded-2 pe-auto border border-primary"
style={{ width: "100%", maxWidth: "200px" }}
key={data.key}
>
<a href="/">
<div className="p-2 d-flex flex-xl-column align-items-center align-items-xl-start">
<img
className="mr-1"
style={{ height: 50, width: 50 }}
src={data.img}
alt=""
/>
<div>
<h3 className="wow fadeInUp">{data.name}</h3>
<p className="fs-6 mt-2">{data.describe}</p>
</div>
</div>
<div className="d-flex justify-content-end">
<img
style={{width: 30,height: 30,objectFit: "contain",borderBottomRightRadius: 8}}
src={require("./components/Images/arrow-right.png")}
alt=""
/>
</div>
</a>
</div>
How to adjust arrow in the end, which I need to understand.

You can achieve this with some minor changes to your HTML markup (not absolutely needed, but it's easier to manipulate them via CSS if you do).
First, change the way your a and the div holding the arrow are rendered, by adding additional classes.
<a href="/" className="myLink"> <!-- add the class myLink -->
<div className="p-2 d-flex flex-xl-column align-items-center align-items-xl-start">
<img
className="mr-1"
style={{ height: 50, width: 50 }}
src={data.img}
alt=""
/>
<div>
<h3 className="wow fadeInUp">{data.name}</h3>
<p className="fs-6 mt-2">{data.describe}</p>
</div>
</div>
<div className="myArrow d-flex justify-content-end"> <!-- add the class myArrow -->
<img
style={{
width: 30,
height: 30,
objectFit: "contain",
borderBottomRightRadius: 8
}}
src={require("./components/Images/arrow-right.png")}
alt=""
/>
</div>
</a>
Then, add this to your CSS:
a.myLink {
position: relative;
display: block;
height: 100%;
}
.myArrow {
position: absolute;
top: 50%;
right: 5px;
background-color: rgba(255, 255, 255, 0.75);
border-radius: 50%;
}
The background colour and border-radius were added to make the arrow button somewhat transparent.
If you don't want the arrows to overlap the text below them, you can increase the width of the content below the arrows (for example, by the arrow width + some pixels, and then add some padding-right to it (again, equal to the arrow width + some pixels).

Render single component on hover

I currently have two avatars that are rendered on a page. On hover I want a card to pop up that displays player information.
Currently when hovering on the first avatar both player cards pop up and i only want the card of the avatar that is hovered over.
The second issue is that on hover of the second avatar nothing happens.
I'd like the card of the avatar that is hovered to only pop up.
function Profiles() {
const { hovered, ref } = useHover();
return (
<Container style={{ display: "flex" }}>
<div ref={ref}>
{hovered ? (
<PlayerOne />
) : (
<Avatar
radius="xl"
size="xl"
src={tobias}
style={{ border: "black solid .1rem" }}
sx={(theme) => ({
backgroundColor: theme.colors.yellow[1],
"&:hover": {
backgroundColor: theme.colors.yellow[3],
},
})}
/>
)}
</div>
<div>
{hovered ? (
<PlayerTwo />
) : (
<Avatar
radius="xl"
size="xl"
src={vij}
style={{ border: "black solid .1rem" }}
sx={(theme) => ({
backgroundColor: theme.colors.yellow[1],
"&:hover": {
backgroundColor: theme.colors.yellow[3],
},
})}
/>
)}
</div>
</Container>
);
}
export default Profiles;

this makes sense but just use good old CSS. oh and if using React its className of course, not class
<div class="parent">
<div class="child1">
<PlayerOne />
</div>
<div class="child2">
<Avatar
radius="xl"
size="xl"
src={vij}
style={{ border: "black solid .1rem" }}
sx={(theme) => ({
backgroundColor: theme.colors.yellow[1],
"&:hover": {
backgroundColor: theme.colors.yellow[3],
},
})}
/>
</div>
</div>
<div class="parent">
<div class="child1">
<PlayerTwo />
</div>
<div class="child2">
<Avatar
radius="xl"
size="xl"
src={tobias}
style={{ border: "black solid .1rem" }}
sx={(theme) => ({
backgroundColor: theme.colors.yellow[1],
"&:hover": {
backgroundColor: theme.colors.yellow[3],
},
})}
/>
</div>
</div>
in your CSS
.child1 { display: none; }
.parent:hover > .child1 { display: none; }
.parent:hover > .child2 { display: block; }

How to align 2 rows horizontally in react?

I am making a react app and I have few columns which are to be mapped to values,I want to map the field names horizontally with field values.I tried with the below code but still it is a bit un-aligned.
my code:
Task class:
return (
<div >
<div>
<a className="clientparams1">{task.clientName} </a>
</div>
<div>
<a className="clientparams1">{task.clientId}</a>
</div>
<div>
<a className="clientparams1">{task.clientSecret}</a>
</div>
<div>
<a className="clientparams1">{task.status}</a>
</div>
<div>
<a className="clientparams1">{task.generated_on}</a>
</div>
{/* <div>
<FaTimes
className="clientparams"
style={{ color: "red", cursor: "pointer" }}
onClick={() => onDelete(task.clientId)}
/>
</div> */}
</div>
);
};
export default Task;
Tasks class:
It contains headings.
return (
<div>
<div className="form1">
<div>
<a className="clientparams1">clientName</a>
</div>
<div>
<a className="clientparams1">clientId</a>
</div>
<div>
<a className="clientparams1">clientSecret</a>
</div>
<div>
<a className="clientparams1">status</a>
</div>
<div>
<a className="clientparams1">generated_on</a>
</div>
</div>
{tasks.map((task, index) => (
<Task key={index} task={task} onDelete={onDelete} />
))}
</div>
)
}
In this code I have a parent div inside which there are 2 div tags and 1st div has all the field names and 2nd field has all the values to their corresponding field names.
Here are my css classes that i am using above:
.clientparams{
margin: 40px;
height: 30px;
width: 250px;
font-size: medium;
}
.form1{
display: flex;
}
.main_container{
display: inline-block;
justify-content: center;
align-items: center;
flex-wrap: wrap;
text-align: justify;
}
Can someone help me with this?
Thanks

You can try html table like this.
<table>
<tr>
<th>clientName</th>
<th>clientId</th>
<th>clientSecret</th>
<th>status</th>
<th>generated_on</th>
</tr>
<tr>
<td>{task.clientName}</td>
<td>{task.clientId}</td>
<td>{task.clientSecret}</td>
<td>{task.status}</td>
<td>{task.generated_on}</td>
</tr>
</table>
Hope that will solve your issue.

in your Task component, inside of .form1 div, I have made two div. In the first one, I have added ur client info. and in the second div, I have added the Task component. These 2 divs have their own className client_container and task_container respectively. Their className is assigned with CSS property.
return (
<div className="main_container>
<div className="form1">
<div className="client_container">
<div>
<a className="clientparams1">clientName</a>
</div>
<div>
<a className="clientparams1">clientId</a>
</div>
<div>
<a className="clientparams1">clientSecret</a>
</div>
<div>
<a className="clientparams1">status</a>
</div>
<div>
<a className="clientparams1">generated_on</a>
</div>
</div>
<div className="task_container">
{tasks.map((task, index) => (
<Task key={index} task={task} onDelete={onDelete} />
))}
</div>
</div>
)
}
#css
.form1{
display: flex;
flex-direction: column;
}
.client_container{
display: flex;
}
.task_container{
display: flex;
}

React infinite scroll keeps making requests forever

I am using this library https://www.npmjs.com/package/react-infinite-scroller for loading more when scroll reaches the end.
My code looks as below:
import React from 'react';
import {Route, Link} from 'react-router-dom';
import FourthView from '../fourthview/fourthview.component';
import {Bootstrap, Grid, Row, Col, Button, Image, Modal, Popover} from 'react-bootstrap';
import traineeship from './traineeship.api';
import Header from '../header/header.component';
import InfiniteScroll from 'react-infinite-scroller';
require('./traineeship.style.scss');
class Traineeship extends React.Component {
constructor(props) {
super(props);
this.state = {
companies: [],
page: 0,
resetResult: false,
};
}
componentDidMount() {
this.fetchCompanies(this.state.page);
}
fetchCompanies = page => {
traineeship.getAll(page).then(response => {
if (response.data) {
const companies = Array.from(this.state.companies);
this.setState({companies: companies.concat(response.data._embedded.companies)});
} else {
console.log(response);
}
});
};
render() {
return (
<div className={"wrapperDiv"}>
{JSON.stringify(this.props.rootState)}
<div className={"flexDivCol"}>
<div id="header">
<Header/>
</div>
<div id="result">
<div className={"search"}>
<h2>Harjoittelupaikkoja</h2>
<p className={"secondaryColor"}>{this.state.companies.length} paikkaa löydetty</p>
</div>
<div className={"filters"}>
<h5 style={{marginTop: '30px', marginBottom: '10px'}} className={"primaryColor"}>
Hakukriteerit</h5>
<div className={"filter"}>Ravintola- ja cateringala</div>
<div className={"filter"}>Tarjoilija</div>
<div className={"filter"}>Kaikki</div>
</div>
<div className={"searchResults"}>
<h5 style={{marginTop: '30px', marginBottom: '10px'}} className={"primaryColor"}>
Hakutulokset</h5>
<InfiniteScroll
pageStart={0}
loadMore={ this.fetchCompanies }
hasMore={true || false}
loader={<div className="loader" key={0}>Loading ...</div>}
useWindow={false}
>
{
this.state.companies.map((traineeship, key) => (
<div id={"item"} key={key}>
<div className={"companyInfo"}>
<div className={"heading"}>
<div id={"companyDiv"}>
<p style={{
fontSize: '18px',
lineHeight: '18px'
}}>{traineeship.name}</p>
</div>
{
traineeship.video == null
? ''
:
<div id={"videoDiv"}>
<div className={"youtubeBox center"}>
<div id={"youtubeIcon"}>
<a className={"primaryColor"}
href={traineeship.mediaUrl}>
<span style={{marginRight: '3px'}}><Image
src="http://www.stickpng.com/assets/images/580b57fcd9996e24bc43c545.png"
style={{
width: '24px',
height: '17px'
}}/></span>
<span> <p style={{
fontSize: '13px',
lineHeight: '18px',
margin: 0,
display: 'inline-block'
}}>Esittely</p></span>
</a>
</div>
<div id={"txtVideo"}>
</div>
</div>
</div>
}
</div>
<div className={"location"}>
<div id={"locationIcon"}>
<Image src="assets/img/icLocation.png"
style={{marginTop: '-7px'}}/>
</div>
<div id={"address"}>
<a href={"https://www.google.com/maps/search/?api=1&query=" + encodeURI("Fredrikinkatu 4, Helsinki")}>
<p className={"primaryColor"}
style={{fontSize: '13px'}}>{traineeship.city}(show in
map)</p>
</a>
</div>
</div>
<div className={"companyDescription"}>
<p className={"secondaryColor"} style={{
fontSize: '14px',
lineHeight: '20px'
}}>{traineeship.description}</p>
</div>
<div className={"companyContacts"} style={{marginTop: '20px'}}>
<p className={"contactInfo"}>URL: {traineeship.website}</p>
<p className={"contactInfo"}>Email: {traineeship.email}</p>
<p className={"contactInfo"}>Puh: {traineeship.phonenumber}</p>
<p className={"contactInfo"}>Contact: {traineeship.contact}</p>
</div>
</div>
</div>
))
}
</InfiniteScroll>
</div>
</div>
</div>
</div>
);
}
}
export default Traineeship;
The problem is that it keep calling the fetchCompanies forever. Is there any fix for this?
In the documentation there is no samples of how the loadmore function should look like.

"hasMore" is always true in your case, make it false when there is no next URL.

problem, call function in render method
loadMore={ this.fetchCompanies }
Function call in componentDidMount and set state after use this.state print in template

div doesn't expand all the way horizontally

Why is there white space to the left and right of my div?
render() {
return (
<div className="container intro-body">
<div className="row">
<h2 className="intro-name center-block">TEXT</h2>
</div>
</div>
)
}
And in my css:
.intro-body {
height: 500px;
background-color: #3BC5C3;
}
I've tried to set body to margin: 0 and padding: 0, thinking it had to do with Bootstrap's default values, but it didn't work. I also don't have a container so why does it still have padding?

The issue is the "container" class - Bootstrap also applies a styling of this - use "container-fluid" to get the full width.
render() {
return (
<div className="container-fluid intro-body">
<div className="row ">
<h2 className="intro-name center-block">TEXT</h2>
</div>
</div>
)
}