When this page is first loaded, the code only shows up to line 11.

[LuckyOreo]

Challenge http://www.freecodecamp.com/challenges/waypoint-create-a-javascript-slot-machine has an issue. Please describe how to reproduce it, and include links to screenshots if possible.

When this page is first loaded, it only shows code up to line 11. The rest of the code shows up when the blank space below line 11 is clicked, or when the code area is scrolled.

[BerkeleyTrue]

I cannot replicate. Can you post screen shots of the issue?

[LuckyOreo]

this was present on all slot machine challenges. This was present on Chrome Version 44.0.2403.157 m as well as IE11.

[BerkeleyTrue]

Can you try reseting your code? (your current code will be lost)

[LuckyOreo]

yeah resetting the code will display the rest of the code but if I do a refresh of the page it will behave the same where only code upto line 11 will show.

[souldreamer]

I can confirm the issue:

However, for me the text reappears if I scroll or I click on the editor where the missing code should be (but doesn't reappear if I click on the code I can see) or if I move the cursor downwards until I reach the missing code.

[bugron]

I experience this issue too!

[Daynil]

Same issue here, seems to happen when the editor has a scrollbar for overflow text.
When page first loads:

After scrolling around the editor or clicking on it:

[dawnvoh]

I also have seen this in Waypoints 18 through 21, using Chrome. I was able to press "Reset" as a workaround.

[BerkeleyTrue]

Thank you all for reporting. We no longer need anymore screen caps.

We need to find out where the bug lies. Could someone who is experiencing this issue spin up a local copy and step through the code in commonFramework on page load in order to pinpoint the actual cause of the issue.

It is difficult for us to actually fix something we cannot replicate.

I suspect its could be one of two things, but it may also be something else entirely.

a. It could be the codeStorage code in the begging of the commonFramework file (the code responsible for saving and pulling code out of localStorage). This would explain why reset code resolves the issue.
b. It could be a known bug in CodeMirror. We are currently using an outdate version. Could a camper search through CodeMirrors repository and find anything that might explain this?

[jbmartinez]

The rest of the code appears after a repaint (resizing the viewport makes it appear), I guess it may be a CodeMirror problem

[BerkeleyTrue]

It would be great if we could be certain.

[bugron]

@BerkeleyTrue try this.
commonFramework.js -> editor = CodeMirror.fromTextArea(document.getElementById('codeEditor'), change lineWrapping: true to lineWrapping: false and magic will happen... well, happened at least for me.

[dawnvoh]

I will tell you what I see, I hope it is helpful…

I’m in commonframework, and when I step from line 757, to line 759, that’s when the code gets displayed up to line 11.

Ok, so I started stepping INTO the functions that are being invoked between lines 757 and 759.
I’m taken to lines 2268, 2111, 2122, and eventually end up in function updateDisplayIfNeeded.

Somewhere between lines 709 and 713, the code gets displayed up to line 11. I noticed that the variable toUpdate has value 11.

[QuincyLarson]

@bugron and I looked into fixing this with wordwrap, but it didn't work.

We think the issue is that our version of Codemirror is stale.

We need to switch to using the NPM version of Codemirrror instead of vendorizing Codemirror in our app. @BerkeleyTrue I know you mentioned your desire to do this. I think this is a priority.

[BerkeleyTrue]

Can someone test against a newer version CodeMirror and report their findings?

[bugron]

@BerkeleyTrue I tried v5.6.1 and this is the result.

[BerkeleyTrue]

Anyone have any insight on the root cause?

[bugron]

I'm currently out, so I'll just post the links I've found.
http://stackoverflow.com/questions/7772469/codemirror-with-a-few-lines-dont-show-up-until-something-triggers-a-repaint
https://groups.google.com/forum/#!topic/codemirror/P0w1xts5poM
codemirror/codemirror5#2469
http://codemirror.net/doc/manual.html#refresh
codemirror/codemirror5#1891
codemirror/codemirror5#1147
codemirror/codemirror5#785 - here is an example how to use refresh()
codemirror/codemirror5#71 (comment)
codemirror/codemirror5#61

Related:
codemirror/codemirror5#3363
codemirror/codemirror5#585
codemirror/codemirror5#540

[anrddh]

^ didn't work for me on localhost. Added editor.refresh() to line 196 in the commonFramework.js file. That's where it is supposed to go right?

[dawnvoh]

Interesting, this issue does not happen for me in the JavaScript waypoints. Just FYI in case it provides a clue.

UPDATE: Scratch that! It just happened in JavaScript waypoint 37. Some of the earlier waypoints had more than 11 lines of code, though, and it worked fine in those.

[bugron]

@BerkeleyTrue , @ahstro , @awesomeaniruddh try this. . Worked for me. The code:

$(document).ready(function() {
   editor.setOption("mode", "text/html");
   editor.refresh();
});

[BerkeleyTrue]

Looks like we just need to add the editor.refresh() to the end of commonFramework. I remember this being somewhere in the code before but I may have been removed accidentally.

Anyone want to submit a PR?

[finger563]

I'm getting this issue after moving from an older, vendorized version of CM to using the packaged version off npm. Is there any known workaround? I'm getting issues with

• not loading all of the code/document,
• gutter not drawing past certain line numbers when scrolling,
• CM not scrolling when using pg-up/pg-down, and resetting the view (but not moving the cursor) when scrolling the cursor with the arrow keys past certain points (the same points which didn't initially have loaded code)

[finger563]

As an addendum, it seems to only happen when i'm placing it within a div that's configured to have height: 100%

[scipper]

old topic, but still a problem, as I determined.

My solution was to set lineWrapping to false when mode is text/html:

before
this.htmlOptions = { lineWrapping: true }

after
this.htmlOptions = { lineWrapping: false }

that was all I had to change.