I made a custom dropdown. In the last line of the table, scroll is created when dropdown is open. I need to scroll to see dropdown elements. I do not want this.
I want you to open up the body of the dropdown or enlarge the body. How can I do it?
Document is already enlarged by enlarged content/element, scroll shows that. You need only scroll to view entire enlarged element, f.e.:
elmnt.scrollIntoView(false);
Real problem (using react) is that should be done after change state and rendering enlarged element.
I probably would use setTimeout called from setState callback. It's quite common way to be sure it's called after updating state/view. You'll find examples on SO.
Related
I'm working on an Angular 8 project, using Material. I've searched SO and google for solutions on how to what I want, but my search has been futile.
I also went through How to customize mat-select dropdown position? but my question is different. That question seems to be more about the position of the popover. The solutions there are about positioning the menu below or above but not over the trigger element
I guess, my question is more about the direction of the popover. I would like to only drop down and not drop up. I don't know if, I'm making enough sense here...lol
Current Behavior:
When a user opens the mat-select it pops up the options 1. Over the element (like somehow in the middle). 2. It positions the rest of the options either above or below the element, depending on the scroll position (or rather element's position on screen).
The Problem right now: When it pops up above the element, the options are getting rendered out side the screen.
Wanted Behavior:
When user clicks the mat-select, 1. it pops up options BELOW the element. 2. Despite the element position, options are ALWAYS show below. Like a dropdown, never a drop up.
Sort of like how you can choose to use a dropdown or drop up with Bootstrap
Thank you in advance for you assistance and suggestions.
I have complex design that has several layers on top of each other. Problem is that if I click on object, other object that on top of it gets selected. How I can switch off visibility of my top objects while working on my bottom layer, so that they won't get in the way?
I finally found how to achieve what I wanted. Just select element that in the way and in properties remove tick from visible. Now you can design without anything obstructing your view! Just don't forget to make visible all elements before you save your work.
I'm creating a context menu for certain elements using a PopupPanel; the menu itself is going to be fairly large and complex. What I'm looking to do is to have a list of buttons, plus an image and some text, related to the element clicked.
My problem is that I'd like the buttons to always display directly under the clicked element, because that's convenient for the user; the issue is that when PopupPanel is near the edges of the screen, it automatically changes position to be fully visible, not aligning its left side to the element as usual. I like this behavior, but it moves the position of the buttons away.
So what I'd like to happen is: normally the buttons are on the left of the panel, the other stuff is to the right. When the panel is close to the right of the screen, I'd like the buttons to instead be on the right (and thus under the clicked element) and the other stuff on the left.
Is there a clever way to do this, either in GWT or better yet, using only CSS? PopupPanel itself doesn't seem to tell you when it's going to get flipped, sadly. The only solution I currently have is to manually check the position and width of the popup before showing it and adjust accordingly, but I'm hoping there's a better solution.
Here is what I suggest (based on my own implementation of a similar use case):
Have the position callback implementation accept references (in constructor) on:
PopupPanel element
element on which user right cliked
the content you put in the PopupPanel
Replicate (I know this not DRY but implementation is package private) the code from default position callback
When opening to the right invoke a method that changes the layout of your content (CSS based or otherwise)
I hope it helps. If you find something better let me know.
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?