7

Intento hace un árbol con estilos y HTML pero me encontré con este problema, como se aprecia en la imagen de abajo, lo que no se quiere son las lineas que están sombreadas de ROJO:

introducir la descripción de la imagen aquí

Este es mi código html

<!-- TREEVIEW CODE -->
<div class="treeview">
  <ul>
    <li class="lamb-first-li">
      <a>
        <div class="container-fluid">
          <div class="row">
            Top level
          </div>
          <div class="row">
            <i class="fa fa-exclamation-circle fa-2x"></i>
          </div>
          <div class="row">
            15 Failed Tests
          </div>
        </div>
      </a>
      <ul>

        <li>
          <a>
            <div class="container-fluid">
              <div class="row">
                Top level
              </div>
              <div class="row">
                <i class="fa fa-exclamation-circle fa-2x"></i>
              </div>
              <div class="row">
                15 Failed Tests
              </div>
            </div>
          </a>
        </li>
        <li>
          <a>
            <div class="container-fluid">
              <div class="row">
                Top level
              </div>
              <div class="row">
                <i class="fa fa-exclamation-circle fa-2x"></i>
              </div>
              <div class="row">
                15 Failed Tests
              </div>
            </div>
          </a>
          <ul>
            <li>
              <a>
                <div class="container-fluid">
                  <div class="row">
                    Top level
                  </div>
                  <div class="row">
                    <i class="fa fa-exclamation-circle fa-2x"></i>
                  </div>
                  <div class="row">
                    15 Failed Tests
                  </div>
                </div>
              </a>
              <ul>
                <li>
                  <a>
                    <div class="container-fluid">
                      <div class="row">
                        Top level
                      </div>
                      <div class="row">
                        <i class="fa fa-exclamation-circle fa-2x"></i>
                      </div>
                      <div class="row">
                        15 Failed Tests
                      </div>
                    </div>
                  </a>
                </li>
                <li>
                  <a>
                    <div class="container-fluid">
                      <div class="row">
                        Top level
                      </div>
                      <div class="row">
                        <i class="fa fa-exclamation-circle fa-2x"></i>
                      </div>
                      <div class="row">
                        15 Failed Tests
                      </div>
                    </div>
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>
<!-- TREEVIEW CODE -->

Y este son mis estilos en SCSS:

div {
  &.panel:first-child {
    margin-top: 20px;
  }
  &.treeview {
    padding: 4px;
    margin-bottom: 20px;
    ul:first-child:before {
      display: none;
    }
  }
}

.treeview {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #369;
  ul {

    margin: 0;
    padding: 0;
    list-style: none;
    color: #369;
    margin-left: 1em;
    position: relative;
    ul {
      margin-left: 5.5em;
    }
    &:before {
      content: "";
      display: block;
      width: 0;
      position: absolute;
      top: 0;
      left: 0;
      border-left: 1px solid;
      bottom: 4.1rem; /* 76px */
    }
  }
  li {
    margin: 0;
    padding: 0.4rem 5em;
    line-height: 2em;
    font-weight: 700;
    position: relative;

    .container-fluid {
      .row {
        text-align: center;
        display: block;
        .lamb-link {
          display: inline;
        }
      }
      .lamb-name-module {
        color: nb-theme(color-primary);
      }
    }

  }
  ul {
    li.lamb-first-li:before {
      border: none;
    }
    li:before {
      content: "";
      display: block;
      width: 60px;
      height: 0;
      border-top: 1px solid;
      margin-top: 30px;
      position: absolute;
      top: 1em;
      left: 0;
    }
  }
}

.tree-indicator {
  margin-right: 5px;
  cursor: pointer;
}

/** =================*/
.treeview li {
  a {
    &:hover {
      background: nb-theme(layout-bg);
      color: #000;
      + ul {
        li {
          a {
            background: nb-theme(layout-bg);
            color: #000;
          }
          &::after, &::before {
            border-color: #94a0b4;
          }
        }
        &::before, ul::before {
          border-color: #94a0b4;
        }
      }
    }
  }
  /** =================*/

  a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    height: 100px;
    width: 15rem;
    text-decoration: none;
    background-color: white;
    color: #8b8b8b;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    display: inline-block;
    box-shadow: 0 10px 11px nb-theme(lamb-menu-hover);
    -transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    span {
      top: 50%;
      margin-top: -0.7em;
      display: block;
    }
  }
  button {
    text-decoration: none;
    color: inherit;
    border: none;
    background: transparent;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    outline: 0;
    &:active, &:focus {
      text-decoration: none;
      color: inherit;
      border: none;
      background: transparent;
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      outline: 0;
    }
  }
}

Que compilado y puesto todo junto se ve así (NdE: he cambiado algunos colores para que se vean sin problemas):

div.panel:first-child {
  margin-top: 20px;
}

div.treeview {
  padding: 4px;
  margin-bottom: 20px;
}

div.treeview ul:first-child:before {
  display: none;
}

.treeview {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #369;
}

.treeview ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #369;
  margin-left: 1em;
  position: relative;
}

.treeview ul ul {
  margin-left: 5.5em;
}

.treeview ul:before {
  content: "";
  display: block;
  width: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-left: 1px solid;
  bottom: 4.1rem;
  /* 76px */
}

.treeview li {
  margin: 0;
  padding: 0.4rem 5em;
  line-height: 2em;
  font-weight: 700;
  position: relative;
}

.treeview li .container-fluid .row {
  text-align: center;
  display: block;
}

.treeview li .container-fluid .row .lamb-link {
  display: inline;
}

.treeview li .container-fluid .lamb-name-module {
  color: rgba(0,0,0,0.2);
}

.treeview ul li.lamb-first-li:before {
  border: none;
}

.treeview ul li:before {
  content: "";
  display: block;
  width: 60px;
  height: 0;
  border-top: 1px solid;
  margin-top: 30px;
  position: absolute;
  top: 1em;
  left: 0;
}

.tree-indicator {
  margin-right: 5px;
  cursor: pointer;
}


/** =================*/

.treeview li {
  /** =================*/
}

.treeview li a:hover {
  background: rgba(0,0,0,0.2);
  color: #000;
}

.treeview li a:hover+ul li a {
  background: rgba(0,0,0,0.2);
  color: #000;
}

.treeview li a:hover+ul li::after,
.treeview li a:hover+ul li::before {
  border-color: #94a0b4;
}

.treeview li a:hover+ul::before,
.treeview li a:hover+ul ul::before {
  border-color: #94a0b4;
}

.treeview li a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  height: 100px;
  width: 15rem;
  text-decoration: none;
  background-color: white;
  color: #8b8b8b;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  box-shadow: 0 10px 11px rgba(0,0,0,0.2);
  -transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.treeview li a span {
  top: 50%;
  margin-top: -0.7em;
  display: block;
}

.treeview li button {
  text-decoration: none;
  color: inherit;
  border: none;
  background: transparent;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  outline: 0;
}

.treeview li button:active,
.treeview li button:focus {
  text-decoration: none;
  color: inherit;
  border: none;
  background: transparent;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  outline: 0;
}
<div class="treeview">
  <ul>
    <li class="lamb-first-li">
      <a>
        <div class="container-fluid">
          <div class="row">
            Top level
          </div>
          <div class="row">
            <i class="fa fa-exclamation-circle fa-2x"></i>
          </div>
          <div class="row">
            15 Failed Tests
          </div>
        </div>
      </a>
      <ul>

        <li>
          <a>
            <div class="container-fluid">
              <div class="row">
                Top level
              </div>
              <div class="row">
                <i class="fa fa-exclamation-circle fa-2x"></i>
              </div>
              <div class="row">
                15 Failed Tests
              </div>
            </div>
          </a>
        </li>
        <li>
          <a>
            <div class="container-fluid">
              <div class="row">
                Top level
              </div>
              <div class="row">
                <i class="fa fa-exclamation-circle fa-2x"></i>
              </div>
              <div class="row">
                15 Failed Tests
              </div>
            </div>
          </a>
          <ul>
            <li>
              <a>
                <div class="container-fluid">
                  <div class="row">
                    Top level
                  </div>
                  <div class="row">
                    <i class="fa fa-exclamation-circle fa-2x"></i>
                  </div>
                  <div class="row">
                    15 Failed Tests
                  </div>
                </div>
              </a>
              <ul>
                <li>
                  <a>
                    <div class="container-fluid">
                      <div class="row">
                        Top level
                      </div>
                      <div class="row">
                        <i class="fa fa-exclamation-circle fa-2x"></i>
                      </div>
                      <div class="row">
                        15 Failed Tests
                      </div>
                    </div>
                  </a>
                </li>
                <li>
                  <a>
                    <div class="container-fluid">
                      <div class="row">
                        Top level
                      </div>
                      <div class="row">
                        <i class="fa fa-exclamation-circle fa-2x"></i>
                      </div>
                      <div class="row">
                        15 Failed Tests
                      </div>
                    </div>
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

1
  • 2
    En lugar de poner el SCSS, sería ideal que pusieras el código CSS compilado, de ese modo podrías crear un snippet directamente en la pregunta para que podamos ver el error. Lee Cómo preguntar y cómo crear un ejemplo mínimo verificable para más información.
    – Alvaro Montoro
    Commented el 17 may. 2018 a las 2:02

1 respuesta 1

1

Las líneas las estás haciendo con una misma sentencia con el borde de un :before de los diferentes elementos ul. Para ajustar el alto simplemente podrías darle un valor de height que se ajuste al esquema.

Dandole clases podemos darle un alto según el número de elementos que tenga por debajo, y asignar a esos el alto del :before

/*editado*/
.ul-2:before{
  height: 160px;
}

.ul-1:before {
  height: 47px;
}
/*editado*/

div.panel:first-child {
  margin-top: 20px;
}

div.treeview {
  padding: 4px;
  margin-bottom: 20px;
}

div.treeview ul:first-child:before {
  display: none;
}

.treeview {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #369;
}

.treeview ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #369;
  margin-left: 1em;
  position: relative;
}

.treeview ul ul {
  margin-left: 5.5em;
}

.treeview ul:before {
  content: "";
  display: block;
  width: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-left: 1px solid;
  bottom: 4.1rem;
  /* 76px */
}

.treeview li {
  margin: 0;
  padding: 0.4rem 5em;
  line-height: 2em;
  font-weight: 700;
  position: relative;
}

.treeview li .container-fluid .row {
  text-align: center;
  display: block;
}

.treeview li .container-fluid .row .lamb-link {
  display: inline;
}

.treeview li .container-fluid .lamb-name-module {
  color: rgba(0,0,0,0.2);
}

.treeview ul li.lamb-first-li:before {
  border: none;
}

.treeview ul li:before {
  content: "";
  display: block;
  width: 60px;
  height: 0;
  border-top: 1px solid;
  margin-top: 30px;
  position: absolute;
  top: 1em;
  left: 0;
}

.tree-indicator {
  margin-right: 5px;
  cursor: pointer;
}


/** =================*/

.treeview li {
  /** =================*/
}

.treeview li a:hover {
  background: rgba(0,0,0,0.2);
  color: #000;
}

.treeview li a:hover+ul li a {
  background: rgba(0,0,0,0.2);
  color: #000;
}

.treeview li a:hover+ul li::after,
.treeview li a:hover+ul li::before {
  border-color: #94a0b4;
}

.treeview li a:hover+ul::before,
.treeview li a:hover+ul ul::before {
  border-color: #94a0b4;
}

.treeview li a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  height: 100px;
  width: 15rem;
  text-decoration: none;
  background-color: white;
  color: #8b8b8b;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  box-shadow: 0 10px 11px rgba(0,0,0,0.2);
  -transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.treeview li a span {
  top: 50%;
  margin-top: -0.7em;
  display: block;
}

.treeview li button {
  text-decoration: none;
  color: inherit;
  border: none;
  background: transparent;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  outline: 0;
}

.treeview li button:active,
.treeview li button:focus {
  text-decoration: none;
  color: inherit;
  border: none;
  background: transparent;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  outline: 0;
}
<div class="treeview">
  <ul>
    <li class="lamb-first-li">
      <a>
        <div class="container-fluid">
          <div class="row">
            Top level
          </div>
          <div class="row">
            <i class="fa fa-exclamation-circle fa-2x"></i>
          </div>
          <div class="row">
            15 Failed Tests
          </div>
        </div>
      </a>
      <ul class="ul-2">

        <li>
          <a>
            <div class="container-fluid">
              <div class="row">
                Top level
              </div>
              <div class="row">
                <i class="fa fa-exclamation-circle fa-2x"></i>
              </div>
              <div class="row">
                15 Failed Tests
              </div>
            </div>
          </a>
        </li>
        <li>
          <a>
            <div class="container-fluid">
              <div class="row">
                Top level
              </div>
              <div class="row">
                <i class="fa fa-exclamation-circle fa-2x"></i>
              </div>
              <div class="row">
                15 Failed Tests
              </div>
            </div>
          </a>
          <ul class="ul-1">
            <li>
              <a>
                <div class="container-fluid">
                  <div class="row">
                    Top level
                  </div>
                  <div class="row">
                    <i class="fa fa-exclamation-circle fa-2x"></i>
                  </div>
                  <div class="row">
                    15 Failed Tests
                  </div>
                </div>
              </a>
              <ul class="ul-2">
                <li>
                  <a>
                    <div class="container-fluid">
                      <div class="row">
                        Top level
                      </div>
                      <div class="row">
                        <i class="fa fa-exclamation-circle fa-2x"></i>
                      </div>
                      <div class="row">
                        15 Failed Tests
                      </div>
                    </div>
                  </a>
                </li>
                <li>
                  <a>
                    <div class="container-fluid">
                      <div class="row">
                        Top level
                      </div>
                      <div class="row">
                        <i class="fa fa-exclamation-circle fa-2x"></i>
                      </div>
                      <div class="row">
                        15 Failed Tests
                      </div>
                    </div>
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

7
  • ¿Podrías aplicar lo que mencionas al código de la pregunta? Tal y como está redactada la respuesta, casi parece más un comentario que una respuesta.
    – Alvaro Montoro
    Commented el 17 may. 2018 a las 13:29
  • Creo que me he explicado mal, el código que he puesto es para añadirlo al código de la pregunta. ¿Debería copiar y pegar todo el código?
    – asantana o
    Commented el 17 may. 2018 a las 13:32
  • @asantanao Gracias por la respuesta. Pero el árbol finalmente se creará con datos dinámicos, en ese sentido no seria buena idea ponerle Ids. y si, el código esta desordenado. si pudiese ayudarme estaría agradecido. Commented el 17 may. 2018 a las 13:50
  • Ok, pero el tamaño está ya definido entiendo, ¿o el árbol puede tener diferentes tamaños? Si no es así, se puede editar el elemento accediendo con selectores sin id
    – asantana o
    Commented el 17 may. 2018 a las 14:09
  • De pronto el tamaño de los elementos serán el mismo tamaño, pero el tamaño de los enlaces va a depender de la cantidad de hijos que tenga cada padre Commented el 17 may. 2018 a las 14:30

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.