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.
Related
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.
I'm wondering whether I can use the "same" icon (or something that looks the same) that triggers a full-screen, semi-transparent Bootstrap modal (that I have customized) to pop up and then close it with an icon that is in the same location.
However, say it is initially a hamburger icon on the normal page, when I click the icon to pop up the modal menu, it is now under the modal. Is there a way to have it stay on top of even a modal? I tried z-index but I couldn't get it to work.
The tricky thing for me is that I wanted to have the icon transition from a hamburger to an X and then vice versa when it closed: http://sarasoueidan.com/blog/navicon-transformicons/
Initially I was hoping I could get the icon to transition and then somehow set the icon to layer on top of everything, including modals.
Any ideas or suggestions would be great, thank you.
It should be possible to do this with z-index. However, z-index only works with elements that have "position" set to something other than "static" (the default). Try adding position: relative to your open / close button and hopefully then you should be able to use z-index to keep the button in front of the overlay.
There's a good reference with more info about z-index on CSS Tricks.
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.
i need some pointers here because i don't really know what to look for.
The project is in gwt and is using gwtquery.
I have this page with some elements and when the mouse overs an element it changes showing additional infos, let's call it header. When the mouse goes out of the header (which has some buttons so it need to stay visible once shown) it returns invisible.
The problem is that when the header is made visible all the elements of the page change position because my element changes in dimension. What i wish to do is to keep the element in the same position and overlap the header over everything with z-index.
It's not about GWT at first hand. It's mostly about general concepts of elements positioning and layout building for html pages. You should start from something like http://www.w3schools.com/Css/css_positioning.asp
And then find the appropriate tools in GWT framework or in third party libraries that are available.
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?