I am currently trying to make a page with a map on one half and a list on the other. I want to make the list height fill the entire page but I can't seem to find the right way to do so. I am using the react-virtualized list codebase as a starting point and in that code you specify the height dimension by passing in listHeight. But I want the listHeight to be dynamic based on your screen size.
I've tried doing flex: 1, height: 100%, but it doesn't seem to affect the code. I need to somehow make the height value equal to the dimension of the screen size.
<div style={{flex: 1}}>
<AutoSizer>
{({width}) => (
<List
ref="List"
className={styles.List}
height={listHeight}
overscanRowCount={overscanRowCount}
noRowsRenderer={this._noRowsRenderer}
rowCount={rowCount}
rowHeight={
useDynamicRowHeight ? this._getRowHeight : listRowHeight
}
rowRenderer={this._rowRenderer}
scrollToIndex={scrollToIndex}
width={width}
/>
)}
</AutoSizer>
</div>
do style = {{height: "100vh"}}
this will take the entire vertical height of the window
Related
I'm having a problem with Next/image, I can't get my head around how the sizing works.
I'm trying to get the images without whitespace around them, but I want it to be responsive without hardcoded image sizes. I used a purple background color to make it clear what I'm trying to get rid of. For some reason the images always show up as a square.
I set the images to 100% width and height so that it takes the size of the parent Box, but it seems like the size of the Box doesn't make a difference. Can anyone explain to me how this works?
I used objectFit=contain so that it retains the correct aspect ratio. And I used layout=responsive for the variable image size.
{images.map((image, index) => (
<Box key={index}>
<Box sx={{ mb: 1, bgcolor: "purple" }}>
{image.url.startsWith("http") && (
<Image
src={image.url}
width="100%"
height="100%"
layout="responsive"
objectFit="contain"
alt="myimage"
/>
)}
</Box>
{textfield and buttons}
</Box>
))}
I am trying to integrate react-window's FixedSizeList and FixedSizeGrid components to increase the initial rendering speed of my page. Is there some way for me to let the user scroll down the react-window component using the viewport's scrolling area? I was also
wondering if there is some way to remove the scrollbar from the react-window component and only use the viewport's scrolling as I described above.
I tried integrating the documentation version of FixedSizeList into my page and as you can see, since the total height of all my rows is greater than the height I specified in the component so the vertical scrollbar beside the component appears, which I want to remove. I also cannot figure out how to let scrolling downwards on the viewport make the react-window component scroll down the rest of its rows.
From looking online, I think I might need to modify the CSS style of the FixedSizeList to have overflow:hidden to remove the scrollbar but how can I ensure that I keep the scrolling functionality and that the user can scroll down the component from anywhere in the viewport?
Current version with no react-window
FixedSizeList version
const Row = ({ index, style }) => (
<div style={style}>Row {index}</div>
);
<FixedSizeList
height={500}
itemCount={38}
itemSize={35}
width={"100%"}
>
{Row}
</FixedSizeList>
One solution is to use a package linked from the react-window github page called react-virtualized-auto-sizer. It is also made by bvaughn and is a good solution to the problem.
This solves the issue by allowing you to set the height of your FixedSizedList to the height of its content, so it does not get a scrollbar. Here's how that would look:
<AutoSizer>
{({ height, width }) => (
<FixedSizeList
className="List"
height={height}
itemCount={1000}
itemSize={35}
width={width}
>
{Row}
</FixedSizeList>
)}
</AutoSizer>
Here's a full example on codesandbox:
I am working on an app, where I have a screen, whose content is larger than the size of my screen (the height of the content depends on data from API). So I wrapped the content in a View and put this View inside ScrollView to make the screen scrollable. However it will not scroll, unless I specify the height of the content in contentContainerStyle.
To understand how it works, I put a single Text component with a long text and large font size (so that it exceeds my screen size) inside a ScrollView, and it is just normal scrollable even without setting contentContainerStyle. Could somebody explain, how does it work, and why my content is not scrollable in the first case?
Current working code:
<View style={{flex: 1}}>
<ScrollView contentContainerStyle={{height: contentHeight}}>
{renderContent()}
{/* <Text style={{fontSize: 300}}>AABABBABABABABABBAB</Text> */}
</ScrollView>
</View>
I am using a flexbox layout and am trying to get the text in a specific div to be resized to fit that div.
So for example, if I have code as follows:
<div style={{display: "flex"}}>
<div style={{flex: 1}}>
A really, really, really, really long phrase here that will fit this div, and may wrap onto multiple lines if necessary. In this case it should fill half of the available space as the other div will cover the other half of the space.
</div>
<div style={{flex: 1}}>
Some other text
</div>
</div>
In reality, the text will be pulled from a database, so will be dynamic in length.
How can I get the text in the first div to automatically adjust to fit the entire div?
Clarification: the div should stay a fixed size and only the text should be downsized to fit the div rather than overflowing the div.
Update
I have also posted a more specific question about a specific module called react-textfit not working the way I would expect it to work.
Here is some code that should do what you are asking.
let size_div = document.querySelector("#font_size");
let div = document.querySelector("#fixed");
while (div.scrollHeight > div.clientHeight) {
let style = window.getComputedStyle(div, null).getPropertyValue('font-size');
let fontSize = parseFloat(style);
if (fontSize <= 1) {
break;
}
div.style.fontSize = "" + (fontSize - 1) + "px";
size_div.innerHTML = " " + div.style.fontSize;
}
You can try it out here:
https://codepen.io/lowtex/pen/xNawEO
You could simply hard code the size to 50 %
<div style="display:flex">
<div style="width:50%;background:lightgrey;">
A really, really, really, really long phrase here that will fit this div, and may wrap onto multiple lines if necessary. In this case it should fill half of the available space as the other div will cover the other half of the space.
</div>
<div style="width:50%;background:lightblue;">
Some other text
</div>
</div>
I am not a reactJs user but I have worked with CSS flex
you can set height of the container to auto so that it changes as we get the content. Also, you should set min-height and max-height properties in css so that if content is less that given length, it appears on min-height and if the content is way to big, it does not exceed the given container height.
In order to disallow content from getting out of the box, you can use overflow:hidden. this will keep the content from getting out of the box.
Hope this gives some help with how you want to proceed.
<div style={{ display: "flex" }}>
<div
style={{
flex: 1,
backgroundColor: "lightGrey",
wordBreak: "break-word"
}}
>
A really, really, really, really long phrase here that will fit this
div, and may wrap onto multiple lines if necessary. In this case it
should fill half of the available space as the other div will cover
the other half of the space.
</div>
<div style={{ flex: 1, backgroundColor: "lightBlue" }}>
Some other text
</div>
</div>
I have a horizontal ScrollView inside another vertical Animated.ScrollView.
I am use the horizontal one as tab-view(snap item changing) and its working perfectly but there is a problem now.... I render different views inside each item of scroll view which has specified heights, ScrollView height will get the longest one and all of tab views get the same height despite they don't need such a long height:
<Animated.ScrollView>
<ScrollView //<<<<<<I'm talk about this one
ref={(scr) => this._scrollView = scr}
decelerationRate={0}
snapToInterval={Dimensions.get('window').width}
snapToAlignment={"center"}
pagingEnabled
horizontal <<<<<<<<<<
onContentSizeChange={() => this._scrollView.scrollTo({ x: this.state.index * Dimensions.get('window').width, y: 0, animated: true })}
onMomentumScrollEnd={(event) => this.focuser(event.nativeEvent.contentOffset.x)}
>
<View>...some thing short<View>
<View>..some thing Long<View> //<<<<this one is long
<View>...Some thing short<View>
</ScrollView>
As you see above, the item which I use in second tab has a long height and it stretch the whole height of ScrollView! its no problem now ... its appropriate stretching which I need for this item(this View) but, I don't need such a height for other tab. But they get this height and will able user to Scrolling down. its so ugly.
I want to set the height of ScrollView as the height of Current tab content(Current index content ). whats your solution for that ?
As far as I know, this is a limitation of ScrollView. As a workaround, you might want to try replacing your Views with vertical ScrollViews of fixed size on the page. This way they will all have their individual scrollable height. However, since you're already inside a vertical ScrollView, responding to scrolling events can get a bit tricky.
Update:
Another approach is to adjust the height of individual items based on their number, so that every page is the same length. You can see it in this example.