how to design a tree with css without using (:before, :last-child and Jquery) [duplicate]

Question

How can I design a tree without using (:before, :last-child and :after) because they are not supported in my project (I am using IE7). The problem is that the left border of the list does not stop at the last item.

Example of the problem:

error

The solution should look like:

ok

Here is a fragment of my jsp code:

    <s:if test="testDev == ''">
    <s:if test="reponseDTO.testDevItemDTOMap.size > 0">
        <div class="misc_pad" style="position:relative">
            <p class="p_spacer"><b>Dev</b></p>
            <s:iterator value="reponseDTO.testDevItemDTOMap" status="testDevStatus">
                <div class="menu_test">
                    <div>
                        <a href="expandtestDev_<s:property value="#testDevStatus.index" />" rel="expandtest">
                            <s:if test="reponseDTO.testDevNiveau2ItemDTOMap.get(key).size > 0"><img id="expandTree" src="<portal-logic:urlFindInTheme file="images/sdin/layout/open_content.gif" />" /> 
                            </s:if>
                        </a>
                        <a href="<s:property value="value.valeurP" />" rel="testDev" class="menu_test_lien">
                        <s:property value="value.libelle" /> (<s:property value="value.nombreDocuments" />)</a>
                    </div>
                    <s:if test="reponseDTO.testDevNiveau2ItemDTOMap.get(key).size > 0">
                        <ul id="expandtestDev_<s:property value="#testDevStatus.index" />"> 
                            <s:iterator value="reponseDTO.testDevNiveau2ItemDTOMap.get(key)" status="testDevNiveau2Status">
                                <li>
                                    <div class="menu_test">
                                        <div>
                                            <a href="expandtestDevNiveau2_<s:property value="#testDevStatus.index" />_<s:property value="#testDevNiveau2Status.index" />" rel="expandtest">
                                                <s:if test="reponseDTO.testDevNiveau3ItemDTOMap.get(valeurP).size > 0">
                                                    <img id="expandTree" src="<portal-logic:urlFindInTheme file="images/sdin/layout/open_content.gif" />" />
                                                </s:if>
                                            </a>
                                            <a href="<s:property value="valeurP" />" rel="testDev" class="menu_test_lien">
                                                <s:property value="libelle" /> (<s:property value="nombreDocuments" />)
                                            </a>
                                        </div>
                                        <s:if test="reponseDTO.testDevNiveau3ItemDTOMap.get(valeurP).size > 0">
                                            <ul id="expandtestDevNiveau2_<s:property value="#testDevStatus.index" />_<s:property value="#testDevNiveau2Status.index" />">
                                                <s:iterator value="reponseDTO.testDevNiveau3ItemDTOMap.get(valeurP)" status="testDevNiveau3Status">
                                                    <li>
                                                        <a href="<s:property value="valeurP" />" rel="testDev" class="menu_test_lien"><s:property value="libelle" /> (<s:property value="nombreDocuments" />)</a>
                                                    </li>
                                                </s:iterator>                               
                                            </ul>
                                        </s:if>
                                    </div>
                                </li>
                            </s:iterator>                               
                        </ul>
                    </s:if>
                </div>
            </s:iterator>
        </div>
    </s:if>                     
</s:if>

I found this piece of code that looks like what I want:

 

   .test ul {
  padding:0;
  margin: 0; 
  margin-left:6px;
  list-style:none;
  background: #fff;
  color:#000;
  position:relative;
}

.test ul:before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  border-left:1px solid #000;
}

.test li {
  margin:0;
  padding:0 16px; 
  line-height:2em; 
  font-weight:bold;
  position:relative;
}

.test li:before {
  content:"";
  display:block;
  width:10px; 
  height:0;
  border-top:1px solid #000;
  margin-top:-1px; 
  position:absolute;
  top:1em; 
  left:0;
}

.test li:last-child:before {
  background:white; 
  height:auto;
  top:1em; 
  bottom:0;
}

    <html>
<head>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div class="test">
        <div>
            <a href="#"> + </a>
            <a href="#"> Label A </a>
        </div>
        <ul>
            <li>
                <div class="test">
                    <div>
                        <a href="#"> + </a>
                        <a href="#"> Label A1 </a>
                    </div>
                    <ul>
                        
                        <li>
                            <div class="test">
                                <div>
                                    <a href="#"> + </a>
                                    <a href="#"> Label A11 </a>
                                </div>
                            </div>
                        </li>
                        
                        <li>
                            <div class="test">
                                <div>
                                    <a href="#"> + </a>
                                    <a href="#"> Label A12 </a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

Any help will be appreciated.

Santhosh Kumar · Accepted Answer · 2016-10-20 08:50:29Z

I have made it using flex box refer the snippet below. Hope you are looking something like this

.outerBdr{
  border-left:1px solid #dfdfdf;
  position:relative;
  display:flex;
  flex-flow: column wrap;
  align-items:flex-start;
  justify-content:space-between;
  overflow:auto
}
.cenBdr{
  position:relative;
  padding-left:30px;
  display:flex;
  align-items:center;
  margin-bottom:10px
}
.cenBdr label,.cenBdrInr label{
  position:relative;
  margin-right:5px;
  align-self:flex-start
} 
.cenBdr label:before, .cenBdrInr label:before{
    content: '';
    position: absolute;
    left: -51px;
    width: 33px;
    height: 1px;
    border-top: 1px solid #dfdfdf;
    top: 50%;
}
.cenBdrInr label:before{
  width:30px;
  left:-48px
}
.cenBdrInr{
    align-items: flex-start;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;  
    padding-left: 30px;
    border-left: 1px solid #dfdfdf;
    position:relative
}
.cenBdrInr > div{
  margin-bottom:10px;
  display:flex
}
.cenBdr input{
  align-self:flex-start;
}

<div class="outerBdr">
   <div class="cenBdr">
      <input type="checkbox" id="name">
      <label for="name">Name</label>
   </div>
   <div class="cenBdr">
      <input type="checkbox" id="mark">
      <label for="mark">Marks</label>
      <div class="cenBdrInr">
         <div>
            <input type="checkbox" id="subj1">
            <label for="sub1">Subj1</label>
            <div class="cenBdrInr">
               <div>
                  <input type="checkbox" id="subj1">
                  <label for="sub1">Subj1</label>
               </div>
               <div>
                  <input type="checkbox" id="subj2">
                  <label for="subj2">subj2</label>
               </div>
               <div>
                  <input type="checkbox" id="subj3">
                  <label for="subj3">subj3</label>
                  <div class="cenBdrInr">
                     <div>
                        <input type="checkbox" id="subj1">
                        <label for="sub1">Subj1</label>
                     </div>
                     <div>
                        <input type="checkbox" id="subj2">
                        <label for="subj2">subj2</label>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div>
            <input type="checkbox" id="subj2">
            <label for="subj2">subj2</label>
         </div>
         <div>
            <input type="checkbox" id="subj3">
            <label for="subj3">subj3</label>
         </div>
      </div>
   </div>
   <div class="cenBdr">
      <input type="checkbox" id="id">
      <label for="id"> ID</label>
   </div>
   <div class="cenBdr">
      <input type="checkbox" id="rank">
      <label for="rank"> Rank</label>
   </div>
   <div class="cenBdr">
      <input type="checkbox" id="rating">
      <label for="rating"> rating</label>
       <div class="cenBdrInr">
         <div>
            <input type="checkbox" id="subj1">
            <label for="sub1">Subj1</label>
            <div class="cenBdrInr">
               <div>
                  <input type="checkbox" id="subj1">
                  <label for="sub1">Subj1</label>
               </div>
               <div>
                  <input type="checkbox" id="subj2">
                  <label for="subj2">subj2</label>
               </div>
               <div>
                  <input type="checkbox" id="subj3">
                  <label for="subj3">subj3</label>
                  <div class="cenBdrInr">
                     <div>
                        <input type="checkbox" id="subj1">
                        <label for="sub1">Subj1</label>
                     </div>
                     <div>
                        <input type="checkbox" id="subj2">
                        <label for="subj2">subj2</label>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div>
            <input type="checkbox" id="subj2">
            <label for="subj2">subj2</label>
         </div>
         <div>
            <input type="checkbox" id="subj3">
            <label for="subj3">subj3</label>
         </div>
      </div>
   </div>
   <div class="cenBdr">
      <input type="checkbox" id="class">
      <label for="class"> class</label>
   </div>
</div>

I've made this, what I wanted was that the left bar stops at the last item no more

Collectives™ on Stack Overflow

how to design a tree with css without using (:before, :last-child and Jquery) [duplicate]

Example of the problem:

The solution should look like:

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Example of the problem:

The solution should look like:

1 Answer 1

1 Comment

Linked

Related