Develop Reference

Why is my container no scrolling as i click on the button?

I am trying to do a horizontal slider with buttons. So i have 6 cards and 6 dot buttons. As i click for example in the second button with id of 1 it should slide to the second image. But fore some reason the scroll event is not working.
This is my css:
#media only screen and (max-width: 810px){
.fake-magicwall ul{
overflow: hidden;
overflow-x: auto;
flex-wrap: nowrap;
}
.dot{
width: 15px;
height: 15px;
border-radius: 50%;
margin: 10px;
}
}
And this is my component:
import React from 'react'
import './Work.css'
import Cta from '../atoms/Cta'
import Headphone from '../assets/images/headphones3.png'
import Calendar from '../assets/images/calendar.png'
import DevConnector from '../assets/images/dev.png'
import Bulls from '../assets/images/bulls2.png'
import Expenses from '../assets/images/reactExpenses.png'
import SixFlags from '../assets/images/sixflags.png'
import useDots from '../hooks/useDots';
const images = [Calendar, Headphone, SixFlags, DevConnector, Bulls, Expenses];
const Work = () => {
const [activeIndex, setActiveIndex] = useDots(images.length);
function handleDotClick(index) {
console.log("Clicked dot with index:", index);
setActiveIndex(index);
const targetCard = document.querySelector(`[data-id="${index}"]`);
console.log("Target card:", targetCard);
if (targetCard) {
const magicWall = document.getElementById('home-magicwall');
console.log("Magic wall:", magicWall);
console.log("Target card offsetLeft:", targetCard.offsetLeft);
console.log("Magic wall offsetLeft:", magicWall.offsetLeft);
magicWall.scroll({
left: targetCard.offsetLeft - magicWall.offsetLeft,
behavior: 'smooth'
});
}
}
return (
<div className="main-container">
<section id="section-work">
<div id="header">
<h2>My Work</h2>
</div>
<div className="text-zone-2">
<div>
<p>
A small gallery of recent projects chosen by me. I've done them all together with amazing people from
companies around the globe. It's only a drop in the ocean compared to the entire list. Interested to see
some more? Visit my work page.
<br />
</p>
</div>
<div className="btn-container">
<Cta className="btn" link="https://github.com/mateoghidini1998" content="See More" />
</div>
</div>
<div className="fake-big-2">Work</div>
</section>
<div className="dots">
{images.map((image, index) => (
<button
key={index}
className={`dot ${index === activeIndex ? 'active' : ''}`}
onClick={() => handleDotClick(index)}
></button>
))}
</div>
<div id="home-magicwall" className="fake-magicwall">
<ul>
{images.map((image, index) => (
<li key={index} className={`magic-wall_item ${index === activeIndex ? 'active' : ''}`}>
<img src={image} alt="image" />
<div className="hover-content"></div>
<a href="/" className="colorbox" data-id={index}></a>
</li>
))}
</ul>
</div>
</div>
);
};
export default Work;
This is my custom hook:
import { useState } from 'react';
function useDots(images) {
const [activeIndex, setActiveIndex] = useState(0);
return [activeIndex, setActiveIndex];
}
export default useDots;
I did some console log and the index of the dot i am clicking is correct.
The data-id on the <a> tags is correct.
I also get Target card offsetLeft: 133
and Magic wall offsetLeft: 0 Every time i click in a button
Any reason why it is not scrolling?

You have applied the overflow-x: auto to the ul element inside of the home-magicwall div and not the home-magicwall div itself so that technically isn't scrollable. Try the ul instead:
if (targetCard) {
const magicWall = document.querySelector('.home-magicwall ul');
console.log("Magic wall:", magicWall);
console.log("Target card offsetLeft:", targetCard.offsetLeft);
console.log("Magic wall offsetLeft:", magicWall.offsetLeft);
magicWall.scroll({
left: targetCard.offsetLeft - magicWall.offsetLeft,
behavior: 'smooth'
});
}

How to create virtual scrolling for images using React js

Whats my requirement: i have some images in my external folder and i need to import to component and display it and also have to use Virtual Scroll here i have to display 1 row in div and in that 1 row have to show 5-6 images
What i did : i consumed images using context from external folder and showed images in 1 rows in div and 5-6 images but i am facing issue unable to set it to Virtual scrolling
as i checked react-virtualized & react-window plugin but i am not sure how my data is used in that format
After using the react-tiny-virtual-list images are getting stacked
below is my code
class App extends React.Component{
state={
Response:[],
}
importAll(r) {
return r.keys().map(r);
}
componentWillMount() {
let data = this.importAll(require.context('./imageFolder/', false, /\.(png|jpe?g|svg)$/));
this.setState({ Response:data})
}
render(){
return(
<div className="container" id="imagecontainer">
<div className="viewport">
{this.state.Response.map((image, index) => <img key={index} src={image} alt="info"></img> )} }
</div>
</div>
)
}
.container {
padding: 0% 6%;
height: 400px;
}
.viewport {
height: -webkit-fill-available;
width: 100%;
border: 1px solid black;
overflow: scroll;
}
img {
height: 250px;
width: 150px;
padding: 35px;
}
After implementing React-tiny-list
<div id="container">
<div id="viewport">
<VirtualList
height='400px'
width='100%'
itemCount={this.state.items.length}
itemSize={20} // Also supports variable heights (array or function getter)
style={{padding:'20px'}}
renderItem={({index, style}) =>
<div key={index} style={style}>
<img key={index} src={this.state.items[index]} alt="info"></img>
</div>
}
/>
</div>
</div>

you can also use the https://github.com/bvaughn/react-virtualized plugin in this if you want to display this as table you can choose list or you can choose grid also .For you requirement i recommend using Masonry from 'react-virtualized';
below is the sample for displaying
import React from 'react';
import {
CellMeasurer,
CellMeasurerCache,
createMasonryCellPositioner,
Masonry
} from 'react-virtualized';
import 'react-virtualized/styles.css';
var images = [];
const columnWidth = 250;
const defaultHeight = 260;
const defaultWidth = columnWidth;
const cache = new CellMeasurerCache({
defaultHeight,
defaultWidth,
fixedWidth: true
})
// Our masonry layout will use 3 columns with a 10px gutter between
const cellPositioner = createMasonryCellPositioner({
cellMeasurerCache: cache,
columnCount: 4,
columnWidth,
spacer: 27
})
function cellRenderer ({ index, key, parent, style }) {
const datum = images[index]
const height = columnWidth || defaultHeight ;
return (
<CellMeasurer
cache={cache}
index={index}
key={key}
parent={parent}
>
<div style={style}>
<img
src={datum}
style={{
height: height,
width: columnWidth,
display: "block"
}}
alt="info"
/>
</div>
</CellMeasurer>
)
}
class Grid extends React.Component{
importAll(r) {
return r.keys().map(r);
}
componentWillMount() {
images = this.importAll(require.context('../imageFolder/', false, /\.(png|jpe?g|svg)$/));
}
render(){
return(
<div id="container">
<div id="viewport">
<Masonry
cellCount={images.length}
cellMeasurerCache={cache}
cellPositioner={cellPositioner}
cellRenderer={cellRenderer}
height={400}
width={1320}
/>
</div>
</div>
)
}
}
export default Grid;
I hope this will resolve your issue

If you're having trouble implementing the virtual scroll, note that the order of the imports is important when doing this, so pay heed to this - it could be contributing to your issue. (An aside: There is an npm plugin for implementing a virtual list.)
An overview of the import order for virtual scroll is:
import * as React from 'react';
import Paper from '#material-ui/core/Paper';
import {
Grid,
VirtualTable,
TableHeaderRow,
} [from material ui];
import {
your-components
} from 'your-path';
(above is non-specific, just a rough guide to the order)
You could also use a ScrollView if you are unable to implement a "Virtual scroll".
The following style will give you a horizontal scroll (as opposed to the default vertical), to enable you to display your images in a horizontally-scrollable row
<ScrollView horizontal={true}>
Hope this helps

Semantic UI React: fixed sidebar & header

I'm trying to create a header and sidebar where the header sits just left of the sidebar and not overlayed like the image below.
I've created the Sidebar and Header components separately in different files and am importing both to render into an App.js file like below:
App.js:
render() {
return (
<div className='fp-wrapper'>
<AppSidebar />
<div className='fp-panel-main'>
<AppHeader />
</div>
</div>
);
}
The issue is that the two components are being rendered ontop of each other (see screenshot). Is there any way to build these components separately and have them fit together?
I have found that one way to solve this is to build the components directly to the sidebar (see Sidebar.Pusher & text Stuff) which is rendered correctly sitting right of the sidebar whereas the header is being overlapped.
Sidebar:
render() {
const { activeItem } = this.state
return (
<Sidebar.Pusher>
<Sidebar
as={Menu}
animation='push'
direction='left'
icon='labeled'
inverted
visible='true'
vertical
width='thin'
>
<Menu.Item as='a'>
<Icon name='home' />
Lexis
</Menu.Item>
<Menu.Item as='a'>
Page 1
</Menu.Item>
<Menu.Item as='a'>
Page 2
</Menu.Item>
</Sidebar>
<Sidebar.Pusher>
Stuff
</Sidebar.Pusher>

One way to do it would be wrapping the <AppSidebar> in a <div className="sidebar"> and use display: flex to display them side by side, like this.
render(){
return (
<div className='fp-wrapper'>
<div className="sidebar">
<AppSidebar />
</div>
<div className='fp-panel-main'>
<AppHeader />
</div>
</div>
);
}
and add CSS to that
.fp-wrapper {
width: 100%;
display: flex;
flex-wrap: nowrap; //This will keep the layout at all screen sizes.
}
.sidebar {
width: 30%;
}
.fp-panel-main {
width: 70%;
}
Note: You can also add a className or id to <SideBar.Pusher> and you wouldn't need to wrap the <AppSideBar /> with the <div className="sidebar">.

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>
)
}

Adding inline styles to react

Currently I'm using react.js and I'm trying to get two div's to be side by side.
Currently I'm trying to
<div id="sidebar" style = "display:inline-block;" >
<script src="build/sidebar.js"></script>
</div>
<div id="map-canvas" style="display: inline-block; width: 20%; height: 50%; "></div>
with sidebar.js as the where react is stored. This unfortunately doesnt work however as it just moves map-canvas to the side while sidebar isn't to the left of it; its on top. I've tried many various combinations w/ float as well and none of them seem to work
Another option is to edit the sidebar.js code where I currently have
return <div>
<input type="text" value={this.state.searchString} onChange={this.handleChange} placeholder="Type here" />
<ul>
{ libraries.map(function(l){
return <li>{l.name} </li>
}) }
</ul>
</div>;
in which I try doing return <div style ="display: inline-block;">
However, in this case the generated html doesnt show up at all. I'm perplex to what I should try but react seems like it doesnt want to play nice with other div elements.

That's because in React, the style prop takes an object instead of a semicolon-separated string.
<div id="sidebar" style={{display : 'inline-block'}} >
<script src="build/sidebar.js"></script>
</div>
<div id="map-canvas" style={{display: 'inline-block', width: '20%', height: '50%'}}>
</div>
Edit:
So this:
return <div style="display: inline-block;">
Would become this:
return <div style={{display: 'inline-block'}}>

const styles = {
container: {
backgroundColor: '#ff9900',
...
...
textAlign: 'center'
}
}
export default class App extends React.Component {
render() {
return(
<div className="container" style={styles.container}>
// your other codes here...
</div>
);
}
}