Jump to content

Search the Community

Showing results for tags 'treeview'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento e Banco de Dados
    • HTML e CSS
    • Java
    • Javascript
    • .NET
    • PHP
    • Python
    • Ruby
    • Mobile
    • Ambientes de Desenvolvimento
    • Arquitetura e Métodos Ágeis
    • Banco de Dados
    • DevOps
    • Desenvolvimento de Games
    • E-Commerce e Pagamentos Online
    • SEO e Otimizações
    • WordPress
    • Algoritmos & Outras Tecnologias
  • Design e Produto
    • Fotografia
    • Photoshop
    • Design de interfaces e UX
    • Edição/Produção de Vídeos
    • Marketing Online
    • Desenho, Ilustração e 3D
  • Entretenimento e uso pessoal
    • Geral
    • Segurança & Malwares
    • Gadgets e wearable
    • Softwares e Apps
    • Entretenimento

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Found 1 result

  1. Richard Henrique

    Organograma em css

    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
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.