Developer plugin for EDGE browser

[vnathank]

Hi Isomorphic,

We are using Smart Gwt-5.1
Browser: Microsoft Edge
Issue: Getting Scroll bar in “selectItem “
Please let us know if there is any developer plugins are available for debugging smartGwt application.
In case if there is no plugin, so please let us know how we can debug in EDGE browser.

[Isomorphic]

Hi Vnathank,
For cross browser debugging of GWT applications (including SmartGWT applications), at this stage we recommend using SuperDev mode - the "classic" GWT Dev Mode + browser plugin approach is at this stage being made somewhat obsolete by Google / GWT.
The latest version of the GWT Eclipse plugin makes running Super Dev mode very straightforward. If you are unfamiliar with this or have specific questions, let us know and we can probably point you in the right direction.

In addition to this, for debugging of SmartGWT applications we of course recommend using the SmartClient Developer Console, and watching the console logs for both client and server.
If you haven't already, please take a look at the debug topic here.

Finally - the Edge browser is still very new, and we have encountered (and fixed or worked around) a number of issues with it already.
If you are seeing unexpected behavior (your description Getting Scroll bar in “selectItem “ sounds like you are having a problem with SelectItem scrollbars), there may be a legitimate framework issue we need to resolve for you.
The best way to proceed if this seems to be the case would be to first ensure you can reproduce the problem against the latest version of the SmartGWT libraries (the most recent 5.1 nightly build), and if so, put together a simple standalone test case - an EntryPoint class which simply defines and draws a small chunk of UI and demonstrates the problem - and show it to us.

This will allow us to determine if we need to address a problem with the browser at the framework level.
Also, please be sure to indicate which skin you are using, and show us your bootstrap HTML file so we can be sure the doctype is correct and the application is being loaded correctly.

Regards
Isomorphic Software

[vnathank]

Hi Isomorphic,

Once again thanks for your support.
As per our previous discussion, we have tested “selectItem” scroll bar issue in recent 5.1 nightly build (31^st Jan 2016). But for EDGE browser this issue is remain same.

Please let us know how we can resolve this issue.

Thanks,
Vnathank

[Isomorphic]

The best way to proceed if this seems to be the case would be to first ensure you can reproduce the problem against the latest version of the SmartGWT libraries (the most recent 5.1 nightly build), and if so, put together a simple standalone test case - an EntryPoint class which simply defines and draws a small chunk of UI and demonstrates the problem - and show it to us.

You've take the action in the first part of that sentence - next is the action in the second part of that sentence. We need a way to reproduce the problem in order to determine whether it's a coding error in your application / CSS, or a framework issue we can solve for you.

Be sure also to note the requirement to get the DOCTYPE correct, and to include the .html bootstrap file used for testing.

[vnathank]

Hi Isomorphic,

Thanks for your reply.

We are using 5.1 nightly build (9^th February 2016)

Browser: Microsoft Edge

Attachments: TestsmartGwtProject.java , Sample_SelectItem_Edge.png

As per our above discussion we have developed sample application and sure about correct DOCTYPE. Please refer the attached file.
We are having multiple select items with pre populated value in different languages.
But while testing our application, we are facing issue in Edge browser but not in other browsers like (Chrome and Firefox).

Please let us know how to resolve this issue .


Thanks,
Vnathank

[Isomorphic]

Be sure also to note the requirement to get the DOCTYPE correct, and to include the .html bootstrap file used for testing.

Note the second part of this sentence - so a reminder again that we need your bootstrap .html file, to make sure that we can see all CSS, meta tags, and since you are now talking about multibyte characters being involved, your character encoding settings if any.

We also need to know what skin this is - it looks like "Enterprise", but please confirm that it is Enterprise and it totally unmodified.

[vnathank]

Hi Isomorphic,
Attachments: TestsmartGwtProject.gwt.xml, TestsmartGwtProject.html and TestsmartGwtProject.css

Thanks for your quick reply. Sorry in my earlier post I have not attached html and CSS file.
Please refer above attachments. Actually this issue we are facing in case of multibyte characters
and in Edge browser only.

For you last question, yes we are using Enterprise but we have not modified anything into it.

Note: we are unable to load “.html” file in your portal. So please find it below:-

TestsmartGwtProject.html:

<!DOCTYPE html>
<!-- The DOCTYPE declaration above will set the -->
<!-- browser's rendering engine into -->
<!-- "Standards Mode". Replacing this declaration -->
<!-- with a "Quirks Mode" doctype is not supported. -->

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- -->
<!-- Consider inlining CSS to reduce the number of requested files -->
<!-- -->
<link type="text/css" rel="stylesheet" href="TestsmartGwtProject.css">

<!-- -->
<!-- Any title is fine -->
<!-- -->
<title>Web Application Starter Project</title>

<!-- -->
<!-- This script loads your compiled module. -->
<!-- If you add any GWT meta tags, they must -->
<!-- be added before this line. -->
<!-- -->
<script>
var isomorphicDir = "testsmartgwtproject/sc/";
</script>
<script type="text/javascript" language="javascript"
src="testsmartgwtproject/testsmartgwtproject.nocache.js"></script>
</head>

<!-- -->
<!-- The body can have arbitrary html, or -->
<!-- you can leave the body empty if you want -->
<!-- to create a completely dynamic UI. -->
<!-- -->
<body>

<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1'
style="position: absolute; width: 0; height: 0; border: 0"></iframe>

<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
<noscript>
<div
style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled in order for this
application to display correctly.</div>
</noscript>

<h1>Web Application Starter Project</h1>

<table align="center">
<tr>
<td colspan="2" style="font-weight: bold;">Please enter your
name:</td>
</tr>
<tr>
<td id="nameFieldContainer"></td>
<td id="sendButtonContainer"></td>
</tr>
<tr>
<td colspan="2" style="color: red;" id="errorLabelContainer"></td>
</tr>
</table>
</body>
</html>

[Isomorphic]

Try removing your meta tags and your CSS entirely, then also replace RootPanel.add() with just calling draw() (using RootPanel.add() is not supported - see QuickStart).

If the problem persists, try calling listGrid.getRowHeight() on each of the rows in the pickList (you will need to do this with the pickList open and rendered). You may find that the row with multibyte characters is 1px higher than the other rows, which would indicate some kind of CSS / font rendering bug in Edge, possibly related to the fonts you have installed. You can work around it by setting the standard height of pickList rows 1px larger - change pickListDefaults to set cellHeight larger, as covered in the AutoChildren overview.

[vnathank]

Hi Isomorphic,
Thanks for always being supportive.
We are using 5.1 nightly build (22nd February 2016)

As per our conversation, we have tried to resolve this issue after removing CSS and Rootpanel.add() method and
In place of it we have used only draw () method.
But still we are facing issue. One more thing we can’t remove CSS because it’s required for our application.

There is difference between length of single byte and multiple byte character.
At this point you are correct and we also observe. Actually there is both horizontal and vertical scroll are appearing inside selectItem pick list.
Suppose if somehow we set the pick List height with the help of setCellHeight property but what about
Horizontal scroll bar. We can’t set fixed with for pick list (setPickListWidth).
Please let us know, how we can resolve this issue for both horizontal and vertical scroll bar in multibyte case.

Note: this issue is observed only in Edge browser and for multibyte character.

Thanks,
Vnathank

[Isomorphic]

You were unclear as to whether you really retested with your application CSS removed. Obviously, you can't simply remove the CSS entirely, but you do need to *try* removing it to see if it's part of the problem.

The horizontal scrollbar is only present because a vertical scrollbar is present when one is not expected. Using a larger pickList cellHeight should resolve both problems.

Also, it's kind of amazing that you've waited 12 days and written another long response for the forums, but haven't actually tried the recommended setting? You could save your team and our team a lot of time by reading our suggestions more closely, and then trying them out.

[vnathank]

Hi Isomorphic,

Please accept our sincere apologies for the inconvenience and delayed in response.
As we have mentioned in previous post we have tried in all possible ways whatever you suggested like:-

1. larger pickList cellHeight
2. After removing CSS
3. Replaced RootPanel.add() with draw().

But still we are getting same issue in EDGE browser. Please find the attached screen screenshot.


Thanks,
Vnathank

[Isomorphic]

It's not actually possible for a larger pickList cellHeight or fail to solve this problem.

So again - if you believe you've applied our advice, what we need to see if your exact code.

A screenshot is useless in this case. As you'll note, we request a screenshot only in specific circumstances where it makes sense; as the FAQ tells you as well. Here, as in most common circumstances, we need to see your code, so we can understand how you did not succeed in setting a cellHeight large enough to accommodate your content.

[vnathank]

Hi Isomorphic,

Thanks for your quick reply.
Attachment: TestsmartGwtProject.java
Please find the attached file. In which we have set the property “cmbTest1.setCellHeight(100)”
and changes as per our discussion.


Thanks,
Vnathank

[Isomorphic]

You have set formItem.cellHeight - see the Form Layout for what this does, or just read the docs for the method. It has nothing to do with the pickList cellHeight, which is controlled via pickListDefaults via the AutoChild system - we explicitly told you this was how to change the setting in post #8 above.