How to filter & sort with php?

[smokey01]

@puppy_apprentice I had looked at that but still had problems making it work. After some thought it wouldn't do what I wanted anyway because it did not wrap long words. If there were two long words it would put the second word on the next line but it does that now.
Apparently it's possible to set the word length and if the word is greater than the length it shows dots. EG: Set the word length to 15 characters and the following is displayed: Supercalifragil...
This would be acceptable. Also another option would be to shrink the font size to make it fit the space.

Code: Select all

<?php
   class MyDB extends SQLite3
   {
      function __construct()
      {
         $this->open('contact23.sqlite');
      }
   }
   $db = new MyDB();
   if(!$db){
      echo $db->lastErrorMsg();
   } else {
   }
 $ret = $db->query("SELECT * FROM Details");
   while($row = $ret->fetchArray(SQLITE3_ASSOC) ){
     echo "<tr onclick=\"More(".$row['ID'].")\";><td class='priority-6'>".$row['ID']."</td>";
     echo "<td class='priority-4'>".$row['Rank']."</td>";
     echo "<td class='priority-2'>".$row['FirstName']."</td>";
     echo "<td class='priority-1'>".$row['LastName']."</td>";
     echo "<td class='priority-3'>".$row['Course']."</td>";
     echo "<td class='priority-5'>".$row['PassedAway']."</td></tr>";    
   }
   $db->close();
?>

These are the two lines I think I need to modify.

Code: Select all

echo "<td class='priority-2'>".$row['FirstName']."</td>";
echo "<td class='priority-1'>".$row['LastName']."</td>";

[rockedge]

Also another option would be to shrink the font size to make it fit the space.

Experimenting with this idea as an option. Also trying out adding more finely stepped media selectors in the CSS and changing the screen size values which does improve the sizing responsiveness.

It is the string lengths configured in the database tables that are causing me grief! Keeping that in mind I continue........

[rockedge]

@smokey01 I made some changes to the CSS file that reduces the font size to 10px. Also adjusted the media selector screen size values.

My testing shows it seems to work better than ever. Try out the CSS file with your actual target database and contact23.php.
The tables seem to stay in alignment throughout changing the media screen size.

Code: Select all

/* CSS for contact23.php */

body {
  background-color: lightgrey;
}

th {
    cursor: pointer;
    background-color: lightgreen;
    position: sticky;
    top: 33px;
}

div #filters {
	position: sticky;
    top: 0px;
}
div.box { 
	background-color:#f8f8f8; 
	max-width:805px; 
	margin:20px auto 50px; 
	padding:50px; 
	border-radius:10px; 
	border:1px solid #808080; 
 	box-shadow:8px 15px 20px #404040;

}
/* added for columns alligment*/
th input {
background-color:#FFFF00; /* #ffff00 */
    width: 100%;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
th.priority-1 {
	width: 120px;
}
th.priority-2 {
	width: 120px;
}
th.priority-3 {
	width: 120px;
}
th.priority-4 {
	width: 40px;
}
th.priority-5 {
	width: 120px;
}
th.priority-6 {
	width: 40px;
}
/*-------------------------------*/

.iframe-container2 {
    border: 0;
	max-width: 100%;
	padding-top: 0%;
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
}

iframe {
	aspect-ratio: 4 / 3;
	height: 100%;
	width: 100%;
	border: 0;
}

/*-------------------------------*/

#main-table tr:hover {background-color: #ddd; color: red; font-weight: bold;}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;

}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 10px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width 100% */
  height: 100%; /* Full height 100% */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fbfb9b; /* fbfb9b */
  margin: auto;	/* Original auto */
  padding: 20px;
  border: 1px solid #888;
  border-radius:10px;
  box-shadow:8px 15px 20px #404040;
  width: 65%;	/* Original 45% */
  height: 100%;	/* Original 65% */
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

@media screen and (max-width: 900px) {
		.priority-6{
			display:none;
		}
/* Modal Content */
  .modal-content {
    background-color: #fbfb9b;
    margin: auto;
    padding: 10px;
    border: 1px solid #888;
    border-radius:10px;
    box-shadow:8px 15px 20px #404040;
    width: 85%;
    height: 100%;
  }
}
	
@media screen and (max-width: 700px) {
		.priority-6{
			display:none;
		}
		.priority-5{
			display:none;
		}
		.priority-4{
			display:none;
		}
		.priority-3{
			display:none;
		}
/* Modal Content */
  .modal-content {
    background-color: #fbfb9b;
    margin: auto;
    padding: 10px;
    border: 1px solid #888;
    border-radius:10px;
    box-shadow:8px 15px 20px #404040;
    width: auto;	/* Original auto */
    height: 100%;	/* Original 65% */
  }
  

@media screen and (max-width: 308px) {
		.priority-6{
			display:none;
		}
		.priority-5{
			display:none;
		}
		.priority-4{
			display:none;
		}
		.priority-3{
			display:none;
		}
		
/* Modal Content */
  .modal-content {
    background-color: #fbfb9b;
    margin: auto;
    padding: 10px;
    border: 1px solid #888;
    border-radius:10px;
    box-shadow:8px 15px 20px #404040;
    width: 400px;		/* Original auto */
    height: fit-content;	/* Originally 40% */
  }
 
@media screen and (max-width: 300px) {
		.priority-6{
			display:none;
		}
		.priority-5{
			display:none;
		}
		.priority-4{
			display:none;
		}
		.priority-3{
			display:none;
		}
		.priority-2{
			display:none;
		}
		
/* Modal Content */
  .modal-content {
    background-color: #fbfb9b;
    margin: auto;
    padding: 10px;
    border: 1px solid #888;
    border-radius:10px;
    box-shadow:8px 15px 20px #404040;
    width: 400px;		/* Original auto */
    height: fit-content;	/* Originally 40% */
  }  	
}

[smokey01]

@rockedge changing the FirstName and LastName data from CAPITALS to Camel Case made quite a difference. Not perfect but better. Will checkout your changes. Thanks.

[smokey01]

@smokey01 I made some changes to the CSS file that reduces the font size to 10px. Also adjusted the media selector screen size values.

My testing shows it seems to work better than ever. Try out the CSS file with your actual target database and contact23.php.
The tables seem to stay in alignment throughout changing the media screen size.

The new css file works really well. The 10px font is a little small however, so I changed it to 14px and that looks really good here on both the desktop and phone. It seems to default to about 20px if a font is not specified. Anyway I think this is the winner. Thanks.

[puppy_apprentice]

Apparently it's possible to set the word length and if the word is greater than the length it shows dots. EG: Set the word length to 15 characters and the following is displayed: Supercalifragil...

I think that you need substr() function:

substr.jpg (29.63 KiB) Viewed 509 times

and strlen() function.

Code: Select all

if (strlen($string) > 12 ) {
            echo substr($string,0,12), "...";
}

[rockedge]

@smokey01 I added some spaces to the password : form text label on the modal.

Line 60 in contact23.php

Code: Select all

<!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
	<form>Password : <input type="password" id="password"></form><button id="submit">Submit</button>
    <iframe id="more" src="" scrolling="yes">Your browser does not support iframes</iframe>
  </div>

[smokey01]

For the moment I have stopped development on this project. I may continue at a later date to add some more fields, change the form and make the fields editable.
Thanks to all that helped.
Merry Christmas