setWidth100 doesn't discount vertical scrollbar width

[deepfriedbrain]

I'm running into a very basic issue with Layouts. I searched the forum but couldn't find a post on the issue.

I've created a standalone case to demonstrate the problem, and attached some screenshots.

Problem Description:

I have VLayout with both width and height set to 100%. Lets say the size of the window is 1000 x 600 and the size of the layout content is 600 x 800. In this case, only a vertical scroll bar is needed. However, I get an unnecessary horizontal scroll bar also in both FF 3.6.2 and Chrome 7x. But believe it or not, it works fine in IE 7, which shows only the vertical scroll bar. Refer to the screenshots of all three browsers.

I think the problem in FF and Chrome is that they don't discount the size of the vertical scroll bar in calculating the available width of the window.

Code:

VLayout rootVLayout = new VLayout();
rootVLayout.setWidth100();
rootVLayout.setHeight100();  
rootVLayout.setOverflow(Overflow.VISIBLE);

TabSet testTabSet = new TabSet();        
testTabSet.setTabBarPosition(Side.TOP);  
testTabSet.setWidth(600);
testTabSet.setHeight(800);           

Tab testTab = new Tab("Test");    
testTabSet.addTab(testTab);

rootVLayout.addMember(testTabSet);
rootVLayout.draw();

Additional info:

I can get around the problem by setting overflow to AUTO. But that hides the browser's native scroll bar and replaces it with the widget's scroll bar (refer to the screenshot named Chrome_WidgetScrollBar.jpg). Usually it's not a problem, but it causes issues on iPhone. I see the extra scroll bar from the application, instead of just using the Safari's native scrollbar.

Another workaround is to set the width to 95% instead of 100%. That's acceptable to some level.

Is there a proper way to fix this issue? Am I the only one getting this issue? Am I doing something wrong? I'll appreciate any help.

Thanks.

[alan.hayes]

Try to use this:

layout.setLeaveScrollbarGap(true);

This will leave a gap on the right for the vertical scrollbar.

[deepfriedbrain]

Hello Alan,

Thanks for your response. I really appreciate your help. I was busy with other things and didn't get a chance to reply earlier.

I had tried your suggestion before, but it didn't work. I tried it again today and captured the screenshots.

setLeaveScrollbarGap(true) simply reduces the width available for the content of the layout, and leaves a gap for the scrollbar. That gap is simply replaced by empty space. The horizontal scrollbar still appears.

Refer to the 2 screenshots - With and Without-setLeaveScrollbarGap-true.png

Am I missing something? Is there anything else I can try to get around this issue?

I tried using the GWT root panel and it didn't have this problem. So, the problem seems to be with SmartGWT Layout widget.

Thanks.

[alan.hayes]

It looks like the horizontal scrollbar is not attached to the panel you are adjusting, but the parent panel. Try setting the parent panel's overflow to AUTO:

layout.setOverflow(Overflow.AUTO);

[deepfriedbrain]

Hello and thanks once again Alan.

I have the overflow set to VISIBLE on the parent window. I had also tried setting overflow to AUTO earlier:

rootVLayout.setOverflow(Overflow.AUTO);

That solved my problem, but presented another issue. If you refer to my original post above, I've mentioned that under the "Additional info" section.

By setting overflow to AUTO, I get the widget's scrollbar, instead of the native browser scrollbar. That's not an issue as long as the application is used on a desktop or notebook, but I had problems with it when using the app on a smartphone (iPhone specifically). It's pretty late here in Singapore. I'll send you some screenshots from iPhone tomorrow.

Particularly because of the issues on iPhone, I set the overflow to VISIBLE, and prefer to have the browser scrollbar.

I want to reiterate 2 things about this issue:

1. It works fine if I use GWT's RootPanel, but not with SmartGWT's Canvas (with width set to 100%).
2. It works fine in IE 7 and 8, but not in Firefox 3.6 and Chrome 7x, 8x.

Thanks.

[Isomorphic]

You can create this problem by have external CSS in your project - see the FAQ item on this.

[deepfriedbrain]

Hello Isomorphic,

Thanks for your response.

I read the FAQ section that you were referring to. To eliminate all doubts, I created a new project with no external CSS and found that the problem still exists. Following are the steps that I performed, and attached screenshot shows the output.

1. Created a new project.

2. Removed the GWT Standard Theme and inherited SmartGwtNoTheme.

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='testscrollbar'>
  <!-- Inherit the core Web Toolkit stuff.                        -->
  <inherits name='com.google.gwt.user.User'/>

  <!-- Inherit the default GWT style sheet.  You can change       -->
  <!-- the theme of your GWT application by uncommenting          -->
  <!-- any one of the following lines.                            -->
  <!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->
  <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
  <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->

  <!-- Other module inherits                                      -->
  <inherits name="com.smartgwt.SmartGwtNoTheme"/>

  <!-- Specify the app entry point class.                         -->
  <entry-point class='com.dfb.test.client.TestScrollbar'/>

  <!-- Specify the paths for translatable code                    -->
  <source path='client'/>
  <source path='shared'/>

</module>

3. The EntryPoint looks like this:

package com.dfb.test.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.widgets.layout.VLayout;

public class TestScrollbar implements EntryPoint {

    public void onModuleLoad() {
        
        VLayout rootVLayout = new VLayout();
        VLayout mainVLayout = new VLayout();

        rootVLayout.setWidth100();
        rootVLayout.setHeight100();
        rootVLayout.setOverflow(Overflow.VISIBLE); 
        
        mainVLayout.setWidth(500);
        mainVLayout.setHeight(1000);  
        mainVLayout.setBackgroundColor("blue");
        mainVLayout.setLayoutAlign(Alignment.CENTER);
        rootVLayout.addMember(mainVLayout);
        rootVLayout.draw();
    }
}

4. Currently I'm using GWT 2.0.4, SmartGWT 2.3 nightly build from 11/24, Firefox 3.6.12, Window XP Professional SP3. As I mentioned, the problem exists in Chrome also, but IE 7, 8 work fine.

You can see the unnecessary horizontal scrollbar in the attached screenshot.

I think I've covered most of the points from that FAQ section. Is there anything else I can try?

[deepfriedbrain]

One more update:

As I had mentioned earlier, using GWT RootPanel instead of SmartGWT's VLayout resolves the problem.

package com.dfb.test.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.smartgwt.client.widgets.layout.VLayout;

public class TestScrollbar implements EntryPoint {

    public void onModuleLoad() {
        
        VLayout mainVLayout = new VLayout();
        
        mainVLayout.setWidth(500);
        mainVLayout.setHeight(1000);  
        mainVLayout.setBackgroundColor("blue");
        
        RootPanel.get().add(mainVLayout);
    }
}

Refer to the screenshot. There's no unnecessary horizontal scrollbar this time.

[Isomorphic]

This could be to do with the page's doctype
Do you have a doctype specification at the top of your bootstrap HTML file? If so - does removing that resolve this issue?

- And if so please let us know what your doctype setting was so we can look into why it should be causing problems!

Thanks
Isomorphic Software

[deepfriedbrain]

Hello Isomorphic,

Thanks for your response.

I did have a doctype specification in the HTML, but removing it didn't make any difference. Here's the complete HTML (before and after removing the doctype setting).

BEFORE:

<!doctype html>
<!-- The DOCTYPE declaration above will set the    -->
<!-- browser's rendering engine into               -->
<!-- "Standards Mode". Replacing this declaration  -->
<!-- with a "Quirks Mode" doctype may lead to some -->
<!-- differences in layout.                        -->
<html>
  <head>
    <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="TestScrollbar.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 type="text/javascript" language="javascript" src="testscrollbar/testscrollbar.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>
  </body>
</html>

AFTER:

<html>
  <head>
    <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="TestScrollbar.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 type="text/javascript" language="javascript" src="testscrollbar/testscrollbar.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>
  </body>
</html>

I'm just curious whether this simple example is working fine at your end and it's something wrong with my setup.

BTW, I used Eclipse (v 3.5.1) with the GWT Plugin to create the new test project. The only things I changed are mentioned in my posts above, plus I removed everything from the default TestScrollbar.css file.

Thanks.

[deepfriedbrain]

Finally, I've got some good news to share.

The problem indeed got resolved on Firefox 3.6 after removing the doctype setting, but it still exists in Chrome 8x. In my previous post I said it wasn't working because I tested it in Chrome 8x only.

Following the recommendation in the FAQ (on Chrome issues), I did a full compile of the project and retested it, but the problem did NOT go away on Chrome.

1. Is there anything I can do to have this fixed on Chrome?
2. Are there any potential issues with changing the doctype from Standards to Quirks mode (default mode when no doctype is specified)?

Thanks for all your help.

[Isomorphic]

That's good to hear, and the fact that it's a Chrome only issue in backcompat mode is very useful info - we now see the bad behavior.
We're taking a look now to see if we can determine the cause and will keep you posted.

In answer to the other question: you should be fine running in backcompat / quirks mode rather than standards mode.

[Isomorphic]

Ok - this should be resolved in the next nightly build.

Thanks
Isomorphic Software

[deepfriedbrain]

Isomorphic - Thanks a lot for patiently working with me, and a super quick turnaround in getting this resolved. I'll download the latest nightly build tomorrow and test it on Chrome.

Thanks to Alan as well for reviving this thread. I had lost hope of getting a solution until he pitched in.

[deepfriedbrain]

Hi,

I installed the nightly build of 12/17/2010 (SmartGWT 2.3 LGPL), and noticed that the problem still exists in Chrome.

These are the steps I performed:

1. Updated the build path to point to the new smartgwt.jar.
2. Recompiled the project.
3. Cleared the (Chrome) browser cache, closed all browser windows, restarted the browser, and tested the application.

Did I miss something?

Thanks.