I need one of my gwt Panels to be always above all other content and always accessible for user to click on it's elements.
Even if there is a DialogBox opened on page my Panel should flow over it. How can I achive this?
With a PopupPanel you should be able to set the z-index CSS property to a large-ish number that will place it in front of any other floating panels (including DialogBox)
popupPanel.getElement().getStyle().setZIndex(100);
Related
I am having an app, which uses the Forge API. The UI displayed when pushing the Forge button "Settings" in "settingsTools group", overlaps one of my buttons.
However since my app zIndex is set (I am in react code) the click upon close of the setting UI, triggers my buttons instead of the close button.
Hence, I am intrested in setting the "Settings UI" to front so the click upon the close button triggers close. My front end code is in the react framework hence a simple zIndex parameter to set could do the trick.
How can I do so?
Instead of playing with hacky ways, consider using the docking panels provided by Forge Viewer. From my understanding, it can also work with React.
To elaborate the usefulness of panels, consider the following example:
Here I have a floating div, showing me some information related to the model. Obviously I've set a high z-index, to bring it upfront and here I have the same problem as you have - when opening things like settings, properties, model tree, etc, they all appear behind my div. Moreover, when changing the size of the window, I have to deal with my div position.
On the other hand, Forge Viewer uses everywhere panels, like this very Settings dialog.
Thus, if you would place your button into this kind of panel, this would save you from headache with z-index, docking, rescaling etc, as all the panels are working nice one with each other, as the below Robot Control Panel:
For more information on how to create a panel, I suggest checking http://learnforge.autodesk.io/#/viewer/extensions/panel
I am porting a Desktop WPF application to WinRT and I'm facing a little issue.
I had a ItemsControl and I had a context menu on every item to delete / edit the item.
I have been told that PopupMenu are not good in WinRT and I should use a AppBar.
I think I'm doing something wrong or I misunderstood that.
I thought that I could put that options on a AppBar and when I select an element, popup the bar and click where I need.
The problem is that the AppBar will show up when I right click on any part of my app, so that buttons will show up with an item selected.
So can I change the layout of the AppBar on different contexts (because it seems that Microsoft wants us to use AppBar as context menu without context capabilities) or only show it when I want via code?
Would be good to have a TopAppBar with some App-wide options and a BottomAppBar just for ListView's item context menu.
Or maybe I'm doing all this stuff wrong and I have to use another approach to put extra options on the Listview's items.
You are thinking about this correctly. AppBar is the place where you should put all your non-essential and selection based commands.
The guidelines here and here suggest that they should be arranged as follows:
Navigation commands should be in TopAppBar
Commands related to selection should on the left side of BottomAppBar
The rest of page specific commands should be on the right side of BottomAppBar
Contextual commands should only be shown when a relevant item to that command is selected. For that purpose you should set Visibility of these commands accordingly. Also AppBar should open automatically when an item with contextual commands in it is selected. You can do that programmatically by setting its IsOpen property. You should also set it to sticky mode by via IsSticky property.
If you're using MVVM you can bind your viewmodel properties to all Button and AppBar properties mentioned above.
There's a CustomAppBar control available in WinRT XAML Toolkit. I haven't used it myself yet but it has a couple of extra features that might prove useful in your case.
I'm trying to create a simple Border layout template and I'm using frame.pack() to determine frame size. I have an invisible label in the centre region and the pack method doesn't seem to be taking the label into account so it doesn't show. I know it does work initially because the frame is initially the right size for the other components.
So how can I get the frame to take the invisible label into account? The label is only visible when the button in the centre region is selected.
Everything works, apart from you have to manually increase the frame size to see the label.
I think that it depends on the layout manager of the container containing the label. Some layout managers compute the preferred size based on the visible components only, and others take invisible components into consideration. GroupLayout, for example, has the setHonorsVisibility method.
Anyway, the easiest way is probably to make the label invisible after having called pack.
See also SetVisible(false) changes the layout of my components within my Panel
Say I have a menu which is initially 200px by 100px. I need to include it in an iframe but the problem is it is a dropdown menu and when it opens the menu gets cut of since it is inside the frame. Is there a way to have it drop out of the frame?
If both the parent page and the page within your iframe are coming from the same domain, you can communicate between them via JS:
Possible Ways to Communicate Between iFrame and Parent Page across domains
The solution would be to, upon hover, send JS to the parent page and have the parent page then render the menu on top of the iframe.
That said, having to use a menu within an iframe that then pops out of the iframe seems to be not a technical problem as much as it is a visual design and layout problem.
No there is not. You will need to use a different approach, such as downloading the content of the frame on the server and inlining it in the parent page instead. Another possibility would be to float the parent page's content over the iframe and make the iframe larger.
I want to position a modal box (position: absolute) out of browser, but I can't get it work.
It would be cool to position modal box on secondary monitor (if user has one, of course).
Hey, this one keeps me frustrating :/
You can't do this. Just about the only way to display content outside of the browser window area is with the Javascript window.open() method, though note that this method will probably be blocked by the user's popup blocker unless it's triggered by a user action (like clicking a link).