Profound Logic Forums


https://forum.profoundlogic.com/forum/

CSS class on the combo box for a new widget

https://forum.profoundlogic.com/forum/viewtopic.php?t=2655

Page 1 of 1

CSS class on the combo box for a new widget

Posted: Thu Apr 12, 2018 9:23 pm
by 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
correctComboBox.PNG (1.05 KiB) Viewed 1347 times
What it does look like
dragAndDropComboBox.PNG
dragAndDropComboBox.PNG (2.95 KiB) Viewed 1347 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

Re: CSS class on the combo box for a new widget

Posted: Thu Apr 12, 2018 9:25 pm
by 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();
    }
  );
}

Re: CSS class on the combo box for a new widget

Posted: Mon Apr 16, 2018 12:41 pm
by 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
customcombobox.png (17.31 KiB) Viewed 1328 times

Code: Select all

text: "Combo Box"
=>

Code: Select all

text: "Custom Combo Box"
I hope this helps!

Thanks,

Re: CSS class on the combo box for a new widget

Posted: Mon Apr 16, 2018 6:28 pm
by 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

Re: CSS class on the combo box for a new widget

Posted: Mon Apr 16, 2018 8:27 pm
by 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,

Re: CSS class on the combo box for a new widget

Posted: Wed Apr 18, 2018 3:59 pm
by 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
All times are UTC-04:00
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited