I am attempting to display some formatted HTML inside of a webview. This HTML will have some basic formatting, such as images and paragraph tags etc.
The issue is that the HTML will take up the entire height of the screen. if I have some short content it take up the entire height of the screen.
What i want that height should adjust according to the content.
Does anyone know how I can get the height of the webview to work the way I want it to? Does this make sense?
os 7
This is my code.
HorizontalFieldManager contentview = new HorizontalFieldManager(Field.USE_ALL_WIDTH);
listVfm.add(contentview);
BrowserFieldConfig config = new BrowserFieldConfig();
config.setProperty(BrowserFieldConfig.VIEWPORT_WIDTH, new Integer(
Display.getWidth()));
config.setProperty(BrowserFieldConfig.INITIAL_SCALE, new Float(1.0));
config.setProperty(BrowserFieldConfig.USER_SCALABLE, Boolean.FALSE);
ProtocolController eventsProtocolController = new ProtocolController(bf2)
{
public void handleNavigationRequest(BrowserFieldRequest request) throws Exception
{
bf2.setFocus();
super.handleNavigationRequest(request);
}
};
config.setProperty(BrowserFieldConfig.CONTROLLER, eventsProtocolController);
bf2 = new BrowserField(config);
bf2.displayContent("<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'><HTML><HEAD><META NAME='Generator' CONTENT='EditPlus'><META NAME='Author' CONTENT=''><META NAME='Keywords' CONTENT=''><META NAME='Description' CONTENT=''> <meta name='viewport' CONTENT='width=device-width,height=device-height,minimum-scale=1,content= maximum-scale=1, maximum-scale=1'/></HEAD><BODY><p>some text.</p></BODY></HTML>", "http://localhost");
contentview.add(bf2);
Related
Using Vaadin 8 to develop simple application with horizontal menubar on top and grid in the center. I am finding it hard to get a simple Horizontal Menu bar with icon. I am using the default CRUD View example with some modification and here is the snippet below :
public MainScreen(MyUI ui) {
setSpacing(false);
setStyleName("main-screen");
setMargin(false);
setSizeFull();
addComponent(getMenu());
HorizontalLayout menuLayout = new HorizontalLayout();
menuLayout.addStyleName("valo-content");
menuLayout.setWidth("100%");
menuLayout.setSpacing(false);
HorizontalLayout viewContainer = new HorizontalLayout();
viewContainer.addStyleName("valo-content");
viewContainer.setWidth("100%");
final Navigator navigator = new Navigator(ui, viewContainer);
navigator.setErrorView(ErrorView.class);
menu = new Menu(navigator);
menu.addView(new SampleCrudView(), SampleCrudView.VIEW_NAME, SampleCrudView.VIEW_NAME, VaadinIcons.EDIT);
menu.addView(new AboutView(), AboutView.VIEW_NAME, AboutView.VIEW_NAME, VaadinIcons.INFO_CIRCLE);
navigator.addViewChangeListener(viewChangeListener);
Image image = new Image(null, new ThemeResource("img/example.jpg"));
menuLayout.addComponent(image);
menuLayout.addComponent(menu);
menuLayout.setSizeFull();
addComponent(menuLayout);
addComponent(viewContainer);
setExpandRatio(menuLayout, 1);
setSizeFull();
}
Appreciate if any one could help me understand layouts and how to fix this issue.
Here is the snapshot the below with weird spacing and layout
I have something similar to this code:
TextArea textArea = new TextArea();
textArea.setSizeFull();
Panel dataPanel = new Panel("Panel", textArea);
dataPanel.setSizeFull();
textArea.setValue(... some very long text...);
The problem is that this TextArea appears without vertical scrollbar (and mouse-wheel scrolling also doesn't work), although inner text is longer than TextArea height (I can navigate lower using cursor and keyboard down arrow).
How do I enable scrolling in this component?
A bit weird, but as per the documentation if you disable word-wrapping in a text-area, you'll get the vertical scroll-bar:
Word Wrap
The setWordwrap() sets whether long lines are wrapped ( true - default) when the line length reaches the width of the writing area. If the word wrap is disabled (false), a vertical scrollbar will appear instead. The word wrap is only a visual feature and wrapping a long line does not insert line break characters in the field value; shortening a wrapped line will undo the wrapping.
The following code sample illustrates this behaviour with Vaadin 8.0.6. Please note my class extends Panel to match your sample but at this point you can eliminate it:
public class PanelWithScrollableTextField extends Panel {
public PanelWithScrollableTextField() {
TextArea textArea = new TextArea();
textArea.setWordWrap(false);
textArea.setSizeFull();
setContent(textArea);
setSizeFull();
StringBuffer buffer = new StringBuffer();
IntStream.range(1, 100).forEach(value -> buffer.append(value).append("\r\n"));
textArea.setValue(buffer.toString());
}
}
Result:
P.S. I know it's a bit weird to grasp, but panels are used to scroll surfaces that are larger then the panel size, so if we'd get it working, you'd be scrolling the text area itself, not its content. You can see below a sample to better understand what I mean:
public class PanelWithScrollableTextField extends Panel {
public PanelWithScrollableTextField() {
TextArea textArea = new TextArea();
textArea.setWordWrap(false);
textArea.setHeight("500px"); // fixed size with height larger than the panel
setContent(textArea);
setHeight("100px"); // fixed height smaller than the content so we get a scroll bar
StringBuffer buffer = new StringBuffer();
IntStream.range(1, 100).forEach(value -> buffer.append(value).append("\r\n"));
textArea.setValue(buffer.toString());
}
}
Result:
You can change it CSS also like below .
.v-textarea { overflow-y: auto ! important;}
I am using Webview in my UWP app to render some html content. The problem is, when the content is long enough to produce a scrollbar, the scrollbar would hide some of the content behind itself.
How can I fix it?
Try this code ,that's how i fixed it.
this.webView.InvokeScriptAsync("eval", new string[] { SetScrollbarScript });
string SetScrollbarScript = #"
function setScrollbar()
{
//document.body.style.overflow = 'hidden';
document.body.style.msOverflowStyle='scrollbar';
}
setScrollbar();";`
I have added a popup window to my main UI as follows:
Window component = new Window();
UI.getCurrent().addWindow(component);
Now, I want my popup to be centered horizontally and e.g. 40 pixels from the top of the screen. As far as I can see Vaadin has 4 methods for positioning my window.
component.center()
component.setPosition(x, y)
component.setPositionX(x)
component.setPositionY(y)
None of these are really what I want. I was hoping at first that setPositionY might help me. This does allow me to get the right distance from the top, but the x-position is now set to 0, where I wanted it to be centered.
The setPosition might have helped if I was able to calculate what the x-position should be, but this would require me to know the width of the component in pixels, but component.getWidth just tells me 100%.
Next I tried to use CSS styling on the component, writing and explicit css rule and adding it to the component with addStyleName. It seems though that Vaadin overrides whatever I wrote in my css with its own defaults...
Any ideas how to get my Window component positioned correctly?
I used the methods getBrowserWindowWidth() and getBrowserWindowHeight() from the com.vaadin.server.Page class for this.
I centered my "log" window horizontally in the lower part of the browser window with
myWindow.setHeight("30%");
myWindow.setWidth("96%");
myWindow.setPosition(
(int) (Page.getCurrent().getBrowserWindowWidth() * 0.02),
(int) (Page.getCurrent().getBrowserWindowHeight() * 0.65)
);
Solution 1: Use SizeReporter
Indeed, setPositionY() will reset the window's centered property to false. As the width of your pop-up and that of your browser window are not know before they appear on the screen, the only way I know to get those values is to use the SizeReporter add-on. Its use is quite straightforward:
public class MyUI extends UI {
private Window popUp;
private SizeReporter popUpSizeReporter;
private SizeReporter windowSizeReporter;
#Override
protected void init(VaadinRequest request) {
Button button = new Button("Content button");
VerticalLayout layout = new VerticalLayout(button);
layout.setMargin(true);
popUp = new Window("Pop-up", layout);
popUp.setPositionY(40);
addWindow(popUp);
popUpSizeReporter = new SizeReporter(popUp);
popUpSizeReporter.addResizeListenerOnce(this::centerPopUp);
windowSizeReporter = new SizeReporter(this);
windowSizeReporter.addResizeListenerOnce(this::centerPopUp);
}
private void centerPopUp(ComponentResizeEvent event) {
int popUpWidth = popUpSizeReporter.getWidth();
int windowWidth = windowSizeReporter.getWidth();
if (popUpWidth == -1 || windowWidth == -1) {
return;
}
popUp.setPositionX((windowWidth - popUpWidth) / 2);
}
}
This piece of code will be okay as long as you don't resize the pop-up. If you do, it will not be automatically recentered. If you replace addResizeListenerOnce() by addResizeListener() then it will automatically recenter the pop-up but you'll get some "UI glitches" as the add-on sends resize events almost continually while you're resizing your pop-up...
You could try to do it using CSS, but I personally avoid CSS as much as I can with Vaadin :).
You'll need to recompile the widgetset after you've added the add-on as a dependency.
Solution 2: Use com.vaadin.ui.JavaScript
I won't vouch for the portability of this solution but I guess it will work on most modern browsers.
public class MyUI extends UI {
private Window popUp;
#Override
protected void init(VaadinRequest request) {
Button button = new Button("Content button");
VerticalLayout layout = new VerticalLayout(button);
layout.setMargin(true);
popUp = new Window("Pop-up", layout);
popUp.setPositionY(40);
popUp.addStyleName("window-center");
addWindow(popUp);
// Add a JS function that can be called from the client.
JavaScript.getCurrent().addFunction("centerWindow", args -> {
popUp.setPositionX((int) ((args.getNumber(1) - args.getNumber(0)) / 2));
});
// Execute the function now. In real code you might want to execute the function just after the window is displayed, probably in your enter() method.
JavaScript.getCurrent().execute("centerWindow(document.getElementsByClassName('window-center')[0].offsetWidth, window.innerWidth)");
}
}
I have pieced together information on eliminating iframe scrollbars in favour of the browser scroll bars when rendering a reportviewer in an iframe. MVC does not support rendering a report viewer in a view, hence the need for an iframe.
Edit: i struggled to find this solution (below) hence i thought i would share.
In the aspx page (the page that will be rendered in the iframe)
$(function () {//jQuery document.ready
// attach an event handler, whenever a 'property' of the reportviewer changes, the function will be called to adjust the height of the iframe
Sys.Application.add_load(function () {
$find("ReportViewer").add_propertyChanged(viewerPropertyChanged); // $.find("ReportViewer") will return the reportviewer with id "ReportViewer"
});
function adjustIframeSize() {
// you can play around with these figures until your report is perfect
var extraHeightToAvoidCuttingOffPartOfReport = 100;
var extraWidthToAvoidCuttingOffPartOfReport = 10;
// '#ReportViewer_fixedTable' is a portion of the report viewer that contains the actual report, minus the parameters etc
var reportPage = $('#ReportViewer_fixedTable');
// get the height of the report. '#ParametersRowReportViewer' is that top part that contains parameters etc
var newHeight = reportPage.height() + $('#ParametersRowReportViewer').height() + extraHeightToAvoidCuttingOffPartOfReport;
// same for width
var newWidth = reportPage.width() + extraWidthToAvoidCuttingOffPartOfReport;
// get iframe from parent document, the rest of this function only works if both the iframe and the parent page are on the same domain
var reportIframe = $('#ReportViewerFrame', parent.document);
// just make sure that nothing went wrong with the calculations, other wise the entire report could be given a very small value for height and width, thereby hiding the report
if(newHeight>extraHeightToAvoidCuttingOffPartOfReport)
reportIframe.height(newHeight);
if (newWidth > extraWidthToAvoidCuttingOffPartOfReport)
reportIframe.width(newWidth);
}
function viewerPropertyChanged(sender, e) {
// only change the iframe dimensions when 'isLoading'
if (e.get_propertyName() == "isLoading") {
if (!$find("ReportViewer").get_isLoading()) {
adjustIframeSize();
}
}
};
});
Solved a similar problem using a set of extensions in ReportViewer for MVC.
#Html.ReportViewer(
ViewBag.ReportViewer as Microsoft.Reporting.WebForms.ReportViewer,
new { scrolling = "no" })