Tengo un elemento li de tamaño variable en un ol en un div. El tamaño variable está funcionando y el elemento se puede cambiar de tamaño. Estoy usando la altura de los elementos para proporcionar comentarios sobre cuál será la altura cuando se lance el elemento (16 px son 15 minutos). Sin embargo, el título de los elementos no se ajusta y, por lo tanto, no se proporcionan comentarios.

Mi html:

 <div class="day"> <ol id="t2022-02-26" style="height: 100%;width: 100%;" class="jobs job-todo" data-date="2022-02-21"> <li class="task" style="height: 256px; width: 225px;" title="4h00m" data-task="14"> <span class="task-head">Example1</span> <div class="description"> <p>This is resizable</p> </div> </li> </ol> </div>

y el javascript asociado:

 $( function() { $(".task").resizable( { // containment: "parent", distance: 8, ghost: true, handles: "n", grid: 16, resize: function( event, ui ) { var h = ui.helper.css( "height" ); h = h.slice( 0, -2 ); // remove the px var height = h / 64 ; // as a decimal var hours = Math.trunc( height ); var mins = (height % hours) * 60; var result = hours + "h" + mins + "m"; console.debug( "(" + height + "hours.) hours: " + hours + ", mins: " + mins ); ui.helper.title = result; } } );

Con este código, el cambio se repite en la consola de depuración, pero el título del elemento no cambia y, por lo tanto, la información sobre herramientas no cambia.

Gracias