Hi All,
My name is Stan and this is my very first comment here on WebFlow’s forum
A bit of a long message, but I wanted to share my experience regarding the one-line-bug with you. Maybe it helps someone.
I encountered the same one-line code problem when trying to export my work (which is why I found this thread). I’ve got it solved, well… not really solved, I found two workarounds for it that worked for me.
Initially when I noticed the one line code I thought that maybe WebFlow automatically minifies the code after a certain length (I was working on a very long and complex page). This would not have been convenient because I like the possibility to make quick changes or additions in the code when necessary, but then again there are always un-minify tools online (Google it).
So I exported the code and opened the (what I thought to be) minified code in my text editor to find that it didn’t look like minified html at all (see screenshot below).
In addition the page looked as intended in WebFlow, but didn’t display as intended on my local server. The page showed excessive spacing between sections and stacked divs as if there was a margin added between them.
So it wasn’t minified code, but this did give me the idea to minify the code inside WebFlow before exporting to see if that would solve the issue. And it did! So if my theory is correct that this one-line-bug appears with very long/complex pages, minifying seems to work. After exporting just un-minify the code in case you want to be able to make edits manually outside WebFlow
Exporting minified html in Webflow
However, I wasn’t sure if the problem was actually because of the very long/complex page. That was just my initial theory. To test this I split up the page in two separate pages with the intention to later stitch them together in my code editor.
The plus side for this approach, it worked! The code generated by WebFlow looked as it should (multiple lines and beautiful!) and both parts looked as intended in WebFlow and the browser as well.
The downside comes when you have animations in both parts (which are now separate pages). The animations of the part that you’re copying to the other page will stop working. So if you copy the code from page 2 (the second part of the long page to be added back) and add it to page 1 only the animations that were on page 1 already will work.
The reason for this (for as far as I understand) is because of the generated “data-wf-page” tag ID (the bunch of numbers next to the html opening tag in the exported code - see also image below) which is unique per page and communicates with the JS making the animations happen on that specific page (I think ).
I haven’t been able to figure out how to add both those IDs on one page. Not sure if that is even possible. But if you like puzzles, like myself, you could choose to add all animated sections on page 1 (if you don’t happen to have animated sections only) and the static sections on page 2. Then put them together in a code editor. Fun!
I hope the above made sense. Please note that the above is what worked for me. I can’t guarantee that it will work for you as well
I’d also like to mention that, even though it is against my own rules, I did use copied text straight from the design PSD on this page because of the inhuman deadline, but this didn’t seem to be an issue after splitting up the page in two.
Hope this might help someone who encountered this issue to get creative with bugs and possibly give some insight to the WebFlow team.
Cheers,
Stan.