How can i disable horizontal scroll bar in gwt-richtextarea
I applied overflow-x:hidden and is working fine on firefox but not working on IE
RichTextArea uses an iframe to embed the editable html document.
When you set styles to the rich area, you are setting them to the iframe element, but in your case you have to set styles to the body element of the iframe #document.
The problem here is how to get the content document of the iframe, you have to use jsni, or use a 3party library like gwt-query.
This works with qQuery:
import static com.google.gwt.query.client.GQuery.*;
RichTextArea area = new RichTextArea();
RootPanel.get().add(area);
$(area).contents().find("body").css($$("overflow-x: hidden"));
Another issue is that the creation of the editable document in the iframe is delayed in gwt. So it is safer if you delay the setting of styles, using a Timer.
With gquery you can use the delay() method
$(area).delay(100,
lazy().contents().find("body").css($$("overflow-x: hidden")).done()
);
Related
I want to set up Page Plugin on my website to display nicely on screens with a variety of resolutions and pixel densities. In order to truly achieve that, I'd have to have to possibility to use rems in data-width attribute. Unfortunately, when I enter a rem value, the data-width attribute is ignored.
Is there a way to make the plugin behave nicely with rems?
To make the Facebook Page Plugin responsive on initial page load, instead of using rems, you'll want to remove the data-width attribute and instead add
data-adapt-container-width="true"
This will make the Facebook Page Plugin responsive, but only on the initial page render, with a minimum width of 180px.
I'm still trying to figure out how to make it truly dynamically responsive, in spite of Facebook's caveat (I'll post an update if I ever find the answer).
No Dynamic Resizing
The Page plugin works with responsive, fluid and static layouts. You
can use media queries or other methods to set the width of the parent
element, yet:
The plugin will determine its width on page load.
It will not react changes to the box model after page load.
If you want to adjust the
plugin's width on window resize, you manually need to rerender the
plugin.
Source: https://developers.facebook.com/docs/plugins/page-plugin
You could make it dynamically responsive by reinitializing the widget on browser resize, but by doing that you run the risk of eating up memory very quickly.
There is some other stuff you can try here as well
Responsive width Facebook Page Plugin
In my GWT application, I have an iFrame embedding a PDF object. The PDF itself is retrieved from a servlet returning it with application/pdf as content type. In Chrome, my Popup, which is a GXT Window, shows in front of the embedded pdf just fine.
In IE however, the popup hides behind the embedded PDF, even if I make its z-index the max value for IE.
I have also tried to call the Window's focus method after loading it, and looked into alternatives for iFrame, but it led to nothing.
How do I make sure the popup Window will show in front of the PDF? What's causing the fact that the PDF brutally forces itself to the front in the current situation?
Internet Explorer has Windowed and Windowless elements - How the Z-index Attribute Works for HTML Elements. Embedded PDF is displayed using plug-in, so it cannot be behind plain DIV.
You should use the technique when an additional IFRAME is put in front of PDF plug-in, but behind the popup. This effectively will make the popup cover displayed PDF. It seems that GXT itself does not provide such a facility (or it does not work properly). You should probably implement your own popup window by extending the one being used. There you would override show() method to create and size additional IFRAME.
A good starting example is the implementation of PopupImplIE6 in GWT.
I tried doing a CustomScrollPanel with my own HorizontalScrollbar and VerticalScrollbar implementations which each return a Vaadin DrawingArea from asWidget(). The DrawingArea appears to be rendered but only underneath native scrollbars (which are not part of the DrawingArea Widget). I was expecting them to show instead of the native scrollbars. How do I ensure this is the case?
(P.S. I tried the example at GWT CustomScrollPanel example to no avail.)
is there a way to force the GWT's RichTextEditor to use custom stylesheet for the edited text?
From what i have seen, it uses an iframe to render the text, so the host documen's styles are ignored.
That's currently not possible (there's an open issue about it).
As a workaround you could manually add your style definitions to the head element of the iframe document. See here for an example.
I am working to recreate (conceptually) a prototype I've written in Cappuccino in GWT/GXT. Cappuccino made it trivial to display an external webpage as part of the application by using a WebView.
However, I cannot find any way to do this with GWT/GXT. There is a HtmlContainer widget, but this seems to be intended for something else. Any suggestions on how to do this?
If you have the html-code and just want to render it use the "HTML"-widget. Form the docs
A widget that can contain arbitrary HTML. This widget uses a element, causing it to be displayed with block layout.
If you want to display a different page e.g. stackoverflow.com in your webapp use the "frame" widget. From the docs:
A widget that wraps an IFRAME element, which can contain an arbitrary web site.
You can set the url of a ContentPanel
e.g.
ContentPanel panel = new ContentPanel();
panel.setUrl("http://www.url.com/page");
panel.setHeaderVisible(false);
panel.setBorders(false);
panel.setBodyBorder(false);
You can also do this for the GXT Window class too.