this is a custom form for an event program i have created using HTML CSS and javascript but the dropdown are options created in dhis so due to the long text of the options in the dropdown a user cannot see the whole text and I tried to make adjustments in my CSS and javascript so that the text can wrap and use the available space it didn’t work. another alternative I used to create a tooltip where a user can hover mouse a see the whole text still the some nothing works. here is a code snippet of my custom form
I’m wondering if it’s better to use the other form display options such as sections and why custom is necessary as it won’t be useable in Data Entry (beta) app and might not work perfectly when creating reports. I just thought to be sure you are aware of that.
Yes, the code snippet would help, but it seems that it didn’t get pasted, please check. Thanks!
You will have to modify the dropdown CSS … I can make suggestions when you share the code snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
td {
padding: 8px;
border: 1px solid #ccc;
}
.long-input {
width: 100%; /* Make the input take the full width of the cell */
box-sizing: border-box; /* Ensure padding and border are included in the width */
min-width: 300px; /* Ensure a minimum width */
}
.tooltip {
display: none;
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
padding: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
max-width: 300px;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="3" style="background-color: white">Strategic Planning</td>
<td>
Availability Of Strategic Plan With Clear Vision, Mission,
Organisational Structure and Budget Proposal In Strategic Plan
</td>
<td>LM Input 1</td>
<td>
<input
id="zFUEa4j0QWk-h41Du2k5Git-val"
name="entryfield"
class="long-input"
title="QA_Availability Of Strategic Plan With Clear Vision, Mission, Organisational Structure and Budget Proposal In Strategic Plan"
value="[ QA_Availability Of Strategic Plan With Clear Vision, Mission, Organisational Structure and Budget Proposal In Strategic Plan ]"
onmouseover="showTooltip(this)"
onmouseout="hideTooltip()"
/>
<div class="tooltip" id="tooltip"> </div>
</td>
<td>
<input
id="zFUEa4j0QWk-YmTE7EZwrcX-val"
name="entryfield"
class="long-input"
title="%QA_Availability Of Strategic Plan With Clear Vision, Mission, Organisational Structure and Budget Proposal In Strategic Plan"
value="[ %QA_Availability Of Strategic Plan With Clear Vision, Mission, Organisational Structure and Budget Proposal In Strategic Plan ]"
onmouseover="showTooltip(this)"
onmouseout="hideTooltip()"
/>
</td>
</tr>
<tr>
<td>
Availability Of Procurement Plan (Procurement Plan With Tender
Committee)
</td>
<td>LM Input 2</td>
<td>
<input
id="zFUEa4j0QWk-UHHD9bEKyR2-val"
name="entryfield"
class="long-input"
title="QA_Availability Of Procurement Plan (Procurement Plan With Tender Committee)"
value="[ QA_Availability Of Procurement Plan (Procurement Plan With Tender Committee) ]"
onmouseover="showTooltip(this)"
onmouseout="hideTooltip()"
/>
</td>
<td>
<input
id="zFUEa4j0QWk-KPkFHAeNrIw-val"
name="entryfield"
class="long-input"
title="%QA_Availability Of Procurement Plan (Procurement Plan With Tender Committee)"
value="[ %QA_Availability Of Procurement Plan (Procurement Plan With Tender Committee) ]"
onmouseover="showTooltip(this)"
onmouseout="hideTooltip()"
/>
</td>
</tr>
<tr>
<td>Availability Of Business Plan For Production Unit</td>
<td>LM Input 3</td>
<td>
<input
id="zFUEa4j0QWk-ylZsaUFDGJp-val"
name="entryfield"
class="long-input"
title="QA_Availability Of Business Plan For Production Unit"
value="[ QA_Availability Of Business Plan For Production Unit ]"
onmouseover="showTooltip(this)"
onmouseout="hideTooltip()"
/>
</td>
<td>
<input
id="zFUEa4j0QWk-ZffjQwMgeb8-val"
name="entryfield"
class="long-input"
title="%QA_Availability Of Business Plan For Production Unit"
value="[ %QA_Availability Of Business Plan For Production Unit ]"
onmouseover="showTooltip(this)"
onmouseout="hideTooltip()"
/>
</td>
</tr>
</table>
<script>
function showTooltip(element) {
var tooltip = document.getElementById("tooltip");
tooltip.textContent = element.value;
tooltip.style.display = "block";
tooltip.style.left = element.getBoundingClientRect().left + "px";
tooltip.style.top =
element.getBoundingClientRect().top + element.offsetHeight + "px";
}
function hideTooltip() {
var tooltip = document.getElementById("tooltip");
tooltip.style.display = "none";
}
</script>
</body>
</html>
@mugisha_alain I really tried to find a fix; however, it seems that customizing options in dropdowns in HTML is complicated due to the fact that browsers take over.
For example, setting a max-width for an option doesn’t work and I tried other CSS styling options to wrap the text, yet it doesn’t work. The other options included more complicated JavaScript code. The same applies to event listeners. Makes me appreciate the React libraries when developing apps for DHIS2 as that’s even more flexible and helpful.
I tried to move the <div class="tooltip" id="tooltip"> </div> outside of the table and the tooltip would appear but it only shows the value after it is being typed so it proves useless.
Another complication I believe you will face in the long run is that the data entry beta might not support such complicated code.
What if we were to use a standard form display instead of the custom form? Could this be solved differently? Why is the custom form necessary?
You can also use custom forms to customize layout / styling in Data Entry (Beta), but these forms do not support JavaScript. Our goal with the development of Data Entry (Beta) is to offer more display/customization options so that people do not need to use JavaScript when designing their forms. If there’s something that you want to do in your custom form that is not accomplishable in Data Entry (Beta), please let us know. We’re happy to have user feedback so that we know how to improve the app in the future.
