I have a program that let's people design web pages graphically. Then hitting Publish creates an html file that is supposed to be an exact copy of what they created. The elements created by the editor are HTML elements. Publish then gathers up all the elements that have been created and for each one adds it to a string with
canvasOuterHTML += clone$[0].outerHTML;
So all the styles, text, etc., get put on the string. This string, along with some other information is written to the .html version of the page, and when this .html is loaded into a browser the browser displays the page!
But something is expanding the published page vertically. I've created the simple page below to illustrate. The first image is the page in the editor. The second image is what the html displays in the browser.
I'm completely stumped because the HTML and CSS for the two markups is exactly the same, so how can one be higher? I can't even think of a mechanism that would do that. Does anyone have any ideas? Thanks.
Related
I recently discovered a bug with gravity forms and I was wondering if you guys could help me and the community.
So, the problem it's with HTML content. I attached the images here. Basically, everything works just fine, when starting a new form, the HTML content it's displayed accordingly.
https://ibb.co/DRJrCzw
But when someone goes to the next page and then comes back to the first one, the content it's displayed like in the image nr.2.
https://ibb.co/Qrz8Wbd
This fixed it for me!
JacKrac (https://www.reddit.com/user/JacKrac/)
Assuming you are a paying customer, have you reached out to support?
With that said, I believe it is because you are using shortcodes in the text.
The second time you visit it, the form content is likely rendered a different way compared to when the page first loads, likely with an Ajax request and/or javascript the second time around and the shortcode is not being processed.
One thing to try would be to copy the generated HTML and paste that into the HTML block in gravity forms, removing all the shortcode.
So, basically:
Open a text editor and save the current content you have in Gravity Forms, so you have a backup of it.
Open a page to view the form and then use your browser's HTML inspector to copy the HTML
Paste the HTML into gravity forms
If that fixes it, I would still reach out to them and ask them about how shortcode is handled within the html block and also let them know you think you found an issue.
The best I can do so far is to embed code from just one html file. On the preview page, I get a scrollable box taking up half the page that contains my desired output, surrounded by white space. Rather, I would prefer my page take up the entire page, if that makes any sense.
(In the end, I decided to create my site on Git Hub instead because it lets me directly post my HTML files.)
click this links to see the screenshots
full source code of the home page
source code of the external file
full source code of the home page (in google chrome inspect
view)
full source code of the home page (in google chrome page source
view)
I have been keeping the code indentation in that web pages from the beginning in my code editor. but when i see my site on google chrome, the indentation is not set properly. can I know why is this? I googled this, yet coudn't find an answer or a solution.
It is not Google Chrome's fault. Your files simply get compiled to this form, the browser displays them exactly as they look like.
But why they look like this? In your case PHP's include does only purely textual replacement, as in the picture bellow:
The effect is the same as if you copied the contents of the external file and pasted them to the main file, replacing the include tag.
If you would really insist on having the code indented properly after the include does its job, you would have to add new spaces at the beginning of each line (but first) of the included file. It would shift the text to the right (in this case 4 spaces) and in the result the indentation would be preserved.
However, I'd discourage you from doing so -- it is only the code that is generated, probably no one is going to work with the compiled result. Proper formatting of code is only meant to make the human work easier -- it has no effect on how the page will eventually look like, when rendered by browser. Thus, it probably would suffice if you kept the two source files formatted as they currently are and left the output as is, even though it is not indented well.
If you'd like to have the code properly formatted in the page source view, please remember that you can simply use the "pretty print" button in the lower left corner of the preview:
Overview:
After viewing a webpage online (using Firefox), I saved the webpage to an .html file. Upon then viewing the saved html file in Firefox, much of the content is just not there: I basically just see what amounts to a header and footer. The content I am actually interested in is not displayed. However, when I use an editor to look at the .html file, I can find the content among the html code fine. I just doesn't show up when I view the page and I can't figure out why. I am wondering how I could alter the code in order for the full page to display.
Specifics:
The webpage I am trying to view is for a recipe (http://www.cooksillustrated.com/recipes/1). This website requires a paid login, so you will likely not see the entire page anyway.
This link has a zip file of the .html file and the folder with the other images and stuff - https://drive.google.com/open?id=0B7IvODgWvxBbc1EwcmFwa050REE. The .html file has some name/email info in it but I have replaced it with made up info.
The relevant part of the .html file that does not view is lines 395 to 408. All the parts of recipe are right there, but it does not display in a browser. (I tried to display these html lines inline, but it exceeds the 30000 character limit.)
This makes me think that something (with which I am not familiar) in the html code is preventing viewing that content, and, if it were deleted or altered, would solve my problem. I have tried searching the web for an answer, but came up empty (I was not not really sure what to ask). And I have very little experience with html to know much of what is going on in that file. (And I want the html file; I am not looking for an alternative like just printing to pdf.)
If anyone can provide some pointers/direct me to a resource that would be greatly appreciated.
In my application I have used CKEditor text editor to store large data.
That data may come from another html page by copying content from any web page.
When doing above scenario,
if client missed any to copy properly ended html tags from that web page, they copied incomplete html content. When client paste it inside CKEditor, it showing good.
But If I display whole content without CKEditor,
Its leading to following issues,
Page collapse , because if client copied partical (in completed content from other web page)
CSS class override
Please give solution for that.