Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    VLayout setWidth does not working correctly

    Hi folk,
    I am using:
    smartGWT 2.5
    firefox: 6
    No errors in the GWT Development mode console or JS error
    I made simple application to demonstrate the bug.
    JAVA code
    Code:
    public class TEST_MIN_WIDTH implements EntryPoint {
    
    	public void onModuleLoad() {
    		VLayout vLayout = new VLayout();
    //Setting the color of the vlayout to Blue
    		vLayout.setBackgroundColor("#0000FF");
    		vLayout.setWidth("100%");
    		vLayout.setHeight("100%");
    		vLayout.setHtmlElement(DOM.getElementById("htmlDiv"));
    		vLayout.draw();
    	}
    }
    HTML source code
    Code:
    <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="TEST_MIN_WIDTH.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="test_min_width/test_min_width.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>
    <div width="100%" height="100%" id="htmlDiv" class="min-width">
    </div>
    
      </body>
    </html>
    CSS
    Code:
    .min-width {
    	min-width: 1024px;
    	min-height: 768px;
    	background-color: red;
    }
    Also you can download the full application from:
    http://hotfile.com/dl/132186078/9824297/MIN_WIDTH.rar.html


    When resizing the browser to less than 1024 px which is the minimum width of the div tag the browser scroll bar appears which is good but when moving the scroll bar to the right you will notice that the vLayout (blue color) does not take 100% of its parent which is in this case the div tag (red background).

    I attached a pic for the bug.
    Attached Files

    #2
    The Same Issue , wait Isomorphic to reply !!

    Comment


      #3
      WOOOOOOOOOW I have the same issue exactly

      Comment


        #4
        Smart GWT component percentage widths are derived from the width of the browser viewport (for top level components), or the parent component (for children components nested inside parent components). Not from the size of the htmlElement into which they've been rendered.

        Comment

        Working...
        X