Force container row col to be non-responsive in Bootstrap

0

I have the following family tree: link

It is possible to realize that the responsiveness of a framily tree does not exist. In order to have a good visibility of this tree, the best way would be to do container > row > col where it is found that tree is non-responsive, having a horizontal scroll, forcing it to become unresponsive only in this div.

<div class="tree"> is within container > row > col-12 .

How to do this in Bootstrap 3.3.7?

    
asked by anonymous 04.08.2017 / 07:25

1 answer

0

Natively, there is not. What I did to have this behavior is:

  • I added width: 9999px and overflow: auto to class .tree . So, we are sure that the tree will not be broken because of responsiveness;
  • Then, via Java Script I got the largura effective total of the tree and stored in largura ;
  • I applied the% of% obtained in% with% of% with% with 10 because of largura and ul ;
  • I removed the% wrap width of the container from class .tree , thus making padding left take effect and create scrolling;
  • $(function() {
      var largura = $('.tree > ul > li').width();
      $('.tree > ul').width(largura + 10);
      $('.tree').width('auto');
    });
    /*Now the CSS*/
    
    * {
      margin: 0;
      padding: 0;
    }
    
    .tree {
      display: block;
      width: 9999px;
      overflow: auto;
    }
    
    .tree ul {
      padding-top: 20px;
      position: relative;
      transition: all 0.5s;
      -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 5px;
      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: 1px solid #ccc;
      width: 50%;
      height: 20px;
    }
    
    .tree li::after {
      right: auto;
      left: 50%;
      border-left: 1px solid #ccc;
    }
    
    
    /*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: 1px solid #ccc;
      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: 1px solid #ccc;
      width: 0;
      height: 20px;
    }
    
    .tree li a {
      border: 1px solid #ccc;
      padding: 5px 10px;
      text-decoration: none;
      color: #666;
      font-family: arial, verdana, tahoma;
      font-size: 11px;
      display: inline-block;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      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: #c8e4f8;
      color: #000;
      border: 1px solid #94a0b4;
    }
    
    
    /*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;
    }
    
    
    /*Thats all. I hope you enjoyed it.
    Thanks :)*/
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!--WewillcreateafamilytreeusingjustCSS(3)Themarkupwillbesimplenestedlists--><divclass="container">
      <div class="row">
        <div class="col-md-12">
          <h1>Título</h1>
        </div>
        <div class="col-md-12">
    
          <div class="tree">
            <ul>
              <li>
                <a href="#">Parent</a>
                <ul>
                  <li>
                    <a href="#">Child</a>
                    <ul>
                      <li>
                        <a href="#">Grand Child</a>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a href="#">Child</a>
                    <ul>
                      <li><a href="#">Grand Child</a></li>
                      <li>
                        <a href="#">Grand Child</a>
                        <ul>
                          <li>
                            <a href="#">Great Grand Child</a>
                          </li>
                          <li>
                            <a href="#">Great Grand Child</a>
                          </li>
                          <li>
                            <a href="#">Great Grand Child</a>
                          </li>
                        </ul>
                      </li>
                      <li><a href="#">Grand Child</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
    
        </div>
        <div class="col-md-12">
          <p>texto</p>
        </div>
      </div>
    </div>
        
    04.08.2017 / 14:02