I'm creating a popup panel whit same text, i would like to disable the background and make it grey. I read about setGlassEnabled but it doesn't work, can someone help? ps. the popup is correctly visualized.
PopupPanel popup = new PopupPanel(infoType);
popup.center();
popup.setGlassEnabled(true);
popup.show();
The glass panel has no default style, so it's transparent by default. If you want the background to be grayed out, you need to add some CSS styling to the glass panel.
Also, setGlassEnabled only enables the glass panel for the next time the popup is shown, and in your case, the popup is already showing when you call show (because of the previous call to center), so it's a no-op and the glass panel actually isn't used. Move your call to center to after the call to setGlassEnabled and/or call hide before setGlassEnabled.
Putting the following code at the top of your dialog constructor appears to fix the issue for me.
setGlassEnabled(true);
Style glassStyle = getGlassElement().getStyle();
glassStyle.setProperty("width", "100%");
glassStyle.setProperty("height", "100%");
glassStyle.setProperty("backgroundColor", "#000");
glassStyle.setProperty("opacity", "0.45");
glassStyle.setProperty("mozOpacity", "0.45");
glassStyle.setProperty("filter", " alpha(opacity=45)");
The javadoc for setGlassEnabled() is a bit misleading by saying that "the background will be blocked with a semi-transparent pane". In fact all it will do is apply a full-screen div with a default style name of 'gwt-PopupPanelGlass' (as of GWT 2.4, at least). If, say, your project <inherits> a theme such as com.google.gwt.user.theme.clean.Clean, then clean.css supplies the semi-transparent pane you were expecting:
.gwt-PopupPanelGlass {
background-color: #000;
opacity: 0.3;
filter: alpha(opacity=30);
}
Otherwise, as previously described, you'll have to roll your own.
Related
I am using TinyMCE editor for my application.
I want to have my body and the presentation toolbar on screen with "readonly".
readonly:true
makes the presentation bar disable which is not acceptable by client (needs both content area and toolbar).
I successully made the:
body.contentEditable = false;
which works good but when i click any of the presentation icon or button it gives the effect like when i click bold it makes the document text bold which should not.
You may add the following to undo the changes in the editor and execute it onchange_callback.
//undo all the changes in the editor
tinyMCE.activeEditor.undoManager.undo();
//remove all undo levels so there will no possibility of redoing last action
tinyMCE.activeEditor.undoManager.clear();
Here is a DEMO
Hope it helps!!
I set glass enabled to true of a GWT dialog box. However, when the user has scrolled down in the window, then the "glass effect" does not cover the whole window anymore.
Does anyone know how to fix that? Many thanks for any advices!
You need a css property such as
moveToPopUp.setGlassStyleName("myApp-PopupPanel-GlassStyle");
where
.myApp-PopupPanel-GlassStyle{
background-color : #333;
opacity : 0.4;
clip : rect(auto,auto,auto,auto);
}
There is no straight fix available, but you can:
1. Remove scroll when showing popup with addStyleName, removeStyleName
2. There is also other solution, but you have to change layout of your style and will limit your functionality so I do not recommend this. But if you are interested I can describe this.
try
glassPanel.setSize("100%", "100%");
where glassPanel is the name of your panel,
be sure to include the import statement.
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.
Does anybody can tell me where that blue border that appears after you push a PushButton comes from?
I really want to override that behaviour, don't know where or how though
UPDATE:
the effect I'm talking about turns out to be blue on Safari, it goes orange on Chrome and no effect on Mozilla
it occurs when the button has been pressed once, best way to explain it is the http://gwt.google.com/samples/Showcase/Showcase.html#!CwCustomButton
Are you talking about the "focus ring" that appear around any element when it's focused?
You can tweak it using the outline set of CSS properties: http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines
But please note that it's bad practice (re. accessibility) to completely remove it, as you'd remove any indication of whether the button is focused or not, and incidentally, which element is focused, if any.
This behavior should be defined in the appropriate stylesheet. If you check GWT sources that would be in /trunk/user/src/com/google/gwt/user/theme/standard/public/gwt/standard/standard.css. It's also defined in other themes.
What you should do is define your own styles
.my-PushButton
{
border : 1px solid #666;
padding : 0 10px;
}
.my-PushButton-down-hovering
{
background-color : #aaf;
}
.my-PushButton-up-hovering
{
background-color : #afa;
}
And then
PushButton btn = new PushButton(...);
widget.setStylePrimaryName("my-PushButton");
Hope this helps.
I am making a vertical Menu using GWT MenuBar and selection of particular MenuItem shows content on the right, I am trying to make something similar to TabPanel, but with Tabs on left instead of being on top. Now, since I've got the Menu items and actions in place, I want to remove the effect of hovering over and changing color, and keep that menu item selected which was clicked last and whose content is loaded on the right.
I am open to any comments, if you have a better solution to implement this, using some other components(with-in) GWT, please drop in a comment with your suggestions, I'll really appreciate that.
Or if you can just tell me how can I disable this effect, of hovering and sticking to only that selection, That would be awesome too..
Thanks to everyone, taking time to read this and suggesting a solution.
It's all defined in the CSS of your GWT's theme (probably the default one), so it's a matter of overriding those styles - make sure it's not the other way around :) Inspect the code with a tool like Firebug to see what's exactly being set and change that.