Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Debug View change page structure #761

Closed
puschie286 opened this issue Oct 9, 2017 · 9 comments
Closed

Debug View change page structure #761

puschie286 opened this issue Oct 9, 2017 · 9 comments

Comments

@puschie286
Copy link
Contributor

puschie286 commented Oct 9, 2017 •
edited
Loading

Hey, after pulling the new debug-view i have big problems with my site - the whole structure is changed

even the simple login page is changed in layout by the new debug-view ( in both development and production build )

Normal :
normalstruct

With Debug-View :
developmentstruct

As you can see, the content of the center-container div and header tag is now outside
@puschie286
Copy link
Contributor Author

puschie286 commented Oct 9, 2017 •
edited
Loading

i guess there could be another problem - the additional divs can potentially break css child combinator.

a possentioly solution would be to add the debug-view divs dynamicly on click on the view button in the debug bar ( but would still break js selections on activ debug-view )
( i dont know if this is the right place for this, maybe move to pullrequest #759

@natanfelles
Copy link
Contributor

I have tested with custom css and Bootstrap and have not problems.

The divs do not change your custom stylesheet.

But, ok, selectors with parents or childs can break the the styles or some javascript can not work.

How to "add the debug-view divs dynamicly on click on the view button in the debug bar"? It will be great but how to detect where a view starts and ends?

Uhmm... We can add html comments surrounding the views likes <!-- start_view: /viewpath -->
and <!-- end_view: /viewpath --> then add divs dynamically on this with javascript action on toolbar button click. But not sure if this will works with parents or childs if the page not be reloaded...

Please, show me the html source of your page and not the content of the browser inspector. It changes the code. "APPPATH"? I do not understand well this pictures, something is strange.

@natanfelles
Copy link
Contributor

captura de tela de 2017-10-09 19-21-10

captura de tela de 2017-10-09 19-21-15

captura de tela de 2017-10-09 19-21-29

captura de tela de 2017-10-09 19-21-33

captura de tela de 2017-10-09 19-21-38

captura de tela de 2017-10-09 19-21-50

captura de tela de 2017-10-09 19-21-41

captura de tela de 2017-10-09 19-21-54

captura de tela de 2017-10-09 19-22-01

captura de tela de 2017-10-09 19-22-03

@lonnieezell
Copy link
Member

@natanfelles The APPPATH is something I added last night that simplifies values a little bit by replacing the actual values of APPPATH, BASEPATH or ROOTPATH with the word. Makes the URLs a a little shorter for when dealing with smaller screens/tablet views.

The comments idea might work...

@Iamscalla
Copy link
Contributor

@natanfelles not every one use bootstrap, i noticed same issue, could not figure out what was wrong, so i commented it. but am thinking if there could be a turn on and off for it, if its thay necessary.

@puschie286
Copy link
Contributor Author

Here is my full login page code

<!DOCTYPE html>
<html>
    <head>
	<title><?= $title ?></title>
	<meta charset="UTF-8">
	<link href="<?= base_url(); ?>css/custom.css" type="text/css" rel="stylesheet" />
	<link href="<?= base_url(); ?>css/materialize.css" type="text/css" rel="stylesheet" />
	<link href="<?= base_url(); ?>css/fonts.css" type="text/css" rel="stylesheet" />
	<style {csp-style-nonce}>
	    body {
			display: table;
			position: absolute;
			height: 100%;
			width: 100%;
	    }
	    .center-container {
			display: table-cell;
			vertical-align: middle;
	    }
	    .center-element {
			margin-left: auto;
			margin-right: auto;
			width: 300px;
	    }
	    .fixed-footer {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
	    }   
	</style>
    </head>
    <body>
	<div class="center-container">
<div class="center-element card-panel" style="min-height: 300px;">
    <h1 style="text-align: center; font-size: 36px; margin-top: 0px;">Anmeldung</h1>
    <?= form_open( base_admin_url() ) ?>
	<div class="input-field">
	    <input type="text" name="username" size="45" <?php if( isset( $username ) ) echo 'value="'.$username.'"'; ?> required />
	    <label>Username</label>
	</div>
	<div class="input-field">
	    <input type="password" name="password" size="72" <?php if( isset( $password ) ) echo 'value="'.$password.'"'; ?> required />
	    <label>Password</label>
	</div>
	<input class="btn" type="submit" value="Login" />
    </form>
</div>
	</div>
	<footer class="fixed-footer page-footer">
	    <div class="container" style="text-align: center;">
		© 2017 Copyright .., Alle Rechte vorbehalten.
	    </div>
	</footer>
    </body>
</html>

@natanfelles well yes feels strange, there is nothing special in this code, thats why i created this issue^^
the js thing was just my first idear - havent enough experience with html/css to know all posibilities.
i even dont know if it is posibile to add something that does not affect sibling/child/parent selectors

@lonnieezell
Copy link
Member

I will likely remove this tonight, then, until we figure out something that breaks things a little less.

I hadn't thought of the js/css selectors being too much of an issue, but I guess it could be. At first I had thought that @puschie286 code might have had a strange unclosed div that was getting closed early, but that doesn't look to be the case.

@natanfelles natanfelles mentioned this issue Oct 10, 2017
Merged
@puschie286
Copy link
Contributor Author

puschie286 commented Oct 11, 2017 •
edited
Loading

a i guess i found the problem :
if the first view contain the <!DOCTYPE html> <html> tag and we suround it by a div -> the contents of header and some divs moves out. ( maybe we should skip the whole header part )
EDIT : also found another problem - the footer may contain the </html> tag which also cause problems if it is surounded by <div>

@puschie286
Copy link
Contributor Author

could fixed both problems -> should i push it to #767 or should i create a new pull request ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@lonnieezell @Iamscalla @puschie286 @natanfelles