How to use a select dropdown in a virtualized list? - reactjs

Im currently developing a react app which has a virtualized list (https://github.com/bvaughn/react-virtualized) in it. The items in the list may contain a select dropdown.
The problem now:
The virtualized list is hiding overflow. So the last items dropdown is not displayed and you cannot scroll down to view the content of the dropdown:
================= Here is where the image ends ================
I have no idea, how I could fix this issue, without changing the virtualized list code. Anybody out there?

react-virtualized can't use overflow: visible without breaking scroll behavior (which is pretty key to how react-virtualized works). So things like drop-downs will get clipped as you've observed.
What I typically recommend for people wanting to put things like drop-down menus inside of react-virtualized rows is to use a portal. This allows the menu content to expand outside of a single row (or even the entire List) without being clipped.
I've used tajo/react-portal in the past for this.

Related

How to virtualize only the bottom of list items?

I can't delete components that I have already shown because of ads placed in items of the list.
(Here is description why I can't delete ads)
So I want to virtualize only items below and when I'm scrolling down do not delete items that I have already shown already.
Current behavior:
Expected behavior:
Without logs from componentWillUnmount
(Bottom components still virtualized and won't mounting)
Here's a CodeSandbox example!
Or maybe somebody nows another tool that can help me?

how can i achieve autoscrolling list (like autoscrolling text in ads) in codenameone

How can I achieve a horizontally list (contains multiple containers) automatically scroll up and down like something like this link?
I already made the list the problem is how to achieve the auto scroll horizontally.
Every label in Codename One supports this, it's called "tickering" and you can just call startTicker() to start the tickering for a label. You might also need setTickerEnabled(true).

How do I conditionally show or hide fields on a Layout in Filemaker 14 Advanced?

I'm new to creating Layouts in Filemaker (I'm not using the latest version; am using Filemaker 14 Advanced instead), and I need to know: How can I conditionally/programmatically hide and show drop-down menus on the Layout, based on a selection in another drop-down menu? For instance: Let's say I have a drop-down menu called "Race," and it has three selections: "Human, Vampire, Werewolf." If I choose "Human," I want another drop-down menu called "Class" to appear; if I choose "Vampire," I want a different drop-down menu, called "Clans," to appear instead; if I choose Werewolf, then I want a drop-down menu called "Tribes" to appear. How can I engineer this using Filemaker's built-in language, or is there some other way to do it? Step-by-step instructions and/or code, please; like I said, I'm really, really new to this and to databases in general. Thanks!
You can conditionally hide layout objects by putting a calculation in the Hide Object When blank in the Behavior section of the Data tab on the Inspector palette.
That said, there are relational ways to have your dropdowns change their contents based selections in other fields. That is a lot more flexible, but (of course) more complex. What you want to set up is called a Dynamic Value list and is based on the values in a related table, filtered by the choices you made in the previous fields.
The calculation basically boiled down to just a single "equals" statement, or a bunch of them, simply singling out the value that would need to be selected in order to hide the layout objects I wanted hidden. Thanks for the help, guys! :-)
In my case, I wanted the new dropdown menus to stay shown even if many options were chosen in the first menu. I used the Pattern Count function (https://fmhelp.filemaker.com/help/10/fmp/en/html/func_ref3.33.73.html) to specify that if the answer to the last dropdown menu contained this optioned checked, the new menu would be shown by writing the following : Not PatternCount(table::variable;"text in one of the options")

Collection-repeat and checked input type checkbox

I have a collection of contacts and I generate an ion-item for each contact using collection-repeat. Each ion-item has a span, a paragraph and a checkbox element within it. I chose to use collection-repeat over ng-repeat because it increases performance.
I understand that collection-repeat only renders the items that can fit the screen at once and renders more as we scroll.
The problem I have is that when I click a checkbox within an item, for example, the first one, and scroll down to see more lists, another checkbox within an item lower in the list would also be checked automatically. This is not the intended behaviour as I want users to be able to check a checkbox for every item.
These pictures will make the explanation clearer:
Why is my list showing this behaviour? Does it have to do with how collection-repeat works or is it a problem with my code? This is really killing me and I need to find answers. Thanks!
Ionic team is working on it right now https://github.com/driftyco/ionic/issues/1806

Conditional Formatting based on layout view

Another question for you Filemaker Pro experts. The database I am developing starts with a Main layout with a number of buttons (e.g. insert new item, show all items, etc.). Each button is associated to a script, which takes the user to the relevant layout. In each of these layouts I show the buttons in a row, and highlight the current layout with inverse colour.
My problem is that some of the buttons lead to the same layout, viewed in different modes, and I don't know how to conditionally highlight the right button.
For instance, Insert new item and Show all items take to the same layout, however in the first case the script views the layout as a form and inserts a new record, while in the second I view as a list and show all records. The layout is the same, though, so I'd need to enact a conditional formatting based on something. How do I do that, and what should I check against?
Thanks in advance for any help.
Regards.
Presumably you are currently using the formula: Get (LayoutName) to decide on your conditional formula, why not try additionally using formulas: Get(WindowMode) and Get(LayoutViewState)?
You could conditionally format the button if (which sends user to MyLayout in browse mode):
Get(WindowMode)=0 and Get(LayoutName)="MyLayout"
Or (which sends user to MyLayout in form view):
Get(LayoutViewState)=0 and Get(LayoutName)="MyLayout"
.
Other functions which may help could be Get(FoundCount) and Get(TotalRecordCount). You can see the entire list of Get functions here.

Resources