CSS class on the combo box for a new widget

[jjbreece]

Hello,

I am creating new widgets and for the combo box, it appears that it is resetting the css class that I want with the default.

combo box widget JavaScript code

Code: Select all

pui.toolbox.add({
  category: "Input Controls",
  widget: "combo box",
  text: "Combo Box",

  proxyHeight: 226,
  proxyWidth: 325,
  proxyHTML: '<div id="P1OPT.1" class="win-combo-option" style="position: absolute; left: 5px; top: 4px; background-color: rgb(255, 255, 255); overflow: hidden; border: 1px solid rgb(127, 157, 185); height: 25px; width: 125px;"><input type="text" autocomplete="off" class="win-combo-option" name="undefined" maxlength="2" style="position: absolute; border: 0px none; top: 0px; left: 1px; padding-top: 1px; font-family: "Trebuchet MS"; font-weight: normal; outline: none; width: 104px;"><img src="/profoundui/proddata/images/combo/down_arrow.gif" style="position: absolute; top: 0px; right: 0px; width: 18px; height: 20px;"></div>',

  defaults: {
    "value":"Combo Box",
    "css class": "win-combo-optio",
    "width": "125px"
  }
});

Relevant CSS

Code: Select all

.win-combo-option {
 background-color: #fff  !important;
 border-color: #ccc !important;
 color: #373737;
 font-weight: 700;
 height: 34px !important;
 border-radius: 4px;
}

div.combo-option {
  background-color: #fff !important;
}

.win-combo-option:after {
  color: #373737;
  font-family: "FontAwesome";
  content: "\F078";
  font-size: 21px;
  top: 0px;
  right: 2px;
  position: absolute;
  cursor: pointer;
  z-index: 111;
  padding: 5px;
}

.win-combo-option > input {
  width: 100% !important;
  height: 25px !important;
  padding: 3px 0px 3px 12px !important;
  font-size: 13px;
  font-family: "Open Sans", sans-serif !important;
}
.win-combo-option > img {
  visibility: hidden;
}

.combo-option-select {
  background-color: #cfe9ff;
  background-image: none;
  font-size: 13px;
  padding: 1px !important;
}

.combo-option {
  padding: 1px !important;
  font-size: 13px;
}

.combo-options {
  border: 1px solid #ccc;
  padding: 5px !important;
  background-color: #fff;
}

What it should look like is

correctComboBox.PNG (1.05 KiB) Viewed 1344 times

What it does look like

dragAndDropComboBox.PNG (2.95 KiB) Viewed 1344 times

HTML the incorrect one generates:

Code: Select all

<div id="ComboBox2" style="position: absolute; left: 85px; top: 270px; border: 1px solid rgb(127, 157, 185); cursor: default; width: 125px; background-color: rgb(255, 255, 255); overflow: hidden; height: 20px;" class="input"><input type="text" autocomplete="off" class="input" name="undefined" readonly="" style="position: absolute; border: 0px none; top: 0px; left: 1px; padding-top: 1px; font-family: "Trebuchet MS"; font-weight: normal; outline: none; cursor: default; width: 104px;"><img src="/profoundui/proddata/images/combo/down_arrow.gif" style="position: absolute; top: 0px; right: 0px; width: 18px; height: 20px;"></div>

As you can see, it is forcing the class to .input
If I remove the CSS class and add back on the class of .win-combo-option everything works as I expect it to. Is there somewhere else I need to make a change?

Thanks,
Jon

[jjbreece]

It may also be worth noting that I am adding a javascript function to the onload event to get the click event to work as expected.

Code: Select all

wob.addComboBoxEvents = function () {
  $('div.win-combo-option').off('click.comboBoxOpenClose').on('click.comboBoxOpenClose',
    function(event) {
      if ($(this).hasClass('win-combo-option-open')) {
        this.comboBoxWidget.hideChoices();
        $(this).removeClass('win-combo-option-open');
      }
      else {
        $('div.win-combo-option').each(function () {
          this.comboBoxWidget.hideChoices();
          $(this).removeClass('win-combo-option-open');
        });
        this.comboBoxWidget.showChoices();
        $(this).addClass('win-combo-option-open');
        $(document).off('click.clearComboBoxClass').on('click.clearComboBoxClass',
          function(e) {
            $('.win-combo-option-open').removeClass('win-combo-option-open');
            $(document).off('click.clearComboBoxClass');
          }
        );
        $('.combo-option').off('click.clearComboBoxClassOptions').on('click.clearComboBoxClassOptions',
          function(e) {
            $('.win-combo-option-open').removeClass('win-combo-option-open');
            $('.combo-options').off('click.clearComboBoxClassOptions');
          }
        );
      }
      event.stopPropagation();
    }
  );

  $('div.win-combo-option>input').off('click.comboBoxPrevent').on('click.comboBoxPrevent',
    function(event) {
      event.stopPropagation();
    }
  );
}

[Megan]

Hello Jon,

After reviewing your code, I noticed that you did not give your custom combo box a unique name, meaning that it will have the same name as the standard combo box. This addition to the toolbox does not overwrite the standard combo box we provide, it instead appends it to the list. Can you please confirm that you are dragging out the correct combo box? You may also want to give your combo box a unique name by change the "text" property to prevent confusion between custom widgets and standard widgets.

customcombobox.png (17.31 KiB) Viewed 1325 times

Code: Select all

text: "Combo Box"

=>

Code: Select all

text: "Custom Combo Box"

I hope this helps!

Thanks,

[jjbreece]

Megan,

I updated the code to

Code: Select all

pui.toolbox.add({
  category: "Input Controls",
  widget: "combo box",
  text: "Win Combo Box",

  proxyHeight: 226,
  proxyWidth: 325,
  proxyHTML: '<div id="P1OPT.1" class="win-combo-option" style="position: absolute; left: 5px; top: 4px; background-color: rgb(255, 255, 255); overflow: hidden; border: 1px solid rgb(127, 157, 185); height: 25px; width: 125px;"><input type="text" autocomplete="off" class="win-combo-option" name="undefined" maxlength="2" style="position: absolute; border: 0px none; top: 0px; left: 1px; padding-top: 1px; font-family: "Trebuchet MS"; font-weight: normal; outline: none; width: 104px;"><img src="/profoundui/proddata/images/combo/down_arrow.gif" style="position: absolute; top: 0px; right: 0px; width: 18px; height: 20px;"></div>',

  defaults: {
    "value":"Combo Box",
    "css class": "win-combo-option",
    "width": "125px"
  }
});

However, I am still running into the same issue.

Thanks,
Jon

[Megan]

Hello Jon,

I am not sure why your class is not being applied when you add it to the grid, but having tested it here, the runtime version should be correct if the css class property is correct. A way you can check to make sure it will apply properly is to use Preview Mode or go to the css class property, add a space or some other change, and press enter to update the combo box css. I will talk with our developers to determine what can be done about this bug.

I hope this helps!

Thanks,

[jjbreece]

Megan,

Yes, the runtime version appears to be correctly adding in the CSS class specified. Please keep me updated on anything else you find out on the designer issue.

Thanks,
Jon