I'm using an AbsolutePanel to do some drag-and-drop kind of stuff. I add child Widgets to the AbsolutePanel, and then use absolutePanel.setWidgetPosition to set their position.
But I keep getting this error:
java.lang.IllegalStateException: com.google.gwt.user.client.ui.AbsolutePanel is missing CSS 'position:{relative,absolute,fixed}'
the stack trace points right to the setWidgetPosition call.
BUT! Not only have I already called absolutePanel.getElement.getStyle().setPosition(Position.RELATIVE), I have also applied a style name with a position: relative attribute. When I inspect the element with FireBug, it has a style attribute with "position: absolute" right in it, presumably overriding everything else.
How can I get rid of this warning?
The actual behavior seems to be working fine, but maybe I'm missing something.
It seems to be a bug in GWT:
http://code.google.com/p/google-web-toolkit/issues/detail?id=5251
Not sure, if this bug actually got fixed as I'm still experiencing this problem with GWT 2.6.0.
Looking into the code of AbsolutePanel I noticed that it empties the value of the position attibute of a child element when it is removed from the AbsolutePanel.
When the child is re-added to the AbsolutePanel the position attribute remains empty.
This is problematic, if the re-added child itself is an AbsolutePanel, because in this case an IllegalStateException exception occurs when setWidgetPosition is called on the child AbsolutePanel.
As you were doing some drag & drop stuff which usually goes along with adding / removing widgets I assume this is what has happened.
Workaround:
Call myChildAbsolutePanel.getElement().getStyle().setProperty("position", "relative") right after removing myChildAbsolutePanel from its parent AbsolutePanel.
Far from being beautiful - but works for me.
Related
From what I've seen, many (beginning) web developers have trouble placing pseudo-elements. The old trick with position:absolute and top/left etc. produces unexpected results in certain situations.
I frequently can't for the love of me find where a pseudo-element is hiding, but I know it's there somewhere. DevTools doesn't seem to help. The element seems to be rendered, there's no errors or conflicts, but it's off the viewport and is nowhere to be found. Or maybe sometimes it's hidden beneath another element (z-index issue).
Is there some method for revealing the location of sneaky pseudo-elements?
after having spent the last few hours searching the web for this issue I decided that I need your help.
The issue is similar to this topic: Javafx: Tableview header is not aligned with rows
No answer has been provided there and also, I think, my case is slightly different:
I have a properly setup TableView with reused CellFactories and CellValueFactories. Data-wise, everything works 100% the way I intended. However once I populated my table with more rows than my view can show it naturally started to show a vertical scrollbar. From that moment on (see first screenshot) the column headers weren't aligned with the columns anymore. It appears that it is exactly the width of the scrollbar that distorted the widths distribution (I'm using ConstraintResizePolicy with a few fixed width columns and the rest relying on computed width, again, otherwise working flawlessly).
As soon as I scroll with the mouse wheel, click on an entry, tab into focus or resize the window/view, the headers snap into place (see second screenshot).
Based on the topic posted in the beginning, I think this is a bug and I'm therefore not only looking for a solution (which might not exist) but also for a workaround. I tried:
table.scrollTo()
table.scrollToColumnIndex()
table.layout()
table.requestFocus()
table.requestLayout()
table.refresh()
I know not all of those make sense but still I tried and none of them made the column headers be in line with their columns on application launch.
Every suggestion is welcomed.
I don't feel that sharing code helps here, but ask if you want something specific. The view was built with SceneBuilder 8 and consists of an AnchorPane, a TableView in the middle, and 6 TableColumns, nothing else.
Thank you very much!
I've had the same problem. It seems a bug. Try this. It works for me
Platform.runLater(() -> tableView.refresh());
I know this is an old message but I tried everything to get the headers aligned and nothing was working until I stepped away from the problem. I then tried this and it worked. Headers jump but I am ok with that. I hope this helps someone else.
Task<Boolean> task = new Task<Boolean>() {
#Override protected Boolean call() throws Exception {
Thread.sleep(300) // needs this to make sure the table is displayed
table.refresh();
table.scrollTo(0);
return true;
}
};
new Thread(task).start();
I also have the situation of TableColumns' Headers not aligend with cells.But I am not because Scrollbar.I am because of setting a border color for cells.After the CSS modified, I got the correct result.
Incorrect CSS:
.table-row-cell {
-fx-border-color: black;
}
changed to:
.table-row-cell {
-fx-table-cell-border-color: black;
}
Reference documentation: https://community.oracle.com/tech/developers/discussion/2505963/tableview-column-headers-do-not-line-up-with-rows
None of the other solutions worked for me. I noticed that the issue only occurs when the horizontal scrollbar is on the far right and then the table is cleared (table.getItems().clear()) while other content changes didn't cause the bug even if the scrollbar disappears and reappears.
I checked this bug report https://bugs.openjdk.java.net/browse/JDK-8149615 (and the linked changeset) and at first dismissed the workaround because scrolling to the first column (table.scrollToColumnIndex(0)) wasn't working for me either.
But it started working once I called scrollToColumnIndex before clearing the table with getItems().clear().
The bug report suggests reacting to the visibility change of the placeholder node. I didn't test this because I had already solved it (hopefully) and no sample code is provided. But if I ever need to revisit this I would try writing a listener for the placeholder visibility as an alternative solution.
I'm working on a project with a main window consisting of a mpartstack where I add parts dynamically from another part. The problem is that when the last part gets closed the mpartstack disappears and the other part takes up all the space. When I try to add new parts nothing happens.
I've tried fiddling around with the preDestroy function in the parts that are added to the stack by trying to add a new part. The preDestroy works occasionally but far from satisfactory.
I've looked far and wide to try to find any clue on what to do but I've found nothing except for some bug reports on the matter.
So: can a mpartstack be in a uncloseable state or is there any textbook way to intercept a part that is about to be closed?
Thanks in advance
/K
Add the tag NoAutoCollapse to the MPartStack definition in the model.
Tinymce re-size/scale handlers are not appearing in the same place where the re-sizable/scalable object are, but far below the object.
I am using inline feature, this issue is happening with all re-sizable, like table, image etc.
Here is the screenshot of issue:
I got the solution, position of parent of re-sizable object need to be relative
I have an Ext Js panel that I am adding to my main TabPanel. The panel I am adding contains a FormPanel as one of it's items and inside the FormPanel I have a Name field. What I want to do is change the name of the Tab based on the name in the form field.
The problem is that if I call the FormPanel's getForm().getValues() inside of the panel's initComponent, I get the following javascript error:
Uncaught TypeError: Cannot read property 'dom' of undefined
If I do this outside of initComponent (e.g. on a button press) everything works fine. After doing some testing, I think the issue is that the FormPanel isn't actually rendered yet (and thus the dom doesn't exist), getValues() fails. However, I can't seem to figure out a way to get my FormPanel's values from the Panel on load.
I tried to listen for events. I tried:
this.detailForm.on('afterrender', function () { alert('test'); });
but doing this showed that AfterRender is called prior to the form actually being rendered (it's not visible on the screen). Changing the alert to my custom function handler produces the previous dom exception. I attempted to use the activate and enable events instead of afterrender, but even though the API says that FormPanel fires those events, the alert('test') never gets called.
I can't seem to find any way for my panel to get the inner FormPanel's values upon loading my panel. Does anyone have any ideas?
Using getFieldValues() in place of getValues() will collect values by calling each field instance's getValue() method instead of by reading from the DOM. This should allow you to get your values regardless of the form's rendered state.
I've got the same problems on one of my projects, I managed to fix it using the afterlayout event.
I'd give setting .deferredRender:false a try.
Ext.TabPanel.deferredRender
Probably best to roll out of your afterlayout changes, then test with just a straight deferredRender:false config item.
I believe the problem is caused because the inactive tabs are not rendered until they become active. In your scenario, you cannot get the values, because they don't exist until the tab is activated/shown.
Setting deferredRender:false will render the items within all tabs. There could be a performance hit by setting deferredRender:false, so testing you must do.
Hope this helps.