How to filter & sort with php?

[rockedge]

Contact18 works better on my mobile phone but the modal looks a bit wide on the laptop.

Try the latest contact18. I added the modal class to each media query in the CSS so the modal box should auto size now according to the detected screen size using the CSS media queries

The modal box should size now to screen size and orientation on mobile devices and then adjust for larger resolutions on desktops and laptops.

UPDATE: so far testing it out the modal sizing is working and seems like clicking on each filter form field will clear it.

Screenshot(15).gif (123.24 KiB) Viewed 1757 times

[smokey01]

@rockedge attached is my actual code for the main database that I have been working on. I have been reluctant to share the database as it contains lots of personal data. I need to be able to put my hand on my heart and say I did not share it.
Anyway, what I have done is add the additional fields to the contacts17 database. Whatever changes we make to this code, contact20, I can simply swap the database. It would have made sense for me to do this at the beginning, duh.

Lets just work on contact20 from now on.

I will check out the new 18 and get back to you.

Thanks

[smokey01]

@rockedge I just had a look at your 18 and it looks very nice. I like the way it changes when the browser width on the computer is changed. Is there scope to change the trigger point for final tuning. I haven't worked out how you've done it yet but I will investigate further.
It looks good on both Phone and Laptop.
Thanks

[smokey01]

@rockedge I mashed it all together and it seems to work very well.

There is one issue on the phone where the popup does not display all of the information in landscape mode and it can't be scrolled down. It's just the last line of the comments if you have a look at the first record.

contact21 is now the current version which is attached. I have also uploaded it: https://smokey01.net/contact21/

[rockedge]

@smokey01 This is good news!

Now to hammer out these little details. I am testing out contact21 and checking the different displays and I see the scrolling has been enabled. Does this solve the accessibility of the data on the individual info window display?

In contact20 I added to the CSS a height: value which improved the visibility. Does this work on your site using contact21?

Code: Select all

/* Modal Content */
.modal-content {
  background-color: #FBFB9B;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  border-radius:10px;
  box-shadow:8px 15px 20px #404040;
  width: 45%;
  height: 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) and (min-width: 550px) {
		.priority-5{
			display:none;
		}
/* Modal Content */
  .modal-content {
    background-color: #fbfb9b;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    border-radius:10px;
    box-shadow:8px 15px 20px #404040;
    width: auto;
    height: 65%;
  }
}
	
@media screen and (max-width: 550px) {
		.priority-5{
			display:none;
		}
		.priority-4{
			display:none;
		}
/* Modal Content */
  .modal-content {
    background-color: #fbfb9b;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    border-radius:10px;
    box-shadow:8px 15px 20px #404040;
    width: auto;
    height: 40%;
  }		
}
	
@media screen and (max-width: 300px) {
		.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: 20px;
    border: 1px solid #888;
    border-radius:10px;
    box-shadow:8px 15px 20px #404040;
    width: auto;
    height: 40%;
  }	

Also in contact20.php I add height="100%" instead of height="auto"

Code: Select all

<iframe id="more" onload="iframeLoaded()" frameborder="0" src="" height="100%" width="100%" scrolling="yes">Your browser does not support iframes</iframe>

[smokey01]

@smokey01 This is good news!

I'm not sure why it's good news.

Now to hammer out these little details. I am testing out contact21 and checking the different displays and I see the scrolling has been enabled. Does this solve the accessibility of the data on the individual info window display?

Not that I can see.

In contact20 I added to the CSS a height: value which improved the visibility. Does this work on your site using contact21?

It does seem to help but it's still not quite right.

Code: Select all

/* Modal Content */
.modal-content {
  background-color: #FBFB9B;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  border-radius:10px;
  box-shadow:8px 15px 20px #404040;
  width: 45%;
  height: 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) and (min-width: 550px) {
		.priority-5{
			display:none;
		}
/* Modal Content */
  .modal-content {
    background-color: #fbfb9b;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    border-radius:10px;
    box-shadow:8px 15px 20px #404040;
    width: auto;
    height: 65%;
  }
}
	
@media screen and (max-width: 550px) {
		.priority-5{
			display:none;
		}
		.priority-4{
			display:none;
		}
/* Modal Content */
  .modal-content {
    background-color: #fbfb9b;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    border-radius:10px;
    box-shadow:8px 15px 20px #404040;
    width: auto;
    height: 40%;
  }		
}
	
@media screen and (max-width: 300px) {
		.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: 20px;
    border: 1px solid #888;
    border-radius:10px;
    box-shadow:8px 15px 20px #404040;
    width: auto;
    height: 40%;
  }	

Also in contact20.php I add height="100%" instead of height="auto"

Code: Select all

<iframe id="more" onload="iframeLoaded()" frameborder="0" src="" height="100%" width="100%" scrolling="yes">Your browser does not support iframes</iframe>

I have also noticed that the search and header tables have lost their alignment on the mobile phone in portrait mode. See image on my last message. I'm still trying to understand the @media command. It looks very powerful and the examples w3schools provide https://www.w3schools.com/css/css3_mediaqueries_ex.asp are very good but trying to associate this with screen sizes and priorities is doing my head in. I guess the priorities in the main php and css files need to be be aligned. IOW if I change priority-1 in php then it also needs to be changed in css. For the main php page I guess I need to change the priorities to make sure the columns are displayed in the correct order. LastName should be priority-1 FirstName should be priority-2 Course=priority-3, Rank=priority-4, PassedAway=priority-5 and ID=priority=6. This way on a very narrow phone in portrait mode at least FirstName and LastName should be visible so searching on these two fields is possible. Is this how it suppose to work?
All fields need to be displayed on the modal.

[rockedge]

I'm not sure why it's good news.

Because it (almost) works. I'll have to review my language skills, I don't seem to be communicating to everyone's expectations.

[smokey01]

Your language skills are fine it's just me, I'm very literal. I'm always giving my wife a hard time as she says words like she, her, they and he out of the blue without reference. I honestly have no idea what's she is talking about. I say people have names for a reason and that's when the argument often starts.

Sorry for the digression. I actually understood your meaning, just wanted to make sure.

Yes, we are very close . I think I may have broken the table alignment regarding search and headers as it went from 5 columns to 6. Just need to try and work out why/how.

I'm going to look closer at the priority-x and see if I can make that work the way I want. I need to see if there is a relationship between the priorities in the PHP and CSS files.

I'm not sure why it's good news.

Because it (almost) works. I'll have to review my language skills, I don't seem to be communicating to everyone's expectations.

[rockedge]

@smokey01 I have rearranged the priority-X to have certain columns continue to display as the screen size shrinks.
Remove priority-6. You can use for example a priority-5 more than once.

The CSS file doesn't need any modification other than if any priority-6 code is present to remove it.

contact21.php from around line 22 ->

Code: Select all

<!--added width property-->
 <table id="main-table" border="1" bgcolor="lightblue" width="100%">
   <tr>
    <th class='priority-5'>ID</th>
    <th class='priority-4'>Rank</th>
    <th class='priority-2'>First Name</th>
    <th class='priority-1'>Last Name</th>
    <th class='priority-3'>Course</th>
    <th class='priority-5'>Passed Away</th>
</tr

This is the PHP section from contact21.php ->

Code: Select all

<?php
   class MyDB extends SQLite3
   {
      function __construct()
      {
         $this->open('contact21.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-5'>".$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();
?>

Now the table headers (th) need to be realigned.

[smokey01]

@rockedge I used your code below then added quite a few little changes to it. Your code didn't work for me.

I am now happy with the alignment on my mobile phone and desktop. My phone has a resolution of 1080 x 2340. In portrait mode (1080) it now displays FirstName and LastName only but they align quite nicely.
In landscape mode (2340) it displays Rank, FirstName, LastName, Course and PassedAway. These are the typical fields I would use to search with. ID is not something I would search on as it is only the record number and has no significance to the people in the database.

I am still not satisfied with the modal so it's a work in progress. Below is my new code for contact21.php and contact21.css.

contact21.php

Code: Select all

<!DOCTYPE html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes" />
	<link rel="stylesheet" href="contact21.css">
</head>

<body>
<div class="box">
<div id="filters">
<!--added width property-->
<table id="filters" border="1" width="100%" bgcolor="lightblue">
<tr>   
	<th class='priority-6'><input type="text" id="ID" onfocus="this.value=''" placeholder="ID" onkeyup="filterTable2()"></th>
	<th class='priority-4'><input type="text" id="Rank" onfocus="this.value=''" name="Rank" placeholder="Rank" onkeyup="filterTable2()"></th>
	<th class='priority-2'><input type="text" id="FirstName" onfocus="this.value=''" name="FirstName" placeholder="First Name" onkeyup="filterTable2()"></th>
	<th class='priority-1'><input type="text" id="LastName" onfocus="this.value=''" name="LastName" placeholder="Last Name" onkeyup="filterTable2()"></th>
	<th class='priority-3'><input type="text" id="Course" onfocus="this.value=''" name="Course" placeholder="Course" onkeyup="filterTable2()"></th>
	<th class='priority-5'><input type="text" id="PassedAway" onfocus="this.value=''" name="PassedAway" placeholder="Passed Away" onkeyup="filterTable2()"></th>
</tr>
</table>
</div>
<!--added width property-->
 <table id="main-table" border="1" bgcolor="lightblue" width="100%">
   <tr>
    <th class='priority-6'>ID</th>
    <th class='priority-4'>Rank</th>
    <th class='priority-2'>First Name</th>
    <th class='priority-1'>Last Name</th>
    <th class='priority-3'>Course</th>
    <th class='priority-5'>Passed Away</th>
</tr>
<?php
   class MyDB extends SQLite3
   {
      function __construct()
      {
         $this->open('contact21.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();
?>
</table>
</div>
<script type="text/javascript">
function iframeLoaded() {
   var iFrameID = document.getElementById('myModal');
      if(iFrameID) {
          // here you can make the height, I delete it first, then I make it again
          iFrameID.height = "";
          iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
      }   
}
</script> 
<!-- The Modal -->
<div id="myModal" class="modal">

<!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>

<p><form>Password: <input type="password" id="password"></form><button id="submit">Submit</button></p>

<!-- Rockedge code
<p><form>Password: <input type="password" id="password" size="12" autocomplete="current-password"></form><button id="submit">Submit</button></p> -->

<iframe id="more" onload="iframeLoaded()" frameborder="0" src="" height="100%" width="100%" scrolling="yes">Your browser does not support iframes</iframe>
  </div>
<script type="text/javascript" src="functions21.js"></script>
</body>
</html>

contact21.css

Code: Select all

/* CSS for contact21.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; 
    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;
}
/*-------------------------------*/

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

body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  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;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  border-radius:10px;
  box-shadow:8px 15px 20px #404040;
  width: 45%;
  height: 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) and (min-width: 550px) {
		.priority-6{
			display:none;
		}
/* Modal Content */
  .modal-content {
    background-color: #fbfb9b;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    border-radius:10px;
    box-shadow:8px 15px 20px #404040;
    width: auto;
    height: 65%;    
  }
}
	
@media screen and (max-width: 550px) {
		.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: 20px;
    border: 1px solid #888;
    border-radius:10px;
    box-shadow:8px 15px 20px #404040;
    width: auto;
    height: 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: 20px;
    border: 1px solid #888;
    border-radius:10px;
    box-shadow:8px 15px 20px #404040;
    width: auto;
    height: 40%;
  }	
}

Using priority-6 in both the css and php files seem to do the trick.

Modal to go .............................

[smokey01]

I think I may have found a solution for viewing the modal in landscape mode on a phone. At line 117 in contact21.css change the height from 65% to 110%. This makes the modal float so you can move it up and see all the text. It works on my phone, hopefully on other phones as well.

Code: Select all

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

[rockedge]

@smokey01 I modified the contact21 to match exactly what you have going right now. Looks really good except the modal on my phone in portrait mode does not float or scroll and the text is bleeding over the bottom edge.

The modal needs work or an alternative way of creating that info output. Work continues.....

Update: I broke contact21.php somehow!!

Looks like this caused it:

Code: Select all

<link rel="stylesheet" href="contact21-2.css">

Renamed it and good again.

Screenshot(45).jpg (36.61 KiB) Viewed 1595 times

[smokey01]

@smokey01 I modified the contact21 to match exactly what you have going right now. Looks really good except the modal on my phone in portrait mode does not float or scroll and the text is bleeding over the bottom edge.

Mine doesn't float in portrait mode, only in landscape mode. What is your mobile resolution?

The modal needs work or an alternative way of creating that info output. Work continues.....

Damn, thought I had it sorted.

Update: I broke contact21.php somehow!!

Looks like this caused it:

Code: Select all

<link rel="stylesheet" href="contact21-2.css">

Sorry about that I've been working with multiple CSS files. I've changed the code below in contact21.php to reflect the correct contact21.css file.

Renamed it and good again.
Screenshot(45).jpg

Now that you have sourced the correct css file does the modal work properly?

[rockedge]

@smokey01 With the short testing I have done, it seems to render the modal correctly to allow the space for the iframe.
resolution is 420x812

Screenshot(46).jpg (16.24 KiB) Viewed 1571 times

Screenshot(47).jpg (18.14 KiB) Viewed 1571 times

[rockedge]

at resolution 375x812 the modal in portrait mode is too short for the iframe.

Perhaps we can find a mechanism that will make the modal height dynamic

[smokey01]

at resolution 375x812 the modal in portrait mode is too short for the iframe.

Perhaps we can find a mechanism that will make the modal height dynamic

That would be a better solution if we can find one.

[smokey01]

@rockedge try changing the height and width in the <iframe> to auto.

Code: Select all

<iframe id="more" onload="iframeLoaded()" frameborder="0" src="" height="auto" width="auto" scrolling="yes">Your browser does not support iframes</iframe>

It would be nice to have the modal the same size in all orientations, desktops and mobiles. IOW the size it uses on the smallest screen should be the same for all screens. Using scroll bars this should be quite neat and tidy.

[smokey01]

I have bumped it to version 22, see attached.
I now like the size of the modal and the way it behaves on various devices. I have tested it on my phone using google-chrome, opera and Firefox. It also works well on a 7" ipad in safari.
It looks very good on my desktops and laptops.

There is only one last thing to fix, I think. I would like to be able to make the text area of the modal a bit larger to fit the background. The scroll bar should also be closer to the right side so there is less wasted space on the right and bottom of the modal.

[rockedge]

@smokey01 I think some tweaking of the iframe sizing to match the modal is what we're looking for since it is iframe on layered on top of the modal box.

[smokey01]

@smokey01 I think some tweaking of the iframe sizing to match the modal is what we're looking for since it is iframe on layered on top of the modal box.

Yes I've been fiddling with that. Setting the width to 400px has sorted the scroll bar issue but I'm not having the same success with the height.
@rockedge does your low res phone display properly?

[rockedge]

@smokey01 I am experimenting with a redesign of how the selected row's data is displayed. Trying out more.php converted to a function and using a modal and <div> construction instead of the iframe layered on top of the modal box.

I am also playing with responsive iframe mechanisms like this little test demo:

Code: Select all

<?php
// Test program for responsive iframe
?>
<head>
<style>
.iframe-container {
  overflow: hidden;
  padding-top: 75%;
  position: relative;
}

.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
</style>
</head>

<div class="iframe-container"><iframe src="more.php?password=passwdhere&id=1"></iframe></div>

in an attempt to have use the current code and just find a way to expand the iframe to match the text block size and expand to match the modal box.

[smokey01]

@smokey01 I am experimenting with a redesign of how the selected row's data is displayed. Trying out more.php converted to a function and using a modal and <div> construction instead of the iframe layered on top of the modal box.

I am also playing with responsive iframe mechanisms like this little test demo:

Code: Select all

<?php
// Test program for responsive iframe
?>
<head>
<style>
.iframe-container {
  overflow: hidden;
  padding-top: 75%;
  position: relative;
}

.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
</style>
</head>

<div class="iframe-container"><iframe src="more.php?password=passwdhere&id=1"></iframe></div>

in an attempt to have use the current code and just find a way to expand the iframe to match the text block size and expand to match the modal box.

I'll be interested to see your efforts.

[rockedge]

@smokey01 Making some headway with the experimental program that is simulating a modal look.

This exercise is to get a better understanding of the interactions of the nested <div> containers making the modal with the layered within iframe.

This is the code I am working with. To use it place test.php into /contact22 directory and then try different screen sizes with it. The next step is to integrate the behavior into the existing code. I am trying to use what is already in place that generates the modal and info box and add these adjustments into what we have going now.

Code: Select all

<?php
/* Test program for modal and iframe auto-sizing in contact22 */
?>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes" />	
	
<style>

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* 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: 95%;	/* 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;
}

.iframe-container2 {
    border: 0;
	max-width: 100%;
	padding-top: 0%;
	position: relative;
	width: 100%;
}



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

@media screen and (max-width: 900px) and (min-width: 550px) {
		.priority-6{
			display:none;
		}
/* 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: 85%;	/* Original 45% */
  height: 75%;	/* Original 65% */
 }
}
	
@media screen and (max-width: 550px) {
		.priority-6{
			display:none;
		}
		.priority-5{
			display:none;
		}
		.priority-4{
			display:none;
		}
		.priority-3{
			display:none;
		}
/* 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: 75%;	/* Original 45% */
  height: 65%;	/* Original 65% */
 }		
}
	
@media screen and (max-width: 300px) {
		.priority-6{
			display:none;
		}
		.priority-5{
			display:none;
		}
		.priority-4{
			display:none;
		}
		.priority-3{
			display:none;
		}
		
/* 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: 45%;	/* Original 45% */
  height: 65%;	/* Original 65% */
 }	
}

</style>
    <script>
        let div = document.getElementById("target");
        div.onload = function() {
            div.style.height =
            div.contentWindow.document.body.scrollHeight + 'px';
        }
    </script>
</head>

<div class="modal-content">
  <div class="iframe-container2">
	  <iframe src="more.php?password=top-secret&id=1" id="target"></iframe>
  </div>
</div>

[rockedge]

I am only running test.php like http://localhost/contact22/test.php

The information in the test modal comes from a direct iframe call to more.php inside test.php. I have not tried to integrate this into contact22 as I experiment with it.

Yes it is testing the nesting but most improtantly the iframe sizing is important.
test.php running in developer tool responsive screen emulator:

Screenshot(52).jpg (40.62 KiB) Viewed 1426 times

Screenshot(53).jpg (40.15 KiB) Viewed 1426 times

[smokey01]

Ah, you mean like this:

Code: Select all

https://smokey01.net/contact22/test.php

I didn't read your message correctly. First I used test.php to replace more.php. Then I just added test.php to the /contact22 directory, nothing changed duh. Then the penny dropped.

https://smokey01.net/contact22/test.php seems to work quite well on both desktop and phone.

[rockedge]

@smokey01 I have integrated the test.php ideas into contact23. Please try it out and see how it looks to you

[smokey01]

Excellent. Will check it out.
Thanks

[smokey01]

Contact23 works very well with my phone and also very well with desktop browsers. If one plays silly buggers and makes the browser too small with a desktop browser the text can spill over the modal once the scroll bar is activated.

xscreenshot-20231110T220253.png (94.46 KiB) Viewed 1362 times

[smokey01]

@rockedge and @puppy_apprentice I couldn't understand why two different databases behaved differently with the same schema. It just didn't make sense. Having looked a bit closer I noticed it's the data in the databases causing the issue.
The contact23 database has shorter strings than the other database. If you look at :
https://smokey01.net/contact23/contact23.php
on a phone in portrait mode you will see the alignment issue now that I have edited Didio to a much larger surname. I don't understand why the surname does not wrap like the firstname does. I edited the second record to make it a much longer firstname and it wraps nicely.

Ah, I see it wraps if there are spaces between words. One long word will not wrap.

I was trying to get: wordwrap ($str,15); to work but I'm stuck on the syntax. Maybe it's not possible in tables.

[puppy_apprentice]

You can edit examples in W3Schools editor and check your ideas:

editor.png (51.37 KiB) Viewed 1194 times

I think that you omitted delimiter part of the function.

Example without PHP.