DynamicForm.fixedColWidths

[acarur01]

I'm having trouble understand what fixedColWidths is supposed to be used for. I have two forms, both having colWidths:["240","240","240","240"], width:960, fixedColWidths:false property set. My problem is, with the first one, you can see by using jsConsole that it uses the width specified as 960, whereas the second form grows to 977. When I change the first form's fixedColWidths to true, then it becomes the same width as the second one. What exactly is the difference? I want both forms to behave the same.

Sorry for the "not so clean" code - I didn't want to leave anything out.

isc.HLayout.create({ID:"hLayoutWrapgroupGrid1",members:
[isc.DynamicForm.create({width:960,height:1,fixedColWidths:false,ID:"groupGrid1",name:"groupGrid1",
styleName:"fittedSimpleBorder",title:" ",canHover:true,numCols:4,
titleSuffix:"&nbsp;",rightTitlePrefix:"&nbsp;",requiredTitleSuffix:"*<\/B>",requiredRightTitleSuffix:"*<\/B>",
requiredRightTitlePrefix:"<B> ",colWidths:["240","240","240","240"],titleOrientation:"top",
fields:
[{title:"<nobr>AO ID&nbsp;<\/nobr>",colSpan:"1",width:"*",ID:"aoId",name:"aoId",$cwname:"model.aoId",
errorIconSrc:"\/cwf\/r\/cwfv\/error.png",_constructor:"TextItem"},{title:"<nobr>AO Details Info&nbsp;<\/nobr>",
colSpan:"2",width:"*",ID:"aoDetailsInfo",name:"aoDetailsInfo",$cwname:"model.aoDetailsInfo",errorIconSrc:"\/cwf\/r\/cwfv\/error.png",
_constructor:"TextItem",cwmask:"\\d\\d. ..........................................",hint:"##*\' \'******************************************",
showHintInField:true,cwShowHintInField:true},{title:"<nobr>Links to share directory&nbsp;<\/nobr>",showTitle:false,width:"*",colSpan:"1",
startRow:true,ID:"a21Label",name:"a21Label",defaultValue:"Links to share directory",wrap:true,_constructor:"StaticTextItem",
isFirstFocusable:false},{styleName:"cwfComputedField",showTitle:false,cellStyle:"cwfComputedField",colSpan:"1",width:"*",ID:"String",
name:"String",defaultValue:"",startRow:false,_constructor:"LinkItem"}]
})],width:960,height:1});

isc.HLayout.create({ID:"hLayoutWrapgroupGrid",top:100,members:
[isc.DynamicForm.create({width:960,height:1,fixedColWidths:false,ID:"groupGrid",name:"groupGrid",
styleName:"fittedSimpleBorder",title:"&nbsp;",canHover:true,numCols:4,
titleSuffix:"&nbsp;",rightTitlePrefix:"&nbsp;",requiredTitleSuffix:"*<\/B>",requiredRightTitleSuffix:"*<\/B>",requiredRightTitlePrefix:"<B> ",colWidths:["240","240","240","240"],titleOrientation:"top",backgroundColor: "yellow",
fields:
[{title:"Order Header&nbsp;",isFirstFocusable:false,showSaveValue:false,ID:"orderHeaderHeader1",name:"orderHeaderHeader1",defaultValue:"Order Header",showValidation:"true",_constructor:"HeaderItem"},{title:"<nobr>Order ID&nbsp;<\/nobr>",colSpan:"1",width:"*",ID:"cwOrderId",name:"cwOrderId",$cwname:"model.cwOrderId",showFocused:false,cwTrueDisabled:true,
"change":function(){return false;}
,errorIconSrc:"\/cwf\/r\/cwfv\/error.png",_constructor:"TextItem"},
{title:"<nobr>Product Offer Name&nbsp;<\/nobr>",colSpan:"2",width:"*",ID:"prodOfferName",name:"prodOfferName",$cwname:"model.prodOfferName",errorIconSrc:"\/cwf\/r\/cwfv\/error.png",length:50,_constructor:"TextItem"},
{title:"<nobr>Product Offering ID&nbsp;<\/nobr>",colSpan:"1",width:"*",ID:"prodOfferExternalId",name:"prodOfferExternalId",$cwname:"model.prodOfferExternalId",errorIconSrc:"\/cwf\/r\/cwfv\/error.png",
cwActualLength:10,type:"cwinteger",_constructor:"TextItem"}]})],width:960,height:1})

[acarur01]

Ok. I've narrowed it down to the fields. If I have three fields in the first row, then the form grows to 977, otherwise it keeps the 960px width. How do I make the form keep its 960px width in both cases?

[acarur01]

Any suggestions/concerns/etc?

[Isomorphic]

Sorry, we thought by your previous post that you meant you had solved it.

We're seeing the second form render at 960 too in a standard environment, so you may have external CSS or skin customizations creating a problem.

Note that your colWidths are Strings and should be integers.

If you need to follow up again, please don't post generated code.

[acarur01]

My second post ended with a question mark :)

Anyway, you're right I do have an external css but I decided to test with the 5-26 build and I don't see the issue any longer. I was previously testing with 12-15. BTW, any release dates for 8.1 yet?

.fittedSimpleBorder{
border-style:solid;
border-width:1px;
padding-top:5px;
padding-bottom:5px;
padding-right:5px;
padding-left:5px;
margin: 5px; 
}

[acarur01]

I am still having issues with this and it looks like it is my css that is causing the problem, but I am unsure why since the two forms are both using the same style. Please help.

isc.HLayout.create({ 
    ID: "hLayout1",
    width: 960, height: 1,
    members: 
    [ 
    isc.DynamicForm.create({
      width: 960, height: 1,
      numCols: 4, colWidths:[240,240,240,240],
      styleName:"fittedSimpleBorder",
      backgroundColor: "lightblue",
//      fixedColWidths: false,
      fields: [
        {title: "Field_1", type: "text",
         width: "*", colSpan: 1,
         titleOrientation:"top"
        },
        {title: "Field_2", type: "text",
         width: "*", colSpan: 2,
         titleOrientation:"top"
        }
    ]})]});

isc.HLayout.create({ 
    ID: "hLayout2",
    width: 960, height: 1, top : 100,
    members: 
    [ 
    isc.DynamicForm.create({
      width: 960, height: 1,
      numCols: 4, colWidths:[240,240,240,240],
      styleName:"fittedSimpleBorder",
      backgroundColor: "yellow",
      fields: [
        {title: "Field_1", type: "text",
         width: "*",colSpan: 1,
         titleOrientation:"top"
        },
        {title: "Field_2",type: "text",
         width: "*", colSpan: 2,
         titleOrientation:"top"
        },
         {title: "Field_3",
         type: "text",
         width: "*",colSpan: 1,
         titleOrientation:"top"
        } 
]})]})

CSS:

.fittedSimpleBorder{
border-style:solid;
border-width:1px;
padding-top:5px;
padding-bottom:5px;
padding-right:5px;
padding-left:5px;
margin: 5px; 
}

[Isomorphic]

Do you really need both margins and padding here? We're not sure of the specific cause, but the interaction between cellPadding, CSS padding, cellSpacing and CSS margins is poorly specified in older CSS specs, and there's a lot of browser variation in behavior here.

[acarur01]

the margin value is only there because we had problems in Firefox where the end of the textbox would almost touch the border around the grid layout

[acarur01]

OK. So I tried with just margin specified, didn't work. Tried with just padding specified and it didn't work either. The only way it works is if I remove everything except the border style

[Isomorphic]

What's going on is that the exterior space for the form is 960, but the space available for the columns is 960 - (margins+padding). Your columns need to fit in this interior space, but you've explicitly specified the pixel width for every column and it sums to 960.

Generally you want to leave one or more of the colWidths specified as "*" so you don't have to make everything sum exactly.