Flex element just keep expanding - javascript

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>

Related

Align <a> to right side of div

How would I align the <a> element, containing the Button with the string Push Me to the right side of the <div> (<Paper>)?
https://codesandbox.io/s/eager-noyce-j356qe
The application is in demo.tsx file.
Note: I cannot set the position of the button to absolute and then position it right: 0px because I need to adjust the height of the <div> (<Paper>) according to its content, which includes the height of the <Button>.
Based on your demo i'd suggest you'd wrap the text in a <div> and give display: flex property for your <Paper>. Then you could use flex-gow: 2 on that div
<Paper style={{ display: 'flex' }}>
<div style={{ flexGrow: '2' }}>
<p>This is some text </p>
<p>This is even more text </p>
</div>
<Link
component="button"
variant="body2"
onClick={() => {
console.info("I'm a button.");
}}
>
<Button
variant='contained'>
Push Me
</Button>
</Link>
</Paper>
Here's the forked Codesandbox
More about flexbox if you're not familiar with it

How can I focus the cursor to the next TextInput in a React Draggable Menu?

I have a draggable context menu with three rows and three TextInputs. Right now I have two bugs:
When "tab" is hit, the menu closes
Even when I stop "tab" from closing (I return in the handleClose), "tab" doesn't focus the cursor to the next TextInput.
I've tried adding tabIndex={0} to the three divs that surround each TextInput, but this didn't help with the tab issue.
Does anyone know what might be wrong here?
Below is the simplified code (variables such as startNumber, endNumber, comments are state variables).
const handleClose = (event?, reason?) => {
if (reason && reason === 'tabKeyDown') {
// Prevent the 'Tab' key from closing the window
return;
}
setShouldOpen(false);
otherStuffHere();
}
...
return (
<Draggable cancel="textarea">
<Menu
open={shouldOpen}
onClose={handleClose}
anchorReference="anchorPosition"
anchorPosition={{ top: y, left: x }}
className={classes.myContextMenu}
>
<div className={classes.row}>
<div className={classes.title}>
<Text>First number</Text>
</div>
<div className={classes.text} tabIndex={0}>
<TextInput
fullWidth
value={startNumber}
disabled={readOnly}
onChange={handleStartNumberChange}
/>
</div>
</div>
<div className={classes.row}>
<div className={classes.title}>
<Text>End number</Text>
</div>
<div className={classes.text} tabIndex={0}>
<TextInput
fullWidth
value={endNumber}
disabled={readOnly}
onChange={handleEndNumberChange}
/>
</div>
</div>
<div className={classes.row}>
<div className={classes.title}>
<Text>Comments</Text>
</div>
<div className={classes.text} tabIndex={0}>
<TextInput
fullWidth
value={comments}
disabled={readOnly}
onChange={handleCommentsChange}
/>
</div>
</div>
</Menu>
</Draggable>
)
I wasn't able to find a solution while still using the Menu component, but I used the Popover component instead.
Using the same CSS and same everything else, I got the tab to work as intended without changing the UI.

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)

Introduce a div between a loop to add flex

This is what I currently have which displays fine.
I end up with 4 rows and 4 columns.
<div>
{(
<Table
data={{
body: Object.keys(conduitData).map((key) => {
const conduitArray = conduitData[key];
return conduitArray.map(category => ({
content:
<div>
<ConduitSelector
data={{title: category.name}}
/>
</div>
}));
}),
}}
/>
)}
</div>
But the CSS does not wrap and the content keeps squeezing into the same row.
I want it to flex down if there is more than 3 items in a row.
I want to be able to wrap each row into another div so that I could introduce flex css properties as follows:
conduitData is a map.
conduitArray is an array.
<div>
{(
<Table
data={{
body: Object.keys(conduitData).map((key) => {
const conduitArray = conduitData[key];
// (parent) I want to add this div to introduce css flex
return <div style={{display: 'flex'}}>
{conduitArray.map(category => ({
content:
// adding flex properties here too
<div style={{flex: '0 0 33.333333%'}}>
<ConduitSelector
data={{title: category.name,}}
/>
</div>,
}))}
</div>
}),
}}
/>
)}
</div>
But when I run this, I end up with the following error.
Error!row.map is not a function
Is there a way I could overcome this error?
I dont see why you cant put the styles in the surrounding your Table.
<div style="display: flex; flex-wrap: wrap;">
<conduit div style="flex-basis: 33.333333%">
</div>
</div>
EDIT
maybe wrap around the return function instead?
return <div>{ conduitArray.map(category => ({
content:
<div>
<ConduitSelector
data={{title: category.name}}
/>
</div>
})) }</div>;

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

Categories