I have a ReorderList on my page and it works just great, but...
Now, I have almost 100 items that I'd like to be able to reorder and they flow off the page, even at 8pt. When dragging, the page does not scroll as I approach the bottom (or the top) so I have to drop my item, scroll down, then drag some more. When I drag and drop in Word, as I approach the bottom of the window, the window scrolls so I can move to where I want to drop.
Alternately, it would be fine with me to have the items show up in multiple columns - their width would allow at least 3 columns. But none of the CSS solutions I have found which allow a <ul> to have multiple columns seem to work as they require multiple <ul>s which I don't think I can do with the ReorderList control.
Any ideas?
Here is an idea: Check if the left mouse button is being hold down, and also check for the position of the pointer on the page. If the coordinates are down at the bottom of the page at a position that you think is down enough for the page to be scrolled, then you could use the window.scrollBy() Method, and stop it when the Mouse button is released. You could also set a bool value when a Reorder item is clicked and while the button is down, and set it to false when it is released, and again the same idea, check for the position of the pointer.
Sample window.scrollBy()
Good luck!
Related
I have been having issues with using the ScrollToAsync function of a ScrollView when running on Android, not tested on iOS yet.
I'm using Xamarin.Forms version 2.5.1.444934 using .Net Standard
Testing on the Android Emulator (8.0, API26) and a Google Pixel (8.1 API27), both have the same issue.
I use NavigationPage and Navigation.PushAsync to move between pages (therefore have navigation bars on every page).
I want to create an auto populate field control, the user types in the first few letters and I look up the results in a database / static list of string and display the results below for the user to click/tap.
I have this working using a composite control (the contents of the frame marked interesting below).
The problem I have is scrolling the view to show the results.
My page has this layout hierarchy:-
ContentPage
StackLayout
ScrollView
StackLayout
Frame (some label and entry fields inside a stack layout)
Frame (some label and entry fields inside a stack layout)
Frame (some label and entry fields inside a stack layout)
Frame (the interesting one that deals with scrolling)
StackLayout
Heading Label
StackLayout
Label x:Name="ScrollToLabel"
Entry x:Name="ScrollToEntry"
Grid x:Name="ScrollToGrid"
Entry x:Name="Hidden" Text="I should stay visible as you type"
/StackLayout
/StackLayout
/Frame
Frame (some label and entry fields inside a stack layout)
Frame (some label and entry fields inside a stack layout)
/StackLayout
/ScrollView
StackLayout
Button Text = Done
/StackLayout
/StackLayout
/ContentPage
When the user clicks/taps in to ScrollToEntry, the keyboard opens and pans the control to above the keyboard (ok so far).
When the user starts typing in ScrollToEntry, the code populates ScrollToGrid with up to 5 results.
At this point I want to make sure that the grid results are visible for the user to tap on.
I have tried 2 different options, ScrollToAsync(ScrollToLabel, Start) and ScrollToAsync(Hidden, MakeVisible).
Neither work as I would like 100% of the time.
ScrollToAsync(ScrollToLabel, Start)
If the ScrollToEntry is at the bottom of the screen, the navigation bar is hidden and the view pans up too far.
The ScrollToLabel is now off the top of the screen.
When the second letter is clicked/tapped, the Navigation bar is restored and the scroll scrolls correctly, ScrollToLabel at the top of the screen.
If the ScrollToEntry is near the top of the screen, the navigation bar is not hidden and it scrolls correctly.
ScrollToAsync(Hidden, MakeVisible)
This is my preferred option because it would only scroll as far as needed to display all the results (not all the way to the top).
This works even worse than the first one.
In most cases, it does not scroll at all, I assume it thinks it already visible but is actually behind the keyboard?
If it does scroll, the label Hidden is still not displayed (I tested with both a HeightRequest="0" version and a visible version, both the same result).
I tried using the below code to change the adjust to resize.
Application.Current.On<Xamarin.Forms.PlatformConfiguration.Android>().UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);
2 issues,
1. Because it resizes, the Done button now is above the keyboard, taking up space.
2. When clicking the hardware back button (not the done or navigation back button) the previous view now has a white space where the keyboard was.
If using the done or navigation back, the screen initially appears with the white space but then refreshes to full screen.
I have created a sample app that highlights the issues (by default using pan, not resize).
It's the most simple version of the layout I'm using...
Am I doing something wrong or is this just how it works? If its how it works, this must be a bug? If I'm doing it wrong, can someone tell me what or suggest a different way of doing it?
I´m working on a tool only for tablets (Android, iPad) based on Cordova and jQuery Mobile (1.4.5). In the first phase of this tool, many of the users who have to work with it were asking for some more comfort regarding the behavior of the form popups.
The problem was:
As a user came to one section, I provided him with a collapsible-set, consisting of sub-sections. In this sub-sections, the user gets data-grids with Add, Edit and Delete buttons next to each data-set.
So, as the user tapped on Edit button (or Add), I opened up a popup with the necessary form and form-elements to edit this data-set or add new data to the database. But in many of the upcoming popups the amount of the form-elements is as high, so the popup appears higher or even much higher then the collapsible-set (including the data grid) behind the modal popup is.
The popup of jQuery Mobile is centered by default and even if I positionTo origin and pass x and y coordinates to it, the library/widget wants to position the popup to this coordinates by the center point, rather then the upper left corner.
Users always had to scroll around to come to the start point of the form and after submitting the form, they had to scroll up again to where they tapped on the button to open the popup.
Now I tried to do everything I could imagine, to force the popups top position to 20 pixels below the top position of the visible area on the tablet, regardless of where I am, when tapping on any Edit or Add button.
I was playing around with offset() (window.pageYOffset), etc. and set the position of the popup by:
popup2open.popup('open').css({'top':popupTopValue+'px','left':popupLeftValue+'px'});
In fact, the popup is positioned to exactly where I want it, if the top offset is between 0 and 100. On all values above 100, the top position of the popup increases by absolutely incomprehensible value. The only consistent fact is, that the more I scroll down before I tap on a button, the more this value increases - so it does not in/decrease by random.
(BTW: I found out that I have to set "popupLeftValue" to 0, so the popup is positioned in the center horizontally.)
I just can´t see any regularity on increasing value...
Can anybody give me a hint or a punch to the right direction?
Thank you in advance!
PS: I experimented also with .css({'position':'[fixed|absolute]','top':popupTopValue+'px','left':popupLeftValue+'px'}); and that worked well. Only to find out one show-stopper: If I set the focus to an input-field inside the form and than closing the virtual keyboard on the tablet, a reposition-event is triggered and by this, the popup is re-positioned massively below the former position (in fact around 300 pixels below and just marginalized to the right border of visual area). The Cancel and Save buttons are even out of scroll-able area.
(some more funny fact, btw.: if I set the focus to the same input-field, than not closing the virtual-keyboard but directly setting the focus to a select element and after this pressing the back button of the tablet to escape the select menu, no reposition-event is triggered...!?)
On 18th of July 2013 Gabriel Schulhof added this line to a feature-request from one user, who asked exactly for what I´m struggling around with:
"We are indeed considering adding such a feature..."
I have a list of lets say 20 buttons (this number can change dynamically) in a listView which I want to display using a grid on a swipeView or gridView. Only 6 buttons should be visible at once. In addition, it should be possible to exchange the position of buttons via drag and drop (see http://doc.qt.io/qt-5/qtquick-draganddrop-example.html). In case gridView is the way to go, is it possible to have it behave like swipeView, so that the buttons can not be moved to an arbitrary position but lock onto their column?
You might want to give snapMode a try.
You have the choice of:
GridView.NoSnap (default) - the view stops anywhere within the visible area.
GridView.SnapToRow - the view settles with a row (or column for GridView.FlowTopToBottom flow) aligned with the start of the view.
GridView.SnapOneRow - the view will settle no more than one row (or column for GridView.FlowTopToBottom flow) away from the first visible row at the time the mouse button is released. This mode is particularly useful for moving one page at a time.
You need to make sure, that the size of the GridView really fits your desired amount of delegates, for it will only make sure, that the first element is aligned, not that there is no element paritally protruding the view.
Updated to add:
I have fixed this, after a fashion. First, I tried calling MySubmenu -> clear() and rebuilding the sub-menu whenever the parent menu was clicked. Surprisingly, this didn't work. So I brought in the big guns: delete MySubmenu followed by MySubmenu = new QMenu (MyMainWindow) and rebuilding the sub-menu. It works now, without much noticeable delay. So I'm happy, I suppose.
Original question:
I have a sub-menu with about 1000 items in it (it's a list of C functions in a debugger). By default, Qt displays the sub-menu in columns, but this sub-menu is too big to fit on the screen, and I have no way to access the items that don't fit.
So I made the sub-menu scrollable, using a style sheet:
MySubmenu -> setStyleSheet ("* { menu-scrollable: 1 }") ;
It looks like this:
Note the scroll buttons at the top and bottom. But now if I select an item (PopRecordLength in this example), then the next time I open the sub-menu, all items above PD_DecryptCommand have disappeared:
The scroll button at the top has disappeared (the little line you can see is an underscore from what used to be the previous item.) And if I scroll down to the bottom, there is a large empty space. The total size of the sub-menu hasn't changed, but the items above PD_DecryptCommand have disappeared off the top, and I can't access them with mouse or keyboard.
However...I have just discovered, in the process of preparing this post, that if I click on this large empty space, the sub-menu disappears, but the next time I open it, it has been restored to its original state. So there is a work-around. But it's not very friendly.
Is this a bug in Qt? Or am I not setting the style sheet correctly?
Probably, since you have so many items that the menu takes the whole screen height, when you select an item its height increases a bit and the scroll button on top gets out of view.
I would try to connect the triggered signal of the menu with the update slot in order to get the menu repainted every time an action has been triggered
connect(MySubmenu , SIGNAL(triggered(QAction*), MySubmenu , SLOT(update()));
You could also try changing the max-height of your menu (max-height stylesheet property).
I'm sorry, not really an answer to your question, but do you really think it's a good idea to put 1000 items into a menu? The usability of this is just terrible. You should find a better way to present so many actions to the user, such as alphabetical submenus ("p" -> "PopRecordLength", "PopShort" ... ). This would also solve your problem with the menu.
I'm trying to make a Flex (Advanced)DataGrid component with some mechanism where the user can toggle the visibility of the columns. I've crudely implemented this by reading in the columns into the right-click menu, and when a column name is selected here, the visibility is toggled. It works, but it's not the most elegant solution.
Specifically, I'm trying to emulate the "datagrid" that Mozilla Thunderbird uses to display emails. Here is an image:
In the upper right, there is an icon over the scroll bar. If there is no scrollbar, the icon remains in the same place. When clicking the icon, it opens up a menu that shows all the possible columns, with the visible ones having a check mark next to them, like this:
Also, the scroll bar always appears under this button, never "pushing" it over into it's own column.
I'd like to re-create this in Flex. I believe the menu part and creating a column with a button headerRenderer is easy enough. But I can't figure out how (if at all possible) to do this with the scrollbar, because the scrollbar always seems to be "its own column". Any ideas or help would be appreciated. Thank you.
Ian
One dirty solution comes to mind. Create a component based on Canvas, then add an AdvancedDataGrid by overriding createChildren. Override updateDisplayList as well and add a button like the one in Thunderbird to the upper right of the Canvas. This will cause the button to appear over the DataGrid. Problemo solved?