We Keep Coding

Flex element just keep expanding

I have a block element,
I want to change the element to flex and add it no wrap,
now when I change the element to flex, the items inside it just keep expanding the entire page,
I don't want to change my entire project
and I don't want to have to use fixed width,
why doesn't the flex element behave just like block element?
<div>
<div
style={{
display: 'flex',
}}>
{chips.map((option, index) => {
return (
<Tooltip
key={option.name}
title={isChipFoundInOptions ? '' : 'Option not found in this profile context.'}>
<Chip
label={`${option.displayName} - ${option.name}`}
// {...getChipProps({ index })}
/>
</Tooltip>
)
})}
</div>
</div>

querySelector to find a DOM element which has particular text anywhere inside its tree

<div>
<card class="card-class">
<header class="header-class">Title 1</header>
</card>
<div>Stuff</div>
<card class="card-class"> <-- This one
<header class="header-class">Title 2</header>
</card>
<div>More stuff?</div>
<card class="card-class">
<header class="header-class">Title 3</header>
</card>
</div>
I would like to pull out the DOM element as noted in the example using 2 conditions. The dom element I am interested in has a class card-class and somewhere inside this DOM element there is an element with class header-class which has a title inside.
I need to get a particular card BY the title text. So in this example I want the card element with 'Title 2'. Is there any way to ahcieve this with just a selector rather than javascript?

The only possible way I can see this working with one line is if you add a data attribute to the element, and then target that.
const title2 = document.querySelector('.header-class[data-title="Title 2"]');
console.log(title2.textContent);
<div>
<card class="card-class">
<header class="header-class" data-title="Title 1">Title 1</header>
</card>
<div>Stuff</div>
<card class="card-class">
<header class="header-class" data-title="Title 2">Title 2</header>
</card>
<div>More stuff?</div>
<card class="card-class">
<header class="header-class" data-title="Title 3">Title 3</header>
</card>
</div>

Not sure it´s possible with a one-liner, but here is an alternative:
First you get all the "header-class", that are descendant of "card-class".
Then you loop through them looking for requested title.
And finally you access the parent component, which is the card you are looking for.
const cards = document.querySelectorAll(".card-class .header-class");
for (let card of cards) {
if (card.innerHTML === "Title 2") {
let cardYouAreLookingFor = card.parentElement;
console.log(cardYouAreLookingFor);
}
}
Hope this helps. Cheers!

How To Disable Grid and its children in React js MUI

I Want to Disable Grid (MUI Component) (and its Children) in React js .
and also , I Want to know how to Disable any Container and it's items in React js! (No matter what kind of children it has)
ex:
<Grid
item
disabled //And any other options
xs={12}
md={6}
spacing={1}
style={{ padding: '5px' }}>
<CmpDateTimePicker
label="from"
value={this.props.from_timestamp}
onChange={(from_timestamp) =>
this.props.OnFromPeriodChanged(from_timestamp)}
dir={dir}
intl={intl}
preSelect={lastMonthDate}
/>
</Grid>
Thanks for your Help! :)

The disabled prop is not available on every MUI component, but instead you can conditionally render a component by using a simple if statement or ternary operator.
Since you give no context for the above code, I can't directly give you an example, but I can give examples for the two cases I spoke about above.
You can use an if statement like:
if(<conditional>){
return <Grid>...</Grid>
}
return <div></div>
With this code your component will only render what is in the if statement when your conditional is true.
Another way is to use a ternary:
return (
<div>
{<conditional>?<Grid>
...
</Grid>:""}
</div>
)
You can use this inside of jsx to only conditionally render a certain component.

We Can disable Element via pointer-events: none property.
js file:
<Grid
item
className={this.state.isDisabled ? "container-disabled" : "container"}
xs={12}
md={6}
spacing={1}
style={{ padding: '5px' }}>
<CmpDateTimePicker
label="from"
value={this.props.from_timestamp}
onChange={(from_timestamp) =>
this.props.OnFromPeriodChanged(from_timestamp)}
dir={dir}
intl={intl}
preSelect={lastMonthDate}
/>
</Grid>
css file:
.container-disabled{
pointer-events: none;
}
.container{
/* some styles */
}

How to get the properties when a slide is clicked in swiperjs without jquery

I am trying to get the values of a specific card when it is clicked in swiperJS but am not finding in the documentation if it is possible to do so.
Hoping to not resort to wrapping each slide in a label and input button.
My code here:
<Swiper
slidesPerView={'auto'}
spaceBetween={200}
centeredSlides={true}
pagination={{
"clickable": true
}}>
{Cards.map((card, idx) => {
return (
<div className="row" style={{ display: 'inline-block' }}>
<div className="col-12 swiper-container">
<SwiperSlide>
<Cards
number={card.number}
name={card.name}
expiry={card.expiry}
cvc={card.cvc}
// focused={focus}
/>
</SwiperSlide>
</div>
</div>
)
})}
</Swiper>
Is it possible to do so?

Looking at swiper's react source code it seems like SwiperSlide renders by default into a div node . This node can receive a onClick prop, which should execute whatever function you want. That would look something like this:
<SwiperSlide onClick={()=> console.log(card.name)}>
// ...
</SwiperSlide>
If for some reason that doesn't work either, consider adding the onClick to a div already wrapping the slide (for example div.col-12.swiper-container)

How to prevent text overflow in card component in Ant design

I am using the card component to design a card with image and a title and description
<div>
<Card
hoverable
style={{ width: 700, wordWrap: 'break-word'}}
cover={<img alt="example" src={ urlToImage } />}
>
<Meta title={ title } description={ content } />
</Card>
</div>
The problem is that since the length of title is large it seems to do a text overflow on the same.
I tried adding a custom JSX to the title component but it does not allow styling for some reason
Link to the sand box SandBox Link

Could change the css. It uses a class .ant-card-meta-title. In css file add
.ant-card-meta-title {
white-space: pre-line;
}

.ant-card-meta-title {
white-space: pre-line;
}