Tengo la problematica siguiente, me gustaria saber como podría hacer que este modal adapte su altera dependiendo del contenido que posea la clase modal-content. He intentado usar css y Javascript pero no obtengo los resultados que deseo
Si preguntan, eso se debe hacer en onload, es decir al cargarse, porque tengo una tabla que le manda los datos
function getHtml(valor){
var idAcceso = $('#Id_acceso').val();
datos= JSON.stringify(valor);
htmlSemana="<tr>";
//valida si la clase esta activa
if(valor[0][18] == "Si"){
moment(valor[0][10],'h:m a').format('h:m a')
htmlSemana+=`
<td>${moment(valor[0][6],'h:mm a').format('h:mm a')} ${moment(valor[0][7],'h:mm a').format('h:mm a')}</td>
<td>
<a href='register.php?clase=${valor[0][0]}'>
<small>Registrarse(${valor[0][10]}/${valor[0][11]})</small>
</a>
</td>
<td>${valor[0][1]}
<i
id='question'
data-toggle='modal'
data-target='#ver_clase'
style='cursor:pointer; color:purple; margin-left: 2px;'
onclick='mostrar2(${datos});'
class='fa fa-question-circle' aria-hidden='true' style="color:purple;"
>
</i>
</td>`;
//valida si la clase no posee instructor
if(valor[0][15] == null){
htmlSemana+=`<td>Instructor no Asignado</td>`;
}else{
htmlSemana+=`<td>${valor[0][8]} ${valor[0][9]}</td>`;
}
htmlSemana+=`<td>${valor[0][3]}</td><td>${valor[0][4]}</td>`;
}else{
htmlSemana+="<td colspan='6'>Clase Cancelada</td>";
}
if(idAcceso > 2){
htmlSemana+=`
<td>
<a
href='${valor[0]['url_grabada']}' target="_blank"
>
Link</a>
</td>`;
}
if(idAcceso > 2){
htmlSemana+=`
<td>
<i
id='edit'
data-toggle='modal'
data-target='#seleccionar_clasefinal'
style='cursor:pointer;'
onclick='mostrar(${datos});'
class='fa fa-cog' aria-hidden='true'
>
</i>
</td>`;
}
htmlSemana+=`</tr>`;
return htmlSemana;
}
Se comunica con esta función llamada mostrar2
function mostrar2(datos){
datos = datos[0];
console.log(datos);
document.getElementById("titulo").innerHTML = datos['nombre_clase'];
$("#descripcion_clase").val(datos['descripcion']);
}
Y esta funcion pasa los datos al modal ubicado en ModalVerClase.tpl. El cual es este
<div class="modal fade" id="ver_clase">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color:purple;">
<div id="titulo" style="color: white;"></div>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
id="close"
name="close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<textarea class="autoheight" readonly style="width:100%;" id="descripcion_clase"></textarea>
</div>
</div>
</div>
</div>