I am trying to render inovua/reactdatagrid inside the popover component of headless-ui that has absolute position, which is not working.
I tried to use a separate div to render the grid but it does not show up on ui, if the div has absolute or fixed position but it does show up as soon as I change the positioning to relative. Although the grid is added to the dom, it's just isn't visible.
Related
I have used the EventManager.onWindowResize event to handle window resize to adjust my layout. It works fine only for the Viewport. I want my inner commponents, viz. Grids and Panels to be adjusted accordingly. Is there a way to achieve this? I have written custom code to handle the resize individually for every component. Which works fine for my grids and panels. But, the panel headers don't resize! They are just stuck there.
My layout is as follows:
[Viewport]
[Form Panel]
[Panel containing Grid] [Panel containing Grid]
[/Form Panel]
[/Viewport]
The Grids resize but not the Panel which contains the Grid. Moreover, I've used anchor, but my percent widths are ignored.
Any default way to implement resize?
Used anchor layout everywhere. The Viewport required some JS code, but anchor solved my problem. Thanks everyone for their inputs.
I'm using a GWT popup panel for displaying some information stacked up vertically in my jsp page. The problem I'm facing is that, once the popup panel is displayed, it doesn't hold on to its set position. I'm setting the position of the popup panel using setPopupPosition().
However, whenever the user scrolls the browser, the popup panel displayed moves up and down accordingly. It doesn't maintain its original position, where it was displayed.
I've tried setting the css property to (position: fixed;) applied on the popup panel, but it doesn't work. I read someplace, that in order for an html element to be displayed statically, we can use the position: fixed, and width: 100% to achieve that. But in my case, I can't set the width to 100%, since I need the popup panel to be displayed for a specific size.
Is there a way to achieve the fixed position of the popup panel in GWT? Would I have to listen to browser's scrollbar events in order to fix the position or can it be handled differently.
This is my piece of code, which I use to set the popup panel's position in GWT.
final PopupPanel simplePopup = new PopupPanel(false);
_beamMenu = simplePopup;
rendererDisplay(response, simplePopup,true);
int left =_beamIcon.getAbsoluteLeft() + _beamIcon.getOffsetWidth() - simplePopup.getOffsetWidth();
int top = _beamIcon.getAbsoluteTop() - simplePopup.getOffsetHeight();
simplePopup.setPopupPosition(left, top);
Any help in this regard will be highly appreciated.
Many thanks,
Asheesh
add a css with: position: fixed !important;
The default behavior of the PopupPanel should be enough. You actually want position: absolute and not fixed. (See http://www.quirksmode.org/css/position.html for an explanation of position types, but fixed is when it appears to float as you scroll).
The issue you are likely running into, is that when you show the PopupPanel, it gets removed from wherever it was in the DOM, and added to the RootPanel:
(This is from GWT 2.4 so your exact code may very)
public void show() {
if (showing) {
return;
} else if (isAttached()) {
// The popup is attached directly to another panel, so we need to remove
// it from its parent before showing it. This is a weird use case, but
// since PopupPanel is a Widget, its legal.
this.removeFromParent();
}
resizeAnimation.setState(true, false);
}
...
public void setState(boolean showing, boolean isUnloading) {
...
RootPanel.get().add(curPanel);
...
}
As a result, though the position: absolute should be enough, likely your other top level Widgets are also absolutely positioned. Therefore, when you scroll the page you are likely actually scrolling the contents of one of your other widgets, and the PopupPanel is stuck to the outer element, which does not have a large offset-height and is not being scrolled. This is why it appears to have the same behavior as if it were using fixed positioning (i.e. always XX pixels from the top and side of the browser window).
Go back and look at your page construction and fix the other Widgets and you should be fine. From my observations, the new LayoutPanels use position: absolute all over the place, so you may have to manually set it to relative.
I'm using a simple javascript toggle function to expand a div to show its contents. If the div is near the bottom of the screen, it expands and some of the div disappears off the screen.
How can I get the page to automatically scroll down to make sure the div is in view?
Each element on your page, including your DIV, will have a set of offset values relative to the document. You can get these via the $.offset() method. This will give you the x and y coordinates to the element on the page.
There are many plugins that exist in the wild (such as $.scrollTo() by Ariel Flesler) which will animate scrolling of your page for you, and even do so via a set of provided coordinates. You would join these two items together to automate a scrolling to the offset coordinates of your DIV.
Just make sure your DIV isn't taller than your viewport, or else you'll need to scroll even more to see all of it.
Im using the jscrollpane jquery plugin. My content are images that expand when you mouse over them, and shrink back to normal on mouseleave. What I need if for the images to be able to expand over beyond the scroll bar and remain visible while expanded.
By giving the images a z-index I can get them to expand over the scroll bar handles, but im struggling to get them to expand any further.
If I set a number of elements to having overflow visible I can get it to work, but then I have browser scroll bars at the bottom of the screen.
Can I have the images visible when they expand but no browser scroll bars?
Thanks
Answer from:
http://groups.google.com/group/jscrollpane/browse_thread/thread/8073378d51551efa
Hi,
If I understand correctly you want your images to expand out of the
bounds of the scrollpane "box"? That won't be possible in a simple manner.
A workaround might be to do something like this:
* On mouseover clone the image that is rolled over and attach the
clone to the body with position: absolute.
* Use jQuery to figure out the position of the image you cloned with
respect to the body (a loop with offsetParent will be your friend
here).
* Apply this position to the cloned image so that it is sitting
directly above the original image then expand it.
* Listen for the mouseout event on the cloned image and when this
happens the shrink the cloned image and then remove it from the body.
Hope it helps,
Kelvin :)
How to place a control at the center of a canvas?
I have a main VLayout set to 100% width and 100% height. I want to place a grid at the center of this layout, meaning at the center of the browser's "viewport". How to do that with smartGWT layouts?
setLayoutAlign(Alignment.CENTER)
This places the controls center to the layout's breadth axis. But if I nest HLayout and VLayout it is not giving desired results.
you have to set the layoutAlign on all nested Layout panels.
the configuration is not inherited from parent panels and while HLayout defaults to TOP, VLayout defaults to LEFT.
Also, make sure that you call:
parentWidget.addMember(childWidget), instead of: parentWidget.addChild(childWidget)
The first one obeys setLayoutAlign(), but the last one doesn't.