0

Tengo este árbol que a la resolución 1366 x 768 se ve bien cuando se despliega. Mi problema es que cuando se ve en otra resolución, se descuadra. He intentado hacer las medidas con % en vez de px tambíen con vw, darle un tamaño width a todos los div, usar position absolute, relative y demás pero nada me funciona. Solo se mantiene la posición si el position le pongo fixed.

$(function () {
    $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');

    $('.tree li.parent_li > span').on('click', function (e) {
        var children = $(this).parent('li.parent_li').find(' > ul > li');
        if (children.is(":visible")) {
            children.hide('fast');
            $(this).attr('title', 'Expand').find(' > i').addClass('glyphicon-plus-sign').removeClass('glyphicon-minus-sign');
        } else {
            children.show('fast');
            $(this).attr('title', 'Collapse').find(' > i').addClass('glyphicon-minus-sign').removeClass('glyphicon-plus-sign');
        }
        e.stopPropagation();
    });

});



#task_flyout {
height:20px; 
background-color:#dedede;
 position: relative;
}

.fixed {position:fixed; top:0; left:3.1%;  z-index:2; width:100%; color:black;}

.tree {
min-height:20px;
padding:5px 0px 0px 0px;
margin-bottom:20px;
background-color:transparent;
border:0px solid #999;
color: #686a10;
   font-weight: bold;
   
}


#arbol{
margin: 0 auto;
width: 100%;
}

#arbolTree{
margin: 0 auto;
position: relative;
width:100%;
}


.tree li {
list-style-type:none;
margin:0;
padding:0.5% 0% 0 0.3%;
position:relative;
}
.tree li::before, .tree li::after {
content:'';
left:0%;
position:absolute;
right:auto
}
.tree li::before {
border-left:1px solid #999;
bottom:50px;
height:100%;
top:0;
width:1px;
}
.tree li::after {
border-top:1px solid #999;
height:auto;
top:29px;
width:100%;
}
.tree li span {
   
display:inline-block;
padding:3px 0px;
text-decoration:none;
font-weight: bold;
}
.tree li.parent_li>span {
cursor:pointer;
color: black;
}
.tree>ul>li::before, .tree>ul>li::after {
border:0;
padding-bottom: 4px  !important;
}
.tree li:last-child::before {
   
}
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover {
background:transparent;
color:#686a10;
}



.prsp{ /* Tabla Presupuestos */
display: inline-block;
color: black;
position: absolute;
  
}


.totCntSig{ /* Tabla Presupuestos */
display: inline-block;
color: black;
}


.id{ /* Tabla Presupuestos */

display:none;

}

.hrTree{ /* Esto es un hr modificado por mi*/
margin-top: 0%;
margin-bottom: 0%;
border: 0;
border-top: 0px solid #999999;
box-sizing: content-box;

}

.sombreadoWell{

min-height: 20px;
padding: 5px;
margin-bottom: 2px;
background-color: transparent;
border: 1px solid #afb159;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
box-shadow: inset 0 1px 1px rgba(0,0,0,.05);

}


/*--------------------Totales-----------------------*/

#Total
{ /* Esto es un hr modificado por mi*/
width: 47.7%;
display: inline-block;
}

#sumTotCntAnt
{ /* Esto es un hr modificado por mi*/
 position: relative;
left: 48.2%;
display: inline-block;
}

#sumTotCntEje
{ /* Esto es un hr modificado por mi*/
position: relative;
left: 60.1%;
display: inline-block;
}

#sumTotCntSig
{ /* Esto es un hr modificado por mi*/
 position: relative;
left: 70.3%;
display: inline-block;
}

#sumTotCntJust
{ /* Esto es un hr modificado por mi*/
position: relative;
left: 81%;
display: inline-block;
}



/*Etiquetas de arbol------------------------------------------------------------*/
#pht /* Lbl Proyectos */
{ 
display: inline-block;
position: relative;
left: 3%;

}

#prsp /*Lbl Presupuestos */
{ 
display: inline-block;
position: relative;
left: 20%;
 
}
#ejer2018 /*Lbl Ejercicio 2018*/
{ 
position: relative;
  left: 60.1%;
  display: inline-block;
}


#eje2018
{ 
 position: relative;
left: 48.2%;
display: inline-block;
}


#prop2019
{ 
 position: relative;
left: 70.3%;
display: inline-block;
}

#men2019
{ 
position: relative;
left: 81%;
display: inline-block;
}

#prspName{
position: relative;
  
}


/* Clases de nombres Proyectos, historias, tareas y presupuestos*/

.pryName{ /* Nombre de proyectos*/
display: inline-block;

}

.hisName{ /* Nombre de historia */
display: inline-block;
 position: relative;
  left: 2%;
}

.tarName{ /* Nombre de tarea */
display: inline-block;
 position: relative;
 left: 2%;
  
}

.prspName{ /* Tabla Presupuestos */
display: inline-block;
position: relative;
left: 20%;
}


.ejecutado2018{
display: inline-block;
position: relative;
left: 48.2%;
}

.ejercicio2018{
display: inline-block;
position: relative;
left: 60.1%;
}

.propuesta2019{
display: inline-block;
position: relative;
left: 70.3%;
}


.memoria2019{
display: inline-block;
position: relative;
left: 81%;
}


.presupuesto{
display: inline-block;
position: relative;
left: 20%;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="tree well">

  <ul>
    <li id='pryName' "+pry.id+" class='liPryName '> <span> <i class='glyphicon glyphicon-circle-arrow-down'></i> </span>
      <div class='pryName cursor'>pry.name</div>
      <div id='totCntAnt"+ pry.id +"' class='prsp  sumPryCntAnt'> CntAnt</div>
      <div id='totCntEje"+ pry.id +"' class='prsp  sumPryCntEje'> CntEje</div>
      <div id='totCntSig"+ pry.id +"' class='prsp sumPryCntSig'> cntSig</div>
      <div id='totCntJust"+ pry.id +"' class='prsp sumPryCntJust'>CntJust</div>
      <ul>
        <li id='hisName' "+his.id+" class='liHisName'><span><i class='glyphicon glyphicon-plus-sign'></i> </span>
          <div class='id'>his.id</div>
          <div class='hisName cursor'>his.name</div>
          <div id='cntAnt"+ his.id +"' class='prsp sumHisCntAnt'> sumHisCntAnt</div>
          <div id='cntEje"+ his.id +"' class='prsp sumHisCntEje'> sumHisCntEje</div>
          <div id='cntSig"+ his.id +"' class='prsp sumHisCntSig'> sumHisCntSig</div>
          <div id='cntJust"+ his.id +"' class='prsp sumHisCntJust '> sumHisCntJust</div>
          <ul>
            <li id='tarName' "+tar.id+" class='liTarName'> <span><i class='glyphicon glyphicon-plus-sign'></i></span>
              <div class='id'>tar.id</div>
              <div class='tarName cursor'>tar.name</div>
              <div id='cnt_ant"+ tar.id +"' class='prsp sumCntAnt'> sumCntAnt</div>
              <div id='cnt_eje"+ tar.id +"' class='prsp sumCntEje'>SumCntEje</div>
              <div id='cnt_sig"+ tar.id +"' class='prsp sumCntSig'>sumCntSig</div>
              <div id='cnt_just"+ tar.id +"' class='prsp sumCntJust'>SumCntSig</div>
              <ul>
                <li id='prspName' "+prsp.id+" class='liPrspName'>
                  <div class='id'>prsp.id</div><span <i class='glyphicon glyphicon-minus-sign spanPrsp'></i> </span>
                  <div class=' prspName cursor'>prsp.name</div>
                  <div class=' cnt_ant'>prsp.cnt_ant</div>
                  <div class=' cnt_eje'>prsp.cnt_eje</div>
                  <div class=' cnt_sig'>prsp.cnt_sig</div>
                  <div class='cnt_just'>prsp.cnt_just</div>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

</div>

1
  • me alegro de que encontraras una solución al problema. Por favor, edita la pregunta para dejarla como estaba antes y pon la respuesta en la zona de respuestas. Lee Cómo responder y vuelve a completar el recorrido de bienvenida para más información.
    – Alvaro Montoro
    Commented el 9 ene. 2019 a las 19:24

1 respuesta 1

1

Lo solucione cambiando position en el css a stiky;

#pht { display: inline-block;position: sticky;left: 3%;}

De esta forma puedo alinear cualquier div con un mismo left, he hecho una clase left para cada columna y listo.

1
  • Gracias por compartir tu solución!.
    – Jorgesys
    Commented el 24 ene. 2019 a las 18:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.