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>

I am using Swiper Library in react, where I define slide per view auto, but It taking full width

I need swiper library to show images one after another, but now one image taking whole width. Here is my code
<Swiper
slidesPerView={"auto"}
spaceBetween={30}
pagination={{
clickable: true,
}}
modules={[Pagination]}
className="mySwiper"
>
{items !== undefined &&
items.length > 0 &&
items.map(function (item, key) {
return (
<SwiperSlide>
<div key={key}>
<img
data-index={item.analytics.systemId}
onClick={handleMovieClick}
alt={item.title}
src={item.images[0].location}
height={window.screen.height / 4}
/>
</div>
</SwiperSlide>
);
})}
</Swiper>

React: How ReactToPrint can print dynamic width fit on any page size

I have 2 divs contain highchart components, and they are wrapped in each grid separately. I have put a reference on the second div for ReactToPrint to print this div only.
When I maximize the browser, the print preview shows the image cannot fully fit in (refer to below Max window image) . However, when I reduce the browser size, the print preview shows a wide left margin (refer to below Narrow window image).
How can I print that div with full width regardless the size of browser on any page size e.g. A4 size, A3 size, etc?
Codes:
import React, { useRef } from 'react'
import ReactToPrint from 'react-to-print';
import HighChartTemp from './HighChartTemp';
import Grid from '#material-ui/core/Grid';
import Button from '#material-ui/core/Button'
import Box from "#material-ui/core/Box";
import PrintIcon from '#material-ui/icons/Print';
function PrintTest() {
const printRef = useRef();
return (
<div>
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<Box borderRadius={16} boxShadow={3} >
<div><HighChartTemp type='bar' />
</div>
</Box>
</Grid>
<Grid item xs={12} sm={6}>
<Box borderRadius={16} boxShadow={3} >
<div id="page" ref={printRef}>
<HighChartTemp type='column' /> {/* print this chart only */}
</div>
</Box>
</Grid>
</Grid>
<Button>
<ReactToPrint
trigger={() => <PrintIcon fontSize="large" style={{ color: 'blue' }} />}
content={() => printRef.current}
pageStyle="#page { margin-top: 100px; } "
/>
</Button>
</div>
)
}
export default PrintTest
Prior to print
Max window:
Narrow window:

How to resize Chart.JS element in React.js?

I have a React component Webstats which returns a Doughnut chart from react-chartjs-2 library. Here is how the code looks like:
const Webstats = () => {
//code to create chart.
return <Doughnut data={pd} />;
}
I use this component inside another component called Dashboard. I want to display the chart alongside a Logout button. Both should be in the same row. I use flex property of css for this purpose.
const rowC = {
display: "flex",
flexDirection: "row"
};
const Dashboard = () => {
return (
<div style={rowC}>
<Webstats />
<Link to="/">
<div>
<button onClick={auth.logout}>Logout</button>
</div>
</Link>
</div>
);
};
export default Dashboard;
But the problem is that, chart size is too big as compared to logout button.
I want to make chart size small, around 30% of the width of <div style={rowC}>. I tried these things:
return <Doughnut data={pd} width="30%"/>;
and
return (
<div style={rowC}>
<Webstats width="30%" />
// rest of html
)
and also
return (
<div width="30%">
<Doughnut data={pd} />
</div>
);
But none of this gives me the desired result. How to I resize the chart to 30% of the width (and height auto adjusted) of the <div style={rowC}>?

The documentation for ChartJS states that you need to set maintainAspectRatio to false for it to use the width and height props that you pass into your chart.
In order for Chart.js to obey the custom size you need to set maintainAspectRatio to false.
<Doughnut
data={data}
width={"30%"}
options={{ maintainAspectRatio: false }}
/>

Wrap it in div Container and set width and height.
Ex:
<div style={{height:"60vh",position:"relative", marginBottom:"1%", padding:"1%"}}>
<Doughnut options={options} data={chartData} />
</div>

Doing the following works for me:
set height and width on the <Doughnut /> component.
Set the maintainAspectRation to false.
Here is what the outcome looks like:
<Doughnut
data={data}
height="200px"
width="200px"
options={{ maintainAspectRatio: false }}
/>

How to hide overflow text content in react

I try to implement the functionality to hide text that overflow grid component.
But still the text is not hidden. So I want to know how to implement this functionality.
Front : React
css framework : semantic-ui-react
Here is the target code:
render() {
return (
<Container style={{marginTop: '3em'}} text>
<Grid columns={1} divided="vertically">
<Grid.Row>
{(this.state.articleDatas || []).map(function(articleData, i) {
return (
<Grid.Column>
<Segment>
<Header as="h1">{articleData.title}</Header>
<p style={{textOverflow: 'clip'}}>
{articleData.content.length > 100
? articleData.content.substring(0, 97) + '...'
: articleData.content}
</p>
</Segment>
</Grid.Column>
);
})}
</Grid.Row>
</Grid>
</Container>
);
}
This is the current status on the screen.
https://s19.aconvert.com/convert/p3r68-cdx67/gpext-9x16c.gif
I want to hide overflowed text automatically to widen or shorten component like below picture.
The full source code is here:
https://github.com/jpskgc/article/blob/master/client/src/components/List.tsx
I expect the overflowed text to be hidden.
But the actual is not. So I want to know how to hide it.

You can try word-break property in CSS. Consider the element with class myElement:
.myElement {
word-break: break-all;
}

style={{overflow: "hidden"}}