Announcement

Collapse
No announcement yet.
X
Collapse
  • Page of 1
  • Filter
  • Time
Clear All
new posts
Previous template Next
    #1

    Drop down list size does not change when SelectItem is resized

    SmartClient_v82p_2012-06-06
    Tested in Firefox 10, but possibly occurs in other browsers

    When displaying an error icon next to the select item, the drop-down list does not accommodate the select item length. It seems that the drop-down list length is the same as before select item was decreased in size due to the error icon.

    To replicate run the following code, click 'Submit' and open select item drop-down - you will see that it's much larger than the actual closed select item.

    <HTML><HEAD><TITLE>Copy-Paste Issue</TITLE>
    </HEAD>
    <body class="pageBackground" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" scroll="no" style="overflow:hidden">
    <SCRIPT>var isomorphicDir = "isomorphic/"</SCRIPT>
    <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_DataBinding.js></SCRIPT>
    <SCRIPT SRC=isomorphic/skins/Enterprise/load_skin.js></SCRIPT>
    <SCRIPT>

    isc.DynamicForm.create({
    width: 500,
    fields: [{
    name: "shipTo", title: "Ship to", type: "select",
    hint: "<nobr>Overnight shipping available for countries in bold</nobr>",
    valueMap: {
    "US" : "<b>United States</b>",
    "CH" : "China",
    "JA" : "Japan",
    },
    required:"true",
    showErrorIcon: "true",
    showErrorText:"false",
    getErrorHTML: function() {return "<div><img src=\"http://localhost:8777/isomorphic/system/reference/skin/images/refresh_Over.png\"></div>";}
    },
    {name: "submitBtn", title: "Submit", type: "button", click: "form.validate()"}]
    });

    </script>
    </BODY>
    </html>
    Tags: None
    #2
    showErrorText: "false" - remove the quotes, or you're passing a String not a boolean, and in JavaScript the String "false" evaluates as true when considered as a boolean value.

    Comment

      #3
      Right, I fixed the sample code, please review:

      when form is aligned to the right and select item is next to the error icon, then when you open the select item its drop down box appears longer than it should be and outside of the select item visible frame.

      <HTML><HEAD><TITLE>Select Item size issue</TITLE>
      </HEAD>
      <body class="pageBackground" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" scroll="no" style="overflow:hidden">
      <SCRIPT>var isomorphicDir = "isomorphic/"</SCRIPT>
      <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_DataBinding.js></SCRIPT>
      <SCRIPT SRC=isomorphic/skins/Enterprise/load_skin.js></SCRIPT>
      <script>
      isc.DynamicForm.create({
      width: 500,
      align: "right",
      fields: [{
      name: "shipTo",
      title: "Ship to",
      type: "select",
      valueMap: {
      "US" : "<b>United States</b>",
      "CH" : "China",
      "JA" : "Japan",
      },
      required:true,
      showErrorIcon: true,
      showErrorText:false,
      getErrorHTML: function() {return "<div><img src=\"http://localhost:8777/isomorphic/system/reference/skin/images/refresh_Over.png\"></div>";}
      },
      {name: "submitBtn", title: "Submit", type: "button", click: "form.validate()"}]
      });

      </script>
      </BODY>
      </html>

      Comment

        #4
        Honestly this seems like a very very minor quibble, and not something we'd try to correct as it would have minor performance consequences.

        Is this affecting your app or your users in some way not demonstrated here?

        Comment

          #5
          It visually affects our application in a way we cannot accept.

          We use "empty error gap" on many forms to vertically align all items. In other words, at all times we automatically display empty image of the error icon dimensions, so that when error icon is displayed it doesn't affect position of the form item.
          All select items on such form display drop down box incorrectly at all times - whether there is a validation error or not.
          We cannot accept the unprofessional look and would like to request a fix or a workaround.

          Thank you

          Comment

            #6
            Sorry, could you clarify - are you setting fake validation errors on all your items so that the extra space left by for the error message can be used for alignment purposes?

            We wouldn't regard a problem resulting from such a hack as a bug.

            Comment

              #7
              No, this is not for alignment purposes only.

              We have vertically aligned select items that always display status icon - being a validation error or valid icon. In this case, all select items are not displaying correctly.

              Maybe you can suggest a workaround

              Comment

                #8
                Again, are you applying fake validation errors to your items in order to force display of validation errors at all times, in order to introduce this icon? If so, that's a hack and we can't regard this as a bug.

                If you're introducing an icon in some other, valid way that causes misalignment, please show how this can be reproduced.

                Comment

                  #9
                  Without our 'errorIconGap' workarounds, this is still a visual issue. You may think it is of no importance, but our customers are complaining about it. Perhaps if you explain the "minor performance consequences", we can relay the message and they will possibly let it go :)

                  Build: SmartClient_v82p_2012-06-06

                  Steps:

                  1. Load the testcase and click on the dropdown. Notice that the dropdown list body is aligned with the select item.
                  2. Now click on submit. An error icon will show on the left. Click on the dropdown icon again. Notice that now the dropdown list body is offset. I've attached a screenshot.

                  Code:
                  isc.DynamicForm.create({
width: 500,
align: "right",
fields: [{
name: "shipTo", 
title: "Ship to", 
type: "select",
valueMap: {
"US" : "<b>United States</b>",
"CH" : "China",
"JA" : "Japan",
},
required:true,
showErrorIcon: true,
showErrorText:false
},
{name: "submitBtn", title: "Submit", type: "button", click: "form.validate()"}]
});
                  Attached Files

                  Comment

                    #10
                    Right, this behavior is something we definitely do not regard as a bug, in fact, we see it as desirable.

                    The drop-down select is not, in general, exactly the same size as the field it drops down from. It can autosize, and it can be configured both larger and smaller.

                    For this reason we don't think the end user would expect the dropdown to shrink in this case, and it would be cosmetically worse for it to do so in many cases, since it might cut off the text for options if someone has taken the trouble to make the field exactly match the size of the option text.

                    There is a small performance benefit to not shrinking it as well - no need to resize / redraw the DOM.

                    Comment

                      #11
                      I think the issue the customers are having is that before the validation error, it is the exact same size as the select field but once the validation error is shown, then it completely shifts for no apparent reason.

                      Comment

                        #12
                        Again, we don't think that's a bad behavior at all.

                        You previously admitted you were using empty errors as a hack to control alignment:

                        We use "empty error gap" on many forms to vertically align all items.
                        This is really why it's an issue for you.

                        Comment

                          #13
                          No. It is not. My testcase indicates that the behaviour happens even without our empty error gap implementation. The ultimate issue is that it is not consistent behaviour.

                          I sense that we are just going around in circles here, so I will just drop it and notify the customers of our inability to fix this issue.

                          Comment

                            #14
                            To clarify:

                            Yes, this behavior happens any time there is an error icon. We consider this behavior not only a non-issue, but actually more desirable than the alternative you propose, so we have no plans to make changes here.

                            We've never seen an end user complain about this behavior. As far as we can tell from your statements, the reason your end users would actually complain about this has to do with misusing the error icon for alignment purposes. If you misuse the error icon for alignment purposes then this behavior would definitely look wrong.

                            However, that's not a framework issue, and if you want to solve it, you should either use form layout features and CSS styling for alignment instead of a hack based on error icons, or ask about getting new features added to the form if you think something new should be added.

                            Comment

                            Previous template Next
                            Working...
                            X