Develop Reference

How to horizontalize react js component?

I created app to map all card components on a page. But components are shown vertically. I need to show 3 components per row. How can I show it like that? Here is my code.
const[item, setItem] = useState([]);
function addItem(newItem){ //This addItem Part is working.
setItem(prevItems =>{
return [...prevItems, newItem]
});
}
return(<div className="container">
<div className="row">
<div className="col-lg-4" style={{cursor: "pointer"}}>
<AddCard />
</div>
<div style={{cursor: "pointer"}}>
{item.map((items, index)=>{
return(
<div className="col-lg-4" >
<ItemCard
key={index}
id={index}
title={items.title}
description={items.description}
/>
</div>
)
})}
</div>
</div>)

You can use display:"flex" on the container
const[item, setItem] = useState([]);
function addItem(newItem){ //This addItem Part is working.
setItem(prevItems =>{
return [...prevItems, newItem]
});
}
return(<div className="container">
<div className="row">
<div className="col-lg-4" style={{cursor: "pointer"}}>
<AddCard />
</div>
<div style={{cursor: "pointer", display:"flex"}}>
{item.map((items, index)=>{
return(
<div className="col-lg-4" >
<ItemCard
key={index}
id={index}
title={items.title}
description={items.description}
/>
</div>
)
})}
</div>
</div>)

Use flexboxes, as React lets you create components, so we can style them just like HTML elements with flexboxes.
Example :
.flexbox-container {
display: flex;
flex-direction: row;
}
<div class="flexbox-container">
<div>Element1</div>
<div>Element2</div>
<div>Element3</div>
</div>

HTML CSS Modal: Position fixed not working

I am trying to create a Modal
I have given the Background component position:fixed still its starting from the toggle button
when position:fixed is active:
when position:fixed is not active:
const Background = styled.div`
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
position: fixed;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
`;
<div>
{' '}
{showModal ? (
<Background>
<ModalWrapper showModal={showModal}>
<ModalImg src={require('./modal.jpg')} alt='camera' />
<ModalContent>
<h1>Are you ready?</h1>
<p>Get exclusive access to our next launch.</p>
<button>Join Now</button>
</ModalContent>
<CloseModalButton
aria-label='Close modal'
onClick={() => setShowModal((prev) => !prev)}
/>
</ModalWrapper>
</Background>
) : null}
<div/>

the tag used in the last segment of code as a wrapper/parent is not style neutral, it has some default styling which is causing such problem.
Replace is with <> </>
<>
{' '}
{showModal ? (
<Background>
<ModalWrapper showModal={showModal}>
<ModalImg src={require('./modal.jpg')} alt='camera' />
<ModalContent>
<h1>Are you ready?</h1>
<p>Get exclusive access to our next launch.</p>
<button>Join Now</button>
</ModalContent>
<CloseModalButton
aria-label='Close modal'
onClick={() => setShowModal((prev) => !prev)}
/>
</ModalWrapper>
</Background>
) : null}
</>
And now everything works fine!

split slider Items in multiple rows

I hope you can give me a hint:
A slider of category images with a url link will be displayed on a start page. Just 4 images per row have to be displayed. How can do that? I cant see the solution. :-/
The website uses i.a. react.js.
<div className="middle-section">
{categories && categories.length > 0 &&
<div className="categories-wrapper">
<Slider multi>
{
categories.map((model) => {
return <CategoryItem key={model.ID} model={model}
url={urlGenerator.get({ page: 'category', id: model.FriendlyID, name: decodeStringForURL(model.Name) })} />
}
)
}
</Slider>
</div>
}
The element CategoryItem looks like below:
const CategoryItem = ({ model, url, className }) => {
if (!model) {
return <div className="category-item" />
}
const imageUrl = model.ImageUrl ? model.ImageUrl : require(`$assets/images/default.png`)
return (
<div>
<Link to={url}>
<a className={`category-item ${className || ''}`} data-qaautomationinfo={model.FriendlyID}>
<div className="image-wrapper">
<img src={imageUrl} />
</div>
<div className="category-name">
<HTMLLinesEllipsis style={{ whiteSpace: 'pre-wrap' }} unsafeHTML={model.Name} maxLine={2} basedOn='words' />
</div>
</a>
</Link>
</div>
)
}
The CSS of CategoryItem looks like below:
.category-item {
display: flex;
flex-direction: column;
font-size: var(--text-size-label);
}
I really cant see it.
Hope you can help me guys.
Thx a lot!

Vue: Components added through "v-for" ignore flexbox layout

I am trying to have navigation controls displayed horizontally in the upper right hand section of the screen. The following works and displays with each item in a row:
<template>
<div id="navControlPanel">
<div id="controls">
<NavControl />
<NavControl />
<NavControl />
</div>
</div>
</template>
<style>
#navControlPanel{
display: flex;
flex-direction: row;
width: 100px;
height: 50px;
background: purple;
}
#controls{
display: flex;
flex-direction: row;
width: 100%;
}
</style>
yet this does not, and instead displays with them in a column:
<template>
<div id="navControlPanel">
<div id="controls" v-bind:key="control.id" v-for="control in controls">
<NavControl v-bind:control="control" />
</div>
</div>
</template>
NavControl:
<template>
<div id="navControl">
{{control.id}} //Set to just plain text when not dynamically binded
</div>
</template>
<style scoped>
#navControl{
width: 30pt;
height: 30pt;
background: blue;
border-radius: 1000px;
}
</style>
I can't find a logical reason why these would be any different, unless this is some inherent way Vue works that I'm missing.

The issue here seems to be that in the first example you got one div with multiple components in it:
<div id="controls">
<NavControl />
<NavControl />
<NavControl />
</div>
The problem is that in the second example you are creating multiple div elements with the same id and each of them have nested component inside of it.
Here, in a loop, you create multiple div elements with id="controls"
<div id="controls" v-bind:key="control.id" v-for="control in controls">
<NavControl v-bind:control="control" />
</div>
It ends up being something similar to this:
<div id="controls">
<NavControl />
</div>
<div id="controls">
<NavControl />
</div>
<div id="controls">
<NavControl />
</div>
You would probably see it better if you inspected your code in the browser tools.
As a side note: please, keep in mind that if you for whatever reason wanted to do something like this then you would use class instead of id.
Solution:
What you would want to do instead is to create multiple components inside your <div id="controls"></div>.
To do that you would place v-for inside the component and not the outer div.
<NavControl v-for="control in controls" v-bind:control="control" :key="control.id"/>

I am unsure of the actual desired scope, so I will go over both.
If we want multiple controls in the template, as laid out, switch id="controls" to class="controls":
<template>
<div id="navControlPanel">
<div class="controls" v-bind:key="control.id" v-for="control in controls">
<NavControl v-bind:control="control" />
</div>
</div>
</template>
...
.controls {
/* my styles */
}
If the v-for is out of scope, and we only want this ran on those items on NavControl:
<template>
<div id="navControlPanel">
<div class="controls">
<NavControl
v-for="control in controls"
/>
</div>
</div>
</template>

React Card Component

I am trying to create 3 cards in a row but I cant do it. Every card component creates max-width: 1366px and row div. How I can do this?
class CardNew extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div class="container news-card" style={{ maxWidth: `1366px` }}>
<div class="row row-width" style={{ width: `300px`, height: `438px`, marginTop: `60px`, marginLeft: `200px`}}>
<div class="card-img-top m-fix" style={{ marginLeft: `-10px` }}><img src="https://telgrafs.com/assets/src/article-basketball-little-0.png"></img></div>
<div class="card-text news-category" style={{ paddingBottom: `20px` }}>gündem</div>
<div class="card-title news-ct" style={{ marginLeft: `-60px`, marginTop: `15px` }}>Ücretsiz Maske Nasıl Alınır?</div>
<div class="card-text news-ctext">E-Devlet üzerinden bilgilerinizi girerek ücretsiz maske temin edebilirsiniz. Talepler Sağlık Bakanlığı ile Ulaştırma ve Altyapı Bakanlığı tarafından sizlere ulaştırılacaktır.</div>
<div class="card-img-bottom author-image"><img src="https://telgrafs.com/assets/src/profile-kaa.png"></img></div>
<div class="card-author-name">Kerem Alan</div>
<div class="card-post-time disabled">5 saat önce</div>
<div class="card-text pb-more card-fixed" style={{ color: `#979797`, marginLeft: `` }}>Devamını oku</div>
</div>
</div>
);
}
}
What I want
What I got

the sequence of classes that you're looking for is:
container
row
col-md-XX
card
your-card-contents
relevant HTML:
<div className="container">
<div className="row">
<div className="col-12 col-sm-4">
<div className="card">
</div>
</div>
</div>
</div>
sample stackblitz here

I would use CSS-Grid for the layout, I give you an example below.
Here is a link where you can learn CSS Grid
You should try with Flexbox also
const App = () => (
<div className="container">
<div className="card" />
<div className="card" />
<div className="card" />
</div>
);
ReactDOM.render(
<App />,
document.body
);
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
justify-items: center;
column-gap: 24px;
row-gap: 24px;
max-width: 948px;
margin: 0 auto;
}
.card {
height: 438px;
width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>