To Do List Project: Part 9

I spent way too many hours not getting something to work that should be simple. I’m sure that I’m missing something obvious but I need to throw in the towel for today and get a post up.

The problem is this: I’m redoing all the screens to use responsive formatting with Bootstrap and the features I’ve used so far on the Update To Do item page have all worked fine. I went to replace the standard navigation menu, defined in the NavMenu.php file, with a collapsible Bootstrap-style version. I started by copying in a simple example of such a menu, edited to reflect the navigation options from this application, only to find that it didn’t display the way I expected it to. All that would display is a very small box with no detail, which represented the button that should appear at the right end of the top menu. It neither displayed at the right end of the top menu bar nor expanded when clicked.

Some inspection and reading clarified how the reference to the Bootstrap CSS file needs to be added in the header and the references to the jQuery and Bootstrap JavaScript files need to be included at the bottom of the page body. That made the expand and collapse operations work but the button was still not in the correct location and none of the formatting was correct. It was as if the file was picking up the Bootstrap JavaScript but none of the Bootstrap CSS.

I tried building a simple HTML page that includes essentially nothing but the menu code, and that worked fine. I then changed the name of the test file to use a PHP extension, but which used no PHP code (the idea was to reference the NavMenu.php file using an include statement as I have been), and that also worked — when I ran it directly from disk. I then ran it from a server in CloudNine and it didn’t work, which is maddening.

It occurred to me that there may be a version mismatch between the jQuery and Bootstrap (CSS and JavaScript) files but why would that only show up when running from a server?

By the way, I also tried a number of combinations and permutations on the original Update To Do item page and found that the CSS must be getting picked up because all of the other bootstrap features work as expected. It’s just the collapsible menu that’s giving me fits. Like I said before, I’m probably missing something mindless, and I’m definitely beating the related mechanisms into my programming “muscle” memory, but for right now I’m stumped.

Here’s the code for the standalone PHP file that works when run from disk but not when run from a server.

Here’s how the sample page should look when the screen is wide enough to show the menu items:

Here’s how the sample page should look when the screen is collapsed so that only the button shows. I can confirm that the button can be clicked to show the correct vertical menu.

Here’s how the sample page looks when it doesn’t work. Clicking on the button shows or hides the vertical menu items but the menu items never show horizontally.

It seems to me that the Bootstrap JavaScript is working and the Bootstrap CSS is not working. If you have any ideas, feel free to give me a shout.

This entry was posted in Software and tagged , , , . Bookmark the permalink.

Leave a Reply