Forms' Section widths are not consistent with Forms' content width.

[michaeljseo]

PROBLEM STATEMENT
Forms with sections do not render consistently with respect to WIDTH. When the Form's layout dictates an area smaller than the Form's rendering, the Form will take up the space necessary to show the form items, and the width of the sections are not re-adjusted to the form item width.

I have attached a snapshot of the inconsistency.

CONFIGURATION

• v1[FONT=Menlo]0.1p_2015-12-18/Enterprise Deployment 2015-12-18
• [/FONT]User-Agent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:26.0) Gecko/20100101 Firefox/26.0'
  [FONT=Menlo]
• No server side warnings or errors.[/FONT]
  [FONT=Menlo]
• No JavaScript errors.[/FONT]
  [FONT=Menlo]

[/FONT]

[FONT=Menlo]EXAMPLE CODE[/FONT]
[FONT=Menlo]I modified your SmartGWT Showcase example, Form:Form Layout:Sections[/FONT]

[FONT=Menlo]The modification is the addition of a Layout that made the Form's layout area smaller than the rendering of the Form's Items.[/FONT]

[FONT=Menlo]

[/FONT]      public void onModuleLoad() {  
          
          final DynamicForm form = new DynamicForm();  
          form.setWidth(300);  
            
          TextItem itemName = new TextItem();  
          itemName.setName("itemName");  
          itemName.setTitle("Item");  
    
          TextAreaItem descriptionItem = new TextAreaItem();  
          descriptionItem.setName("descriptionItem");  
          descriptionItem.setTitle("Description");  
    
          TextItem priceItem = new TextItem();  
          priceItem.setType("float");  
          priceItem.setName("priceItem");  
          priceItem.setTitle("Price");  
          priceItem.setDefaultValue("low");  
    
          SectionItem section1 = new SectionItem();  
          section1.setDefaultValue("Item");  
          section1.setSectionExpanded(true);  
          section1.setItemIds("itemName", "descriptionItem", "priceItem");  
            
          CheckboxItem inStock = new CheckboxItem();  
          inStock.setName("inStock");  
          inStock.setTitle("In Stock");  
            
          DateItem nextShipment = new DateItem();  
          nextShipment.setName("nextShipment");  
          nextShipment.setTitle("Next Shipment");  
          nextShipment.setUseTextField(true);  
          nextShipment.setDefaultValue(256);  
            
          SectionItem section2 = new SectionItem();  
          section2.setDefaultValue("Stock");  
          section2.setSectionExpanded(false);  
          section2.setItemIds("inStock", "nextShipment");  
            
          form.setFields(section1, itemName, descriptionItem, priceItem, section2, inStock, nextShipment);  
    
  //        form.draw();  
          HLayout hl = new HLayout();
          HLayout hh = new HLayout();
          form.setWidth("10%");
          hh.setWidth("*");
          hl.addMember(form);
          hl.addMember(hh);
          hl.draw();
      }

[Isomorphic]

This is as expected and as designed. The sections size to the form's assigned width and do not try to dynamically adjust to overflowing items, which can look very strange as items are updated and change width, and also creates problems with the form correctly shrinking back down if item widths are reduced.

Typically, if this scenario is likely, you want to set the form to overflow:auto, at which point you'll see that the sections fill the form's viewport; if they extended further they'd be clipped off in an odd-looking way.