Hello community,
this is a custom form 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
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>
may provide with some help
