I'm trying to create a chat layout, and i'm having trouble getting the multline in the input box to expand in the same view rather than expanding downwards when typing in the input box and creating a scrollbar. I have added my sample code in the codesandbox link.
https://codesandbox.io/s/solitary-lake-bd85o
Just change the styles of your container <div> element to flex-box and set the max-height.
<div
style={{
maxHeight: "100vh",
margin: 0,
padding: 0,
display: "flex",
flexDirection: "column"
}}
>
// Your chat layout
</div>
With some additional tweaking you will easily get desired outcome.
Related
hope you're all good.
I'm having an issue finding out how to make my MUI Grid take up the entire width of the Box component it is nested within.
Here is how it looks:
I want the empty space at the end right to be taken up by the entire grid but I can't seem to find a concise answer on how to fix this.
Here is my code in VS Code:
Here is the code in text for the Grid:
<Grid item key={days}>
<Box
key={days}
sx={{
width: 150,
height: 150,
backgroundColor: 'primary.dark',
'&:hover': {
backgroundColor: 'primary.main',
opacity: [0.9, 0.8, 0.7],
},
}}
/>
</Grid>
);
}
return (
<Grid container spacing={1}>
{/* And here I render the box array */}
{box}
</Grid>
);
And here is the parent elements:
Here is the code in real text for the parent elements:
// Parent Element
<Container>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
width: 1,
}}
>
{/* The Title of The Page */}
<Typography align="center" variant="h4" mt={2} mb={2} sx={{ fontWeight: 'bold' }}>
{t('Happy Chocolate Days!')}
</Typography>
{/* My Calendar Grid Component Inside The Box Component */}
<Calendar />
</Box>
</Container>
Thanks for any help in advance
You are setting the boxes to a fixed width & height of 150, thus even though their wrapper has more space left, there is not enough space for another box so it breaks into a new line, thus leaving you with the empty space on the right.
You either set the boxes all of them in the middle of the Container,
OR pick a width for the Container that can have 7 boxes of the same width with some space between them, like 770px width for container, and 10px spaces between them. but in that case you wont need Grid, just pure css.
In the latest version (7.5.x) of React-Table, is there a way to add the column resizing to a Material-UI table without breaking the 'Sticky Header' property of the Material-UI Table?
On one hand, adding 'useFlexLayout' or 'useBlockLayout' breaks the 'Sticky Header', on the other, column resizing isn't working without 'useFlexLayout' or 'useBlockLayout'...
In the codesandbox example, both useBlockLayout & useResizeColumns are set and the stickyHeader is ignored. Once useBlockLayout & useResizeColumns are commented out, the stickyHeader is working again.
Here is my solution on codesandbox. I hope this is what you need.
I`ve added some inline styles to the elements:
<MaUTable
...
style={{ display: "flex", flexDirection: "column" }}
>
<TableHead
style={{
position: "sticky",
top: 0,
alignSelf: "flex-start",
zIndex: 1
}}
>
...
<TableBody style={{ position: "relative", zIndex: 0 }}>
I have a div that allows the user to enter text into. Inside of that I also have divs that cannot be edited. These non editable divs will be dynamically created when the page is loaded. The end goal is to have these non editable divs contain text and then allow the user to write more text under or above it (sort of like the game madlib but with phrases not just words)
<div
contenteditable="true"
style={{
margin: "auto",
width: "90%",
height: "90%",
overflow: "scroll",
}}
>
This text should be editable
<div
contenteditable="false"
style={{
margin: 2,
borderRadius: 10,
padding: 10,
backgroundColor: "Red",
}}
>
{" "}
THIS CODE IS NOT EDITABLE
</div>
This text should be editable
<div
contenteditable="false"
style={{
margin: 2,
borderRadius: 10,
padding: 10,
backgroundColor: "Red",
}}
>
{" "}
THIS CODE IS NOT EDITABLE
</div>
</div>
This is what I have right now to test the non editable and editable text. The issue though is the user can backspace or use the delete key and delete the divs that shouldn't be editable. This isn't what I want to happen.
I'm using Reactjs and my editor is Visual Studio Code.
I can't get the content of my nuka-carousel slides to be the same height. Setting heightMode="max" on the carousel sets the slide heights equal, but trying to expand the slide content isn't working right.
I've tried setting height on the slides to 100%, inherit, 100vh but no matter what, the slides expand to maybe 2-20x what they should be (depending on the div with the most content).
I've also tried using flexbox with flex:1 and I've tried with css-grid. Nothing seems to help
const Item = ({ children }) => (
<div
style={{
boxShadow: "rgb(153, 153, 153) 2px 2px 4px 2px"
// height: "100%"
// height: "100vh"
/// height: 'inherit'
}}
>
{children}
</div>
);
<Carousel
wrapAround
heightMode="max"
slidesToShow={1.25}
cellAlign="center">
{/* Item components with varying content */}
</Carousel>
Here's a codesandbox, If anyone has any suggestions I'd appreciate it.
https://codesandbox.io/s/brave-khorana-bowrz?file=/src/index.js
I am using reactjs-popup and it displays its content. But I am unable to set its width. It is not taking effect for some reason. What am I doing wrong?
I have tried width:'50%' and width:'50px'. But it always displays the popup in a very wide huge rectangle. If I resize the whole browser only then the popup reduces in size.
<Popup style={{width:'50%'}}
open={true}
closeOnDocumentClick
keepTooltipInside=".tooltipBoundary"
>
<div className="modal" style={{display:'flex', background: 'radial-gradient(#cde6f9, #6191bf)'}}>
<a className="close">
×
</a>
<div style={{alignitems: 'center', justifycontent: 'center'}}>
<h4>Enter Project Name : </h4>
<input style={{alignitems: 'center', justifycontent: 'center'}} type="text" name="fname"></input><br/><br/>
<button style={{alignitems: 'center', justifycontent: 'center'}} >Create</button>
</div>
</div>
</Popup>
Assuming that the Popup component comes from an external package, try to read the documentation for more styling options.
You can probably also view the component in node_modules/[package_name] folder. Try giving it a className there or style it using the style property.
Finally, you can try wrapping the popup with another element and capture the style using css.
Something like that:
.popup-wrapper {
width: 100%;
}
.popup-wrapper > * {
width: 50%;
}
You can certainly globally update the content styles as other posts here imply. But if you want to set the style for a specific popup...
If you inspect the <Popup HTML, you will see there are two divs. One has a class defined with popup-content and a second named popup-overlay. You can overwrite the styles here using the contentStyle and overlayStyle attributes of any given <Popup.
For example if you want to change the width of the content:
<Popup
...set other attributes here as needed
contentStyle={{ width: '100%' }}
>
Show this content
</Popup>
Wrap the popup in div and give it a class like modalWrapper.
You can target the main popup container div by using this css.
.modalWrapper > div > div {
width: 484px !important;
padding: 24px !important;
border-radius: 10px;
}