Page styling question

Wappler General How To
#1

Current set-up : SPA Pages, Windows 10, MySQL, PHP

I would love to use the Design Mode more but I have the following problem, maybe someone can help me to get around it…

When I work on an SPA page, about 50% of the viewable area has gone to waste (as indicated by red arrows) because of my Header/Footer and Navigation Panels which are part of the master page. The Header/Footer and Navigation Panels only show as blank areas so I can’t even shrink them down by clicking on the relevant buttons.

image
image962×522 161 KB

Viewed in Chrome, with Header/Footer and Navigation Panels showing

image
image756×425 99.9 KB

Viewed in Chrome, with Header/Footer and Navigation Panels hidden

image
image756×425 84.8 KB

It’s an annoyance or at least frustrating, it’s not a deal breaker as I am very happy working in Code View.

It’s probably an easy fix, I just haven’t worked out what I am doing wrong.

What Do You Think of Wappler's Front End Design Tools?
#2

Well how did you style these panels? Do they have a fixed width/height or min width/height applied?
And how do you actually show and hide them?

#3

Good morning Teodor, they are includes

<?php include 'includes/incl_admin_left_nav.php';?>
<?php include 'includes/incl_admin_header.php';?>
Routes here
<?php include 'includes/incl_admin_footer.php';?>

Fixed width/height
Show/Hide using a variable, buttons are inside 'incl_admin_left_nav.php'

#4

Well that’s what should happen exactly then. You have some includes on the page and their styles are applied… you want to see the styles applied to the elements on your page.
Are these elements supposed to be initially hidden when the users load the page? How is the show/hide set up exactly?

#5

The user is meant to see these elements when entering the site. There is no reason why they can’t be hidden (or shrunk) when opening the page and the user ‘opens’ them if they want. There is no reason why I can set it that way just for localhost/local IP.

I know it’s a difficult one this because yes, the layout is as intended.

I suppose I just want to see the Child Page whilst working on just the child page. Maybe a “Show Includes on parent page” and “Hide Includes on parent page” button would be the simple solution. That would probably then introduce a host of other problems. Or “Hide Parent Page Elements”.

Obviously you can’t remove the Parent page altogether, but maybe the option of hiding from view for editing?

#6

I am not sure I fully understand you. Are these included on the content page or not? Or are you saying you see the includes from the main page on the content page?

#7

I’m sure you’ve tried this, but just in case…
I have pages with side-panels like this. The buttons to show/hide work in design view - if I ctrl+click them, in the same way as buttons will open modals etc. in design view, using the control key. I’m not using an SPA, so if this doesn’t work, that may be the reason.

#8

These panels are includes on the Parent Page

So when I go to edit say '_report_AD_new.php' which is an SPA Routed (Child) page I see the screenshots mentioned at the beginning.

#9

Hi Tom, if you look at my first screenshot it shows where the panels should be but no content (compare with browser view in screenshot 2). You are right, if I could see that content then I could click the buttons and shrink or hide the various panels. Unfortunately here lies the problem :slight_smile:

#10

So you see the includes from your parent page on a content/child page? I don’t think that’s supposed to happen, @patrick will check.

#11
#12

Here is the Parent Page 'dashboard.php' on it’s own.

It’s been like this for as long as I can remember. I’ve probably done something ‘unusual’ :smile:

image
image962×522 147 KB

#13

I was thinking the ‘<<back’ button was used to hide the panels - probably because I usually have a button in that position, for that purpose.

#14

No, these are my toggles…

image

#15

How is the div of the content page styled, does it have a padding depending on the panel sizes? Could you post a simplified version of how your html structure for the panels looks like?

I think you could fix it by setting the panels up differently (using flex layout), so that the content page always scales to the available size.

#16