Click here to Skip to main content
15,946,988 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
I have a treeview with several internal branches that work well on large computer screens, but the problem I am facing is that when I display it on mobile phone screens, it appears very poorly and completely uncoordinated. The letters also appear very fragmented and irregular. Please help me with the necessary formatting and adjustments to make the treeview work smoothly on mobile screens. I will include the captured images when displayed on computer screens and mobile screens to show the problem I am facing.

What I have tried:

The treeview works smoothly on mobile screens. I will include the captured images when displayed on computer screens and mobile screens to show the problem I am facing.
HTML
  1   <section class="content">
  2        <div class="container-fluid">
  3            <div class="card">
  4                <div class="card-header" 
  5                    style="color: rgba(0, 115, 152, 1)">
  6                     قيود اليومية
  7                </div>
  8                     <div class="card-body">
  9              <div class="col-md-6">
 10  // The treeview is displayed based on this function 
 11  // that has been previously set up.
 12            </div>
 13         </div>
 14        <div class="card-footer text-body-secondary">
 15      </div> 
 16      </div>
 17     </div></section>
 18  
 19  // The treeview is displayed based on this function 
 20  // that has been previously set up.
 21  
 22        <div class="card-footer text-body-secondary">
 23      </div> 

Treeview CSS:
CSS
  1  .tree, .tree ul {
  2      margin:0;
  3      padding:0;
  4      list-style:none;
  5      margin-right:10px;
  6  }
  7  
  8  .tree ul {
  9      margin-right:1em;
 10      position:relative
 11  }
 12  
 13  .tree ul ul {
 14      margin-right:.5em
 15  }
 16  
 17  .tree ul:before {
 18      content:"";
 19      display:block;
 20      width:0;
 21      position:absolute;
 22      top:0;
 23      bottom:0;
 24      right:0;
 25      border-right:1px solid
 26  }
 27  
 28  .tree li {
 29      margin:0;
 30      padding:0 1em;
 31      line-height:2em;
 32      color:#369;
 33      font-weight:700;
 34      position:relative
 35  }
 36  
 37  .tree ul li:before {
 38      content:"";
 39      display:block;
 40      width:10px;
 41      height:0;
 42      border-top:1px solid;
 43      margin-top:-1px;
 44      position:absolute;
 45      top:1em;
 46      right:0
 47  }
 48  
 49  .tree ul li:last-child:before {
 50      background:#fff;
 51      height:auto;
 52      top:1em;
 53      bottom:0
 54  }
 55  
 56  .indicator {
 57      margin-right:5px;
 58  }
 59  
 60  .tree li a {
 61      text-decoration: none;
 62      color:#369;
 63  }
 64  
 65  .tree li button, .tree li button:active, .tree li button:focus {
 66      text-decoration: none;
 67      color:#369;
 68      border:none;
 69      background:transparent;
 70      margin:0px 0px 0px 0px;
 71      padding:0px 0px 0px 0px;
 72      outline: 0;
 73  }

Images:
Desktop https://i.stack.imgur.com/v9b08.png[^]
Mobile https://i.stack.imgur.com/pPoWr.png[^]
Posted
Updated 7-Sep-23 5:25am
v3
Comments
Richard Deeming 7-Sep-23 3:43am    
Aside from a single reference to Bootstrap's col-md-6 class, there is absolutely nothing in the code you have posted that uses media queries, or any other technique, to produce a responsive layout.

Responsive Web Design Introduction[^]
Member 16087262 7-Sep-23 9:04am    
I wrote php code to echo treeview by function but it did not appear in the comment, I do not know why. It is not necessary to have PHP code because we can create a treeview using HTML and create multiple internal branches for it and test its responsiveness on mobile screens. You can refer to this link and apply the idea to it by increasing the complexity of the existing treeview and making the necessary changes to ensure responsiveness.
https://stackoverflow.com/questions/76982329/how-to-make-treeview-fully-support-right-to-left-rtl-display-outer-ul-as-b
Member 16087262 7-Sep-23 3:52am    
@Richard Deeming
Inside dev class = col-md-6 there are php function echo treeview

// The treeview is displayed based on function that has been previously set up.
Richard MacCutchan 7-Sep-23 4:06am    
There is no PHP code in the snippet that you have posted above. Also, if you wish to reply to a comment then please use the Reply button above the other person's message.
Member 16087262 7-Sep-23 4:21am    
I wrote it but it did not appear in the comment, I do not know why. It is not necessary to have PHP code because we can create a treeview using HTML and create multiple internal branches for it and test its responsiveness on mobile screens. You can refer to this link and apply the idea to it by increasing the complexity of the existing treeview and making the necessary changes to ensure responsiveness.
https://stackoverflow.com/questions/76982329/how-to-make-treeview-fully-support-right-to-left-rtl-display-outer-ul-as-b

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900