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
Related
I'm having a table (two directional scroll) with a sticky header showing the title of columns. If it wouldn't support two directional scroll, I could just place the header outside of the scroll view, but it's not the case.
I want to implement grouping of rows (basically SectionList with stickySectionHeadersEnabled). There an upcoming section header replaces the previous section header, which is the expected behaviour for my case. However, I want to have two sticky headers stay in place (the table header, and the current section header). I couldn't find a way to set the top value for the sticky headers as in html:
.container {
width: 200px;
height: 200px;
position: relative;
overflow: scroll;
}
.tableHeader, .sectionHeader {
position: sticky;
}
.tableHeader {
top: 0;
}
.sectionHeader {
top: 20px;
}
.section {
height: 500px;
width: 500px;
}
.section:last-of-type {
background: wheat;
}
<div class='container'>
<div class='tableHeader'>Table header</div>
<div class='section'>
<div class='sectionHeader'>Section header 1</div>
</div>
<div class='section'>
<div class='sectionHeader'>Section header 2</div>
</div>
</div
Any way to earn the above in react native?
I was thinking about the implementation of nesting two ScrollViews, where the outer could be horizontal, and it could have the first child as the table header, and the second is the SectionList. It could work, but not being able to scroll diagonally is very annoying for me, had a hard time to implement it on ios, and wasn't even able to do it on android, so it would be a last case.
You can use a FlatList with stickyHeaderIndices where the indices are the indices of the headers in your array.
const renderItem = ({ item }) => <Item title={item.title} />;
<FlatList
data={DATA}
stickyHeaderIndices={[0, 6]}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>
For the diagonal scroll, it should work on iOS with directionalLockEnabled set to false according to the docs but it doesn't.
For both ScrollViews to work on android the nestedScrollEnabled property should be set to true.
Here's a snack with an implementation, it doesn't seem to work on the web but it works on the iOS and android emulators:
https://snack.expo.dev/yyz6ro3Hi
I like to make a div expand according to its content height but the hole Component inside that div is hidden if I use like height: '100%'. It's a bit complex and wish for some extra eyes!
I made a CodeSandbox
Looks like this in Chrome:
I can see during debug that the "hidden" Component is rendering ok so it's strange that it's "hidden"
If I set the same Style to height: 1000 the <ul> have Children:
But I want it to expand according to its content height so height: 1000 will not work.
In this CodeSandbox I set the height: 1000, to demonstrate what happens. The Component that refuse to expand height is a Masonry image gallery Component
style={{
width,
height: 1000,
position: 'relative',
margin: '0 auto',
}}
When you open the Sandbox you see in the left editor windows this TimeLineViewer.js and the Style code problem. The TimeLineViewer.js loads the Masonry image gallery Component Masonry.js
What I have tried is to set parent to also 100% height but with no luck.. I'm a little bit new to JavaScript and HTML so advice would be good
To debug this, start by taking off or commenting out the LeComponent and then testing your div actual height when you are implementing the 100% height.
<div
style={{
width,
height: !fullscreen && "100%",
position: fullscreen ? 'initial' : 'relative',
margin: '0 auto',
}}
>
{/* <LeComponent
infinite
items={items}
itemRenderer={ItemRenderer}
gutter={gutter}
outerGutter={outerGutter}
extraPx={0}
debug={debug}
rows={{
0: 1,
320: 2,
480: 3,
640: 4,
}}
cols={{
0: 1,
360: 2,
640: 2,
960: 3,
1280: 4,
1400: 5,
1720: 6,
2040: 7,
2360: 8,
}}
onEnd={() => {
// TODO possible when many items lazy load them
// this.addItems();
}}
/> */}
</div>
You will notice, that it still takes up no height at all and the component you created did not have any bearing to that. This is because it is a CSS issue. The height percentage cannot be determined because there is no parent or ancestor with a height definition. You are getting the percentage of void.
After that, we can take a glance at your Masonry component. Just by looking at the method identifiers (such as _getDimensions, _setContainerHeight) and further reviewing the code base, we can learn that this component is actually dependent on certain element dimensions (most likely the parent div dimension as well) - and from what we learned from the CSS issue awhile ago, the parent div actually has a height of 0.
At this point, I took out the style props on your Masonry Component so that it would not be dependent on the parent dimensions and that fixed the issue
<div ref={this.container}>
<ul ref={this.list}>
{mounted && items.map((item, index) => this.renderItem({ index, item, maxIndex }))}
</ul>
</div>
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.
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;
}
My configuration goes as follows:
// Calling it
<div style={{ width: 1000, height: 800 }}>
<MyComponent />
</div>
// MyComponent.js
<InfiniteLoader { ...itsProps }>
{({ onRowsRendered }) => (
<AutoSizer>
{({ width, height }) => (
<Table
width={ width }
width={ height }
...
The problem is that this is what is being rendered:
<div style="overflow: visible; height: 0px; width: 0px;">
<div class="ReactVirtualized__Table" role="grid">
...
So nothing is seen in the screen.
Maybe I misunderstood Autosizer usage, so I set it up to adjust itself to the parent's width/height.
What am I missing?
The height: 0 style in the snippet of HTML you shared isn't actually a problem, because of the overflow: visible style. This is the way AutoSizer is meant to work.
I suggest you read the "Using AutoSizer" docs page. I suspect your problem is similar to one of the common issues mentioned there:
AutoSizer expands to fill its parent but it will not stretch the parent. This is done to prevent problems with flexbox layouts. If AutoSizer is reporting a height (or width) of 0- then it's likely that the parent element (or one of its parents) has a height of 0. One easy way to test this is to add a style property (eg background-color: red;) to the parent to ensure that it is the correct size. (eg You may need to add height: 100% or flex: 1 to the parent.)