CKEditor / Custom Form in "Source" mode adding "/" characters to HTML

Support - Assistance technique
1

Hey y’all

I created a small custom form and using a ‘style=“width:50px”’ tag to make the “input” tag fields fit into my table’s cells.

Everything works great outside of the DHIS custom form interface (aka just opening my HTML source code in Firefox / Edge), and DHIS works fine if I paste this code into the “Source” window of the CKEditor when making a custom form and save.

BUT if I then read the source code again in CKEditor, it will add random “/” characters to the ‘style=“width:50px”’ tags, thus the become ‘style=“width:50px//////”’ which breaks them.

Do we know why this is? Can I prevent this somehow? If my explanation was not clear, please check the quick GIF demonstrating this. I am running DHIS 2.40.3.1 on Ubuntu 24.04 and PostgreSQL 14.

Thanks!

DHIS2 CKEditor Problem

2

Hi!
This is the first time I see this happening. I will try to reproduce this issue by creating a field with the same style and see if it happens or if it will only happen with the other parts of the code…

I think it might be helpful to add a semicolon after the 5px;… but I wanted to try first.

Thanks!

3

Hi Al-Gassim,

yeah good thinking. But unfortunately CKEditor is still adding “/” despite the semicolon. This is in no way a deal breaker as I can create the html outside of DHIS and just copy and paste it in. I just have to make sure my colleagues don’t ever open the custom form in CKEditor afterwards.

Thanks!

CKEditor issue
CKEditor issue1220×462 38 KB

4

Hi @pmacmillan,

I tried adding the semicolon and when I do that it no longer breaks the in-line style code.

Alternatively, you could use internal <style></style> at the top of the HTML and create a CSS class.

<style type="text/css">.customField {
  width: 50px;
}
</style>

Then in the form instead of using inline style add the CSS class:

<input class="customField" id="s4val" name="entryfield" 
title="BCG doses" value="[BCG doses]"/>

I hope one of the options solves the issue. If it still doesn’t and the code breaks, would you share the form’s HTML code so I could investigate?

Also, thanks for reporting this. I am not sure for what reason the forward slash / is being added so I will ask to understand if it’s a bug issue or if it’s on purpose (for some sort of rendering of the form into reports, maybe?)…

Thanks!

5

Hi Al-Gissim,

unfortunately it looks like the class attribute is ignored on the input tags. No big deal. I’ll just stick with the width trick and be sure to develop outside of CKEditor to satisfy my OCD about input form widths :slight_smile:

Thanks!

6

Hi @pmacmillan

Didn’t notice that, sorry. but if you want to modify the width of all entry fields, I am sure the following would work:

<style type="text/css">
input[name="entryfield"] {
width: 50px;
}
</style>
<p>
<input id="s-val" name="entryfield" title="BCG doses" value="[BCG doses]" /></p>

If you want only specific fields, we could still use CSS to modify that using class before the input tag and then specify them using selectors.

I received some feedback about your post from the software team. You’re currently using the legacy/old maintenance app and the CKEditor is a dependency i.e. not DHIS2’s code. The focus at this point in the software roadmap is on a new maintenance app. I hope the workaround suggested above helps.

Another important point is that, custom forums are not always encouraged (but eventually depends on the use case as a whole).

Thanks!

7

Hi Al-Gassim,

I will try that when I’m back from vacation on the 17th and let you know how it goes. Again, it ain’t that big of deal as the workaround is straightforward. I also barely know CSS/HTML so thank you for the help!

And yes, I am hoping the bosses don’t decide to go with custom forms, thus I am demoing Standard, Section, and Custom forms to them and will be sure to explain the significant cons of implementing 100’s of cCustom forms which won’t work with Android and are quite time consuming to Section forms.

Thanks again!

1 Like
8

Hi
Did you get the chance to try it out? Thanks!