In my react native FlatList, I determine when the scrollTo has almost reached the end. When it reaches the end, my Query will "shift", to include the next page results (and keeping half of the current one).
For example, let's say my initial query returns 20 items, from:
[100 ... 80]
As user reaches the end (80), my query will shift to [90...70], and I run:
this.setState({ flatListData: newArray });
The result is good -- the entire FlatList changes. However, the problem is that my table is now all the way at the bottom, and 70 is shown (immediately jumping to the end of the data array).
My desired behavior is that -- as the user reaches 80 and new results of [90...70] come in, I want the position to be locked at 80 (no change in scrollView), so that the user can scroll from 79 to 70 himself.
Related
I have a list which has 2 different items. However, if the user gets close to the end of the list then the 2 same items are added again and again to create an infinite scrolling feel.
I've created a test to basically verify that the item exists like so:
composeTestRule
.onAllNodesWithContentDescription("Home")
.assertCountEquals(2)
As you can see this just finds nodes with the content description of "Home" and checks if their are 2.
Currently, this works as the screen size is small but let's say the screen size is doubled then this will fail as the assertCountEquals(2) would need to check for 4.
I was wondering to make this code better, is there a way to basically check that atleast 1 exists?
onAllNodes methods return an array, grab the first element and check whether it exists or is displayed.
composeTestRule
.onAllNodesWithContentDescription("Home")
.onFirst().assertExists()
Hello guys I put 4 images in a json and tried to loop through them with map function but i want it to get back to the line every time it renders 2 how can I make that ?
like on the first line it renders the first two with the flex direction = row then it gets back to the line and renders the other 2
You can use a FlatList and define numColumns
Image Link I receive 100-200 results from the axios api. I want to show only first 10 from it. Is there any way I can do that. I cannot do that from api since I also want to show the count of total items returning from axios.
Edit: I have a show all button which shows the list of all the item in new pop up. Due to this I want the exact count of total items that are returning but only want to display top 10 results from it.
One option is to use menu-props and adjust the height
<v-autocomplete :menu-props='{ nudgeTop: 110,maxHeight: 125}'></v-autocomplete>
We are using Vuetify's v-data-iterator to control pagination on a grid layout. We are setting the iterator's rows-per-page-items to [8, 16, 24, 36]. But this doesn't exactly determine the number of rows per page, but items per page. That is, because it's a grid layout, there may be several items per row. So if we set it to 8, we get this:
This depends on screen size, of course, but that's exactly the issue. The number of ACTUAL rows depends on how many items can fit in a row. What's worse is that if the user selects 8 for the "rows" per page, and only 3 items can fit in a row, there will be only 2 items in the last row with a gap at the third column. This is deceptive because it looks like there are no more items after the 8th item (this has actually deceived some people into thinking the item they are looking for doesn't actually exist). They need to look at the footer to see that there are more items on the next page.
What we are wondering is if there is a way to configure the v-data-iterator to limit the number of actual rows instead of the number of items. This would mean, for example if you had 2 rows per page, there could be 8 items on the page (on wide screens) or 6 items on the page (on smaller screens), but at least there would be no gap after the last item on the page (or if there is a gap, it would only be because it is ACTUALLY the last item).
Thanks very much.
It appears Vuetify did away with rows-per-page-items in 2.x, perhaps for this reason.
Controlling rows per page with responsive item rows is a little math challenge🤓 with the number of items, desired rows per page and Vuetify's 5 responsive breakpoints. Using computed values, determine the number of pages (for pagination), items per row (based on how many cols you want on each breakpoint), and finally use this to calculate the items per page (ipp)...
computed: {
numberOfPages () {
return Math.ceil(this.beers.length / this.ipp)
},
itemsPerRow () {
switch (this.$vuetify.breakpoint.name) {
case 'xs': return 1
case 'sm': return 2
case 'md': return 3
case 'lg': return 4
case 'xl': return 6
}
},
ipp () {
return Math.ceil(this.rowsPerPage * this.itemsPerRow)
}
},
And since Vuetify is based on a 12 column grid, determining the cols prop is simply...
<v-row>
<v-col
v-for="(item,idx) in props.items"
:key="item.name"
:cols="(12/itemsPerRow)">
....
</v-col>
</v-row>
Demo: https://codeply.com/p/bFrSEsnq4L
I have the following snippet of code for auto expanding the textarea in sencha touch. I need to cap it out at a set number of rows.
Any ideas?
http://www.senchafiddle.com/#Q9gjN
Wouldn't this be great if it were a nice, easy to use property.
At first I thought it would be the maxRows property but this is just the number of rows to display before the vertical scrollbar appears.
It may be that the only way would be a complicated solution such as this: http://www.codeproject.com/Articles/56392/How-to-Limit-the-Number-of-Lines-and-Characters-in
or
Limiting number of lines in textarea
EDIT: I needed to cap the number of rows in an address to 5 lines.
One approach could be to listen to the keyup event on the textareafield, check for the 'Enter' key and then revert back to previous input.
The approach I have taken is just to add validation to the model, which works great.
{ type: 'format', field: 'Address', message: 'Address cannot be more than 5 lines.', matcher: /^([^\r\n]{0,50}(\r?\n|$)){5}$/ }
The regex restricts saving a record to the store that has more than 5 lines, of more than 50 chars.