Ir para conteúdo
  • ×   Você colou conteúdo com formatação.   Remover formatação

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.

  • Conteúdo Similar

    • Por Richard Henrique
      Boa tarde,
       
      Alguem conhece bem de front end? porque estou começando.
       

       
      Meu organograma em css está quebrando, queria deixar ele continuo, sem quebrar, ja tentei colocar overflow-x: auto, e coisas do tipo, mas mesmo assim ele quebra conforme imagem.
       
      Estou usando dentro do container-fluid do bootstrap 4, alguem sabe como solucionar?
       
      Meu css:
       

      <style>

      /*#region Organizational Chart*/
      .tree * {
          margin: auto; padding: 0px;

      }
      .tree ul {
          padding-top: 20px; position: relative;
          -transition: all 0.s;
          -webkit-transition: all 0.5s;
          -moz-transition: all 0.5s;
      }
      .tree li {
          float: left; text-align: center;
          list-style-type: none;
          position: relative;
          padding: 20px 5px 0 0px;
          -transition: all 0.5s;
          -webkit-transition: all 0.5s;
          -moz-transition: all 0.5s;
      }
      /*We will use ::before and ::after to draw the connectors*/
      .tree li::before, .tree li::after{
          content: '';
          position: absolute; top: 0; right: 50%;
          border-top: 2px solid #696969;
          width: 50%; height: 20px;
      }
      .tree li::after{
          right: auto; left: 50%;
          border-left: 2px solid #696969;
      }
      /*We need to remove left-right connectors from elements without 
      any siblings*/
      .tree li:only-child::after, .tree li:only-child::before {
          display: none;
      }
      /*Remove space from the top of single children*/
      .tree li:only-child{ padding-top: 0;}
      /*Remove left connector from first child and 
      right connector from last child*/
      .tree li:first-child::before, .tree li:last-child::after{
          border: 0 none;
      }
      /*Adding back the vertical connector to the last nodes*/
      .tree li:last-child::before{
          border-right: 2px solid #696969;
          border-radius: 0 5px 0 0;
          -webkit-border-radius: 0 5px 0 0;
          -moz-border-radius: 0 5px 0 0;
      }
      .tree li:first-child::after{
          border-radius: 5px 0 0 0;
          -webkit-border-radius: 5px 0 0 0;
          -moz-border-radius: 5px 0 0 0;
      }
      /*Time to add downward connectors from parents*/
      .tree ul ul::before{
          content: '';
          position: absolute; top: 0; left: 50%;
          border-left: 2px solid #696969;
          width: 0; height: 20px;
      }
      .tree li a{
          height: auto;
          width: auto;
          padding: 5px 10px;
          text-decoration: none;
          background-color: white;
          color: #8b8b8b;
          font-family: arial, verdana, tahoma;
          font-size: 11px;
          display: inline-block;  
          box-shadow: 0 1px 2px rgba(0,0,0,0.1);
          -transition: all 0.5s;
          -webkit-transition: all 0.5s;
          -moz-transition: all 0.5s;
      }
      /*Time for some hover effects*/
      /*We will apply the hover effect the the lineage of the element also*/
      .tree li a:hover, .tree li a:hover+ul li a {
          background: #cbcbcb; color: #000;
      }
      /*Connector styles on hover*/
      .tree li a:hover+ul li::after, 
      .tree li a:hover+ul li::before, 
      .tree li a:hover+ul::before, 
      .tree li a:hover+ul ul::before{
          border-color:  #94a0b4;
      }
      .center {
          margin: auto;
          width: 50%;
          padding: 80px;
      }
      /*#endregion*/
      </style>
       
      Um trecho do meu html:
       
      <div class="tree">
                                      <ul>
                                          <li style="padding: 20px 202px 10px 201px !important">
                                          </a>
                                          <br>
                                          <br>
                                          <a href="#">
                                              <div class="container-fluid">
                                                  <div class="flex-row">
                                                      <?php
                                                      $status = 4;
                                                      try {
                                                          $listaSquad=new Organograma();
                                                          $listaSquad->status=$status;
                                                          $resultado=$listaSquad->listarOrganograma($status);    
                                                      } catch ( Exception $e ) {
                                                          Erro::trataErro( $e );
                                                      }
                                                      ?>     
                                                      PRODUTO
                                                  </div>
                                                  <div class="row" style="margin-top: 35px;">
                                                      <i class="fa fa-exclamation-circle fa-2x"></i>
                                                  </div>
                                              </div>
                                          </a>
                                          <ul>
                                              <li  style="padding: 20px 202px 10px 201px !important">
                                                  <a href="#">
                                                      <div class="container-fluid">
                                                          <div class="flex-row">        
                                                              DESENVOLVIMENTO
                                                          </div>
                                                          <div class="row" style="margin-top: 35px;">
                                                              <i class="fa fa-exclamation-circle fa-2x"></i>
                                                          </div>
                                                          <div class="row">
                                                              <?php
                                                              $status = 15;
                                                              try {
                                                                  $listaSquad=new Organograma();
                                                                  $listaSquad->status=$status;
                                                                  $resultado=$listaSquad->listarSeresOrganograma($status);    
                                                              } catch ( Exception $e ) {
                                                                  Erro::trataErro( $e );
                                                              }
                                                              ?>     
                                                          </div>
                                                      </div>
                                                  </a>
                                              </li>
                                          </ul>
                                      </li>
                                  </ul>
                              </div>
       
       
      se alguem puder ajudar, agradeço. valeu
    • Por iraniziomattos
      Boa noite pessoal,
      estou tentando adaptar o plugin easy tree view plugin for jQuery and Bootstrap, no entanto estou tendo problemas na tag <a href> do meu site, pois o link busca o href do plugin onde está javascript: void(0);
      minha dúvida é como fazer para ele pegar o href do meu site e não do plugin??
    • Por jadsonlucena
      Galera, estou a algum tempo tentando estudar essa estrutura, contudo, esse assunto é muito escasso.
      Encontro muito a ideia geral, mas nunca, algo mais detalhado do funcionamento ou um bom e velho pseudo código.
      Alguma boa alma poderia me indicar um bom artigo ou até mesmo disponibilizar um pseudo código?
       
      Ps: Se já existir algo em C++ pronto seria uma boa também.
       
      Grato desde já pela sua ajuda...
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.