Dhis2 custom form

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>

Strategic Planning	Availability Of Strategic Plan With Clear Vision, Mission, Organisational Structure and Budget Proposal In Strategic Plan	LM Input 1
	Availability Of Procurement Plan (Procurement Plan With Tender Committee)	LM Input 2
	Availability Of Business Plan For Production Unit	LM Input 3

<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>

" may provide with some help

1 post - 1 participant

Read full topic