Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-2929

Combobox's dropdown popup can extend its width automatically to eliminate the horizontal scrollbar

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Major Major
    • 7.0.7
    • 7.0.6.1
    • None
    • Security Level: Jean
    • None
    • ZK 7.0.7

      When a Combobox's data comes from its model, its drop-down popup's width cannot be determined before it's rendered. The model's data is dynamic, users cannot determine the length of data to set a Combobox's width.

      Although a Combobox will slightly increase the drop-down's width after first open, the horizontal scrollbar still displays because the vertical scrolling bar takes some width after sliding down the pop-up.
      1st open

      2nd open

      Example

              <zscript><![CDATA[
                  void loadData() {
                      if (combobox.getItemCount() != 0) {
                      	combobox.getItems().clear();
                      }
                      for (int i = 0; i < 100; i++) {
                          Comboitem item = new Comboitem();
                          item.setLabel("" + i);
                          int len = (int) (Math.random() * 10);
                          StringBuffer description = new StringBuffer();
                          description.append(len);
                          description.append(' ');
                          for (int j = 0; j < len; j++) {
                              description.append("text ");
                          }
                          item.setDescription(description.toString());
                          item.setHflex("min");
                          combobox.appendChild(item);
                      }
                  }
                  ]]></zscript>
              <combobox readonly="true" id="combobox" onOpen="loadData()" />
      

      Expected result

      No horizontal scrollbar appears.

      Workaround

      To extend the drop-down's width after opening.

      zk.afterLoad('zul.inp', function() {
          var _xCbx = {};
          zk.override(zul.inp.Combobox.prototype, _xCbx, {
              _afterSlideDown: function(n) {
                  _xCbx._afterSlideDown.apply(this, arguments);
                  if (zk(n).hasVScroll()) {
                      var w = n.offsetWidth;
                      n.style.width = jq.px(w + jq.scrollbarWidth());
                      console.log(w+'+'+jq.scrollbarWidth());
                      //n.style.width = jq.px(w + 50);
                  }
              }
          });
      });
      

        1. 1st.png
          1st.png
          30 kB
        2. 2nd.png
          2nd.png
          29 kB

            wenninghsu wenninghsu
            hawk hawk
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 6 hours
                6h