Announcement

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

    dynamic form sizing

    Hi - I am having a difficult time trying to figure out why my sizing does not work and I have narrowed it down to dynamic forms. Below I have a simple sample of a vertical layout. I have set my width to be 486px. Then I add a dynamic form with column widths that add up to what I have specified as the width of the form. When I run this sample and I use firebug to determine the size of the vertical layout, it has grown to 494px. My question is why? Is there padding somewhere that I cannot see? Clearly the form should not take that much room based on my setup. Once I remove the form and only have the button, the vertical layout retains the size I have specified (486px).

    My second question (not as important) - "fixedColWidths" from what I can understand tells you to use the column widths that I have specified but I do not see this happening unless I put "width: '*'" for each form item. Why is that?


    I am using SmartClient_v83p_2013-08-15_PowerEdition
    I also tried with :
    SmartClient_v90p_2013-11-20\smartclientSDK

    Code:
    <HTML><HEAD><TITLE>Test Show All</TITLE>
    
    <HTML><HEAD><TITLE>Test Show All</TITLE>
        
    </HEAD>
    <body class="pageBackground" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" scroll="no" style="overflow:hidden">
    
    
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    
    <SCRIPT>var isomorphicDir = "isomorphic/"</SCRIPT>
        <SCRIPT SRC=/isomorphic/system/modules/ISC_Core.js></SCRIPT>
        <SCRIPT SRC=/isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
        <SCRIPT SRC=/isomorphic/system/modules/ISC_Containers.js></SCRIPT>
        <SCRIPT SRC=/isomorphic/system/modules/ISC_Grids.js></SCRIPT>
        <SCRIPT SRC=/isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    		<SCRIPT SRC=/isomorphic/system/modules/ISC_FileLoader.js></SCRIPT>
        <SCRIPT SRC=/isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
    	<SCRIPT SRC=/isomorphic/skins/Mobile/load_skin.js></SCRIPT>
    
    
    <SCRIPT>
    isc.VLayout.create({width: 486,members:[
    isc.DynamicForm.create({
        ID: "exampleForm",titleOrientation: "top",
    fixedColWidths:true,
        colWidths: [150,150,50,50],width: 400,
    numCols: 4,
        fields: [
            {name: "username",
             title: "Username",
             type: "text",
             required: true,
    		 width:"*",
             defaultValue: "bob"
            },
            {name: "email",
             title: "Email",
             required: true,
             type: "text",
             defaultValue: "bob@isomorphic.com"
            },
            {name: "password",
             title: "Password",
             required: true,
             type: "password",
    		 width:"*"
            },
            {name: "password2",
             required: true,
             title: "Password again",
    		 width:"*",
             type: "password"
            }
        ]
    }), isc.Button.create({title:"test"})]});
    
    </script>
    <p>
    
    
    </BODY>
    </html>

    #2
    Your titles (eg "Password:") are too wide for the specified column width, and you haven't enabled clipping of titles.

    fixedColumnWidths means the columns will never be *smaller* than the sizes you specify. If you put a TextItem, whose default width is 150 in most skins, into a column you've specified as width:50, it's still going to render at 150 pixels. Setting width:"*" causes it to fill the column instead, as doc'd.

    Comment


      #3
      gotcha...and instead of specifying cellPadding as a whole, is there any way to just specify padding-right/padding-left for the form?

      Comment


        #4
        If you mean padding outside all columns, that's just dynamicForm.padding (like any other widget). Or do it via a CSS style applied to dynamicForm.styleName.

        Comment


          #5
          No that's not what I meant - see for example the attached from earlier. I have the text field for username, some space, then the text field for password.

          If I change cellPadding on the dynamic form, it will change the padding to the right, left, top and bottom of each field. I don't want to do that. I just want to change the padding in between the end of the username field and the begging of the password field (or whatever field is after it).

          Comment


            #6
            You can apply some additional padding via a CSS cellStyle, or, you can introduce another column and add a SpacerItem.

            Comment

            Working...
            X