servoy 2020.6.1.3583 CCS switch

Questions
1

We try to change the ccs style form a field with button.

Goal to switch textbox_1 and textbox_2 from StyleClass ‘field tabel’ to StyleClass ‘field table’.

But all ends with StyleClass ‘field tabel’

When run onActionBut1
textbox_1 StyleClass field tabel
textbox_2 StyleClass fiels table

next onActionBut2
textbox_1 StyleClass field tabel
textbox_2 StyleClass fiels tabel

After new launch

When run onActionBut2
textbox_1 StyleClass field table
textbox_2 StyleClass fiels tabel

next onActionBut1
textbox_1 StyleClass field tabel
textbox_2 StyleClass fiels tabel

function onActionBut1(event) {
elements.textbox_1.addStyleClass(‘field tabel’);
elements.textbox_2.addStyleClass(‘field table’);
}

function onActionBut2(event) {
elements.textbox_2.addStyleClass(‘field tabel’);
elements.textbox_1.addStyleClass(‘field table’);
}

/*
// part used css file
.field
{
background-color: #FFFFFF; E1E1E1
border-style: solid;
font: 10px “Verdana”;
text-align: left;
margin: 1px 1px 1px 1px;
border-color: #60696E; 60696E
border-width: 1px 1px 1px 1px;
}
.field.table
{
background-color: #FFFFFF; E1E1E1
border-style: solid;
font: 18px “Verdana”;
text-align: left;
margin: 2px 0px 2px 0px;
border-color: #60696E; 60696E
border-width: 2px 0px 2px 0px;
}

.field.tabel
{
background-color: #FFFFFF; E1E1E1
border-style: solid;
font: 12px “Verdana”;
text-align: left;
margin: 0px 2px 0px 2px;
border-color: #60696E; 60696E
border-width: 0px 2px 0px 2px;
}
.fields
{
background-color: #FFFFFF; E1E1E1
border-style: solid;
font: 10px “Verdana”;
text-align: left;
margin: 1px 1px 1px 1px;
border-color: #60696E; 60696E
border-width: 1px 1px 1px 1px;
}*/

/**

  • @type {String}
  • @properties={typeid:35,uuid:“DBFF7466-C396-4BEF-A3B5-87B4EEE669F4”}
    */
    var result_2 = ‘The Quick Brown Fox’;

/**

  • @type {String}
  • @properties={typeid:35,uuid:“EF1E8DA4-1EC7-4E46-A9E7-A6D180D601A8”}
    */
    var result_1 = ‘dit is een test’;

/**

  • @param {JSEvent} event
  • @properties={typeid:24,uuid:“DD275C29-EB1B-4F64-833E-60187E25AFFB”}
    */
    function onActionBut1(event) {
    elements.textbox_1.addStyleClass(‘field tabel’);
    elements.textbox_2.addStyleClass(‘field table’);
    }

/**

  • @param {JSEvent} event
  • @properties={typeid:24,uuid:“21D1814B-793B-4DE2-AE5C-1A40F911C563”}
    */
    function onActionBut2(event) {
    elements.textbox_2.addStyleClass(‘field tabel’);
    elements.textbox_1.addStyleClass(‘field table’);
    }

/**

  • @param {JSEvent} event
  • @properties={typeid:24,uuid:“BA1A76DB-CC24-4EBF-9E75-13549C121C79”}
    */
    function onActionAllert(event) {
    plugins.webnotificationsToastr.success(‘geslaagd’, result_1 + new Date() );

}

/**

  • @param {JSEvent} event
  • @properties={typeid:24,uuid:“E93F0C98-8A36-41F4-A778-095B69EB9D61”}
    */
    function onActionBut3(event) {
    elements.textbox_1.removeStyleClass(‘fields tabel’);
    elements.textbox_1.removeStyleClass(‘fields table’);
    elements.textbox_2.removeStyleClass(‘fields tabel’);
    elements.textbox_2.removeStyleClass(‘fields table’);
    }

hocu_css_sample.servoy (218 KB)

2

We have found the solution

You have to remove the StyleClass before set the new one.

function onActionBut1(event) {
removeStyleClass();
elements.textbox_1.addStyleClass(‘field tabel’);
elements.textbox_2.addStyleClass(‘field table’);
}

/**

  • @param {JSEvent} event
  • @properties={typeid:24,uuid:“21D1814B-793B-4DE2-AE5C-1A40F911C563”}
    */
    function onActionBut2(event) {
    removeStyleClass();
    elements.textbox_2.addStyleClass(‘field tabel’);
    elements.textbox_1.addStyleClass(‘field table’);
    }

/**

  • @properties={typeid:24,uuid:“FF3AB442-42E4-4964-9CBC-2C11D5552AE5”}
    */
    function removeStyleClass() {
    if (elements.textbox_1.hasStyleClass(’ field tabel’)) elements.textbox_1.removeStyleClass(‘field tabel’);
    if (elements.textbox_1.hasStyleClass(’ field table’)) elements.textbox_1.removeStyleClass(‘field table’);
    if (elements.textbox_2.hasStyleClass(’ field tabel’)) elements.textbox_2.removeStyleClass(‘field tabel’);
    if (elements.textbox_2.hasStyleClass(’ field table’)) elements.textbox_2.removeStyleClass(‘field table’);

}