Treeview not responding to mobile phone screen displays

Question

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 6-Sep-23 20:50pm

Member 16087262

Updated 7-Sep-23 5:25am

Deeksha Shenoy

v3

Add a Solution

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

Member 16087262 7-Sep-23 3:56am

Look at thise
https://stackoverflow.com/questions/77049843/treeview-not-responding-to-mobile-phone-screen-displays

Member 15627495 8-Sep-23 1:32am

Hello !

as simple as possible, you can act on 'folder image' size, and the 'font-size'.

as a quick sum up for all 'responsive' :
- the media queries are 'triggers' dedicated to load 'css parameters'.
those triggers fire when criterias are 'active' ( it could be a type of device, it could be a size : width or height ).

to write fast responsive css :
- read again your code and note all css parameters which will change when another display is coming.
- define your media queries
- in the media query scope, add all 'changing css parameters' [ it's basically 'static' or 'dynamic' // constants or non-constants ]
- set all those values for the becoming display as you want.
- well done ! ;)

[no name] 8-Sep-23 15:41pm

If you intend to run on "small screens", you start by designing / testing for "small screens"; not the other way around.

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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