Changing CSS Property at runtime

[mrcarver]

CG Gurus,

I am seeing a problem with the dynamic changing of CSS controls. Please review below, and recommend how to resolve the dynamic assignment of CSS. What is of particular interest is how to control inner and outer class of divs. Note, pressing F5 fixes the problem.

Scenario:

I have a CGWizard with about 15 tabs, which with all tabs contains about a 100 controls. In the on render event each of these controls are set with their respective CSS styles as read from the DB. In the OnChanging event of the CGWizard, the data for the respective control is loaded from the DB.

So, far so good. Note that styles added in the OnRender (or with an AjaxReRender) appear in the outer div. So see for example the "req" css style in the attachment.

StyleInOuterDiv.PNG

So now for the problem, when changing the CSS after render, the style is managed asynchronously,which is appreciated. However the style gets inserted into the inner div. See for example in the following attachment, we see the "req" css was assigned in onRender,. But because this CG object is required, and the text was blank, the "cc-error" style was added, and because it did not not find the "req" flag it was added as well. Which should not have, because it existed in the Outer div, but the when compared against memoAppID_01.css the 'req" was not found. Apparently it internally checks against the inner div.

StyleInOuterAndInnerDiv.PNG

This results in the following image:

DuplicateCss.PNG

Note, the control in this example is the TIWCGJQMemoEx, a similar problem exists with the TICCGJWDropDown.

DropDown OnRender:

DupCSSOnRenderDropDown.PNG

After Async changing of css:

DupCSSOnAsyncDropDown.PNG

[Alexander Bulei]

Hi mrcarver,

So now for the problem, when changing the CSS after render, the style is managed asynchronously,which is appreciated. However the style gets inserted into the inner div. See for example in the following attachment, we see the "req" css was assigned in onRender,. But because this CG object is required, and the text was blank, the "cc-error" style was added, and because it did not not find the "req" flag it was added as well. Which should not have, because it existed in the Outer div, but the when compared against memoAppID_01.css the 'req" was not found. Apparently it internally checks against the inner div.

Please explain better this part...who is assigning the req & cc-error classes?
The Css property of MemoEx will add to the inner control, in this case, the textarea.
You need to add the class to the container(div)?

Best Regards.

[GerritS]

Hi Alexander,

I'm experiencing the same problem. I have a very simple input form with a IWCGJQMemoEx and two IWCGJQDropDown on it. They get a CSS, like for instance 'memofield'.

When I check the contents before allowing the user to close the form I add a 'fielderror' to the CSS if the field is incorrect, thus getting a CSS of 'memofield fielderror'. The fielderror part just adds a background-color. After assigning this new CSS in runtime, the memo is jumping off the form, because the inner part (the textarea) gets suddenly the same CSS as the Memo itself. So when the memo itself was positioned (absolute) at 100,100, the textarea is, after giving it a CSS at runtime (even if it's the same CSS), positioned op 100,100 from the memo and will be at 200.200.

If you wish, I have a simple example where I have a TIWMemo which jumps as expected and a TIWCGJQMemoEx which jumps (in two parts !) as described.

After posting I noticed the original message is from 2017 ?

Best regards,
Gerrit

[Alexander Bulei]

Hi GerritS,
What is your IW version?
Please visit the download section and check the recommended IW version for 15.1.x, due the ajax render issues with < 15.1.12

Best Regards.

[GerritS]

Hi Alexander,

After updating to 15.1.15 (both Intraweb and CGDevtools), recompiling and copying the new wwwroot, I still have the same problems. I will send you a simple example project.It shows the differences between a IWMemo and a IWCGJQMemoEx component.

Best regards,
Gerrit