none
problemas de diseño con acordion jquery mvc RRS feed

  • Pregunta

  • Saludos,

    Tengo un acordion de jquery :

    Donde lo que hago es que despliego una lista de tareas, pero cuando le doy click a uno de ellos se distrociona y se pone pequeño una muestra :

    Como se ve en la imagen el tipo "Solicitud Nuevo Agente" se distorciona y su tamaño cambia, lo que tambien me gustaria es que las columnas yo pueda especificarle que tipo de with tendra, utilizo jquery y ajax para armar este html :

      $(document).ready(function () {
                                        $.ajax({
                                            url: 'Home/Prueba',
                                            type: 'GET',
                                            contentType: 'application/json;charset=utf-8',
                                            dataType: 'json',
                                            success: function (data) {
                                                var htmlString = '';
                                                $.each(data, function (index, items) {
    
                                                    var NM = items[0].F_WF.NM;
    
                                                    var list_Ref = "";
                                                    var list_Date = "";
                                                    var list_Nm = "";
                                                    var list_Action = "";
                                                    var list_Taks = "";
    
                                                    for (var i = 0; i < items.length; i++) {
    
                                                        var REF_NUM = items[i].REF_NUM;
                                                        list_Ref += "<li>" + REF_NUM + "</li>";
         
                                                        var CREATED_DT = items[i].CREATED_DT;
                                                        list_Date += "<li>" + CREATED_DT + "</li>";
    
                                                        var COMPLETE_NM = items[i].JOIN_REFERRED_USER.COMPLETE_NM;
                                                        list_Nm += "<li>" + COMPLETE_NM + "</li>";
    
                                                        var ACTION_NM = items[i].F_ACTION_TYPE.ACTION_NM;
                                                        list_Action += "<li>" + ACTION_NM + "</li>";
    
                                                        var STEPNM = items[i].F_WF_STEP.NM;
                                                        list_Taks += "<li>" + STEPNM + "</li>";
    
    
                                                    }
    
                                                    htmlString += '<h3>' + NM + '</h3>';
                                                    htmlString += '<table><tbody>';
                                                    htmlString += '<tr>';
                                                    htmlString += '<td width="2px">' + '<h4>Referencia</h4>' + list_Ref + '</td>';
                                                    htmlString += '<td style="width:8%">' + '<h4>Fecha</h4>' + list_Date + '</td>';
                                                    htmlString += '<td style="width:25%">' + '<h4>Referida Por</h4>' + list_Nm + '</td>';
                                                    htmlString += '<td style="width:30%">' + '<h4>Acción Tomada</h4>' + list_Action + '</td>';
                                                    htmlString += '<td style="width:35%">' + '<h4>Acción Tomada</h4>' + list_Taks + '</td></tr>';
                                                    htmlString += '</tbody></table>';
    
                                                });
    
                                                $('#accordion').html(htmlString).accordion({
                                                    collapsible: true,
                                                    active: false,
    
                                                });
    
                                            }
                                        });
                                    });
    


    y recibo está información en un table:

     <table class="table nowrap" id="accordion"></table>

    * Lo que necesito :

    1. Que no se desforme el acordion cuando hago click para ver la lista de tareas.

    2. Poder darte un with a cada columna para poder darle el ancho que quiera.

    3. Que dicha tabla sea responsive.

    Gracias de ante mano.

    Jquery con MVC 5 


    Si mi respuesta te ha ayudado a resolver tus problemas, Selecciona "Proponer como respuesta"

    Blog
    J.Joaquin

    martes, 11 de octubre de 2016 18:54

Todas las respuestas

  • hola

    porque el accordion lo defines como <table> ? no deberia ser un <div>

    https://jqueryui.com/accordion/

    cada seccion deberia ser un div, no tablas

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    martes, 11 de octubre de 2016 20:05
  • Saludos Leandro,

    Gracias por responder, me vi en la obligación de utilizar un table porque con dicho div el body se distorciona tambin ver en la imagen :

    Aunque si se soluciona el problema del acordion que no se comprime, pero la desformación del body es mas grande.


    Si mi respuesta te ha ayudado a resolver tus problemas, Selecciona "Proponer como respuesta"

    Blog
    J.Joaquin

    martes, 11 de octubre de 2016 20:21
  • Si usas el developer tools del browser, al cual accedes con F12, podrias inspeccionar el html generado y ver si hay algun tag mal cerrado

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    martes, 11 de octubre de 2016 20:23
  • No tengo ninguno mal cerrado, según lo que veo en el acordión de jquery la dimención de cada step al abrir es la misma para todo, me gustaria que se adaptara al contenido que tenga cada uno y que no allá espacios vacios innecesario.

    Si mi respuesta te ha ayudado a resolver tus problemas, Selecciona "Proponer como respuesta"

    Blog
    J.Joaquin

    martes, 11 de octubre de 2016 20:32
  • pero esto depende de como estes armando la tabla

    si tienes un json podrias usar jTemplate

     jQuery Templates and JSON

    de esta forma quedaria mas simple la union de datos con la generacion de html

    o quizas este

    jquery-template

    parece mas simple

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina


    martes, 11 de octubre de 2016 21:20
  • Gracias por responder, pero pude resolver mi inconveniente utilizando un html dinámico, y utilizando un div ya que el acordión de jquery está diseñado con esa estructura. Gracias.. 

    Si mi respuesta te ha ayudado a resolver tus problemas, Selecciona "Proponer como respuesta"

    Blog
    J.Joaquin

    miércoles, 12 de octubre de 2016 19:49