ScrollView subclass does not scroll


#1

I’ve got a ScrollView subclass I want to use to show some long text. It looks like this:

{ScrollView} = require 'atom'

module.exports =
  class ClojureDocView extends ScrollView
    @content: ->
      @div class: 'clojuredoc', =>
        @pre =>
          @code class: 'output'

    addLine: (line) ->
      @find(".output").append(line)

Now when I add a whole bunch of stuff using addLine, the text just runs off the bottom edge without scrolling. Any ideas why?


Hiding a subview
"Manually" format text
How to scrollToCursorPosition in bottomPanel for a TextEditor
Hiding a subview
Background image rendering
#2

Just a wild guess, but maybe you need to call the parent.


#3

You mean calling super in my constructor? Doesn’t seem to have any effect.


#4

Looks like you’re not initializing the view.

Check this package as example https://github.com/atom/image-view/blob/master/lib/image-editor-view.coffee


#5

Thanks for the suggestion! That didn’t in fact fix it but at least now I know of a working example to look at :slight_smile:


#6

The actual problem was just not applying overflow: auto to my top level container element.


#7

Thanks! This thread saved me hours of frustration.


#8

Been having similar issues here, decided to bump instead of creating a new thread:

I’ve been attempting to implement a ScrollView subclass in my code and I can’t figure out for the life of me why it isn’t scrolling. Code:

{ScrollView} = require 'atom'

fs = require 'fs'

module.exports =
  class PlasmidEditorView extends ScrollView

    @content: ->
      # fix lack of scrolling behavior
      @div class: "block", overflow: "auto", =>
        @div class: 'text-highlight', id: "textPara",  "TEXT"
        @span class: 'loading loading-spinner-large', id: "SPINNER"
        @button click: "insertText", "insert text"

    constructor: (@bpe) ->
      super

    insertText: (event, element) ->
      document.getElementById("textPara").innerHTML =
      fs.readFileSync(@bpe.fullPath).toString()

On click, the text is inserted, but no scrolling is available. I’ve tried it both with and without the class: "block" or the overflow: "auto", and neither appears to work. I’ve also tried {ScrollView} = require 'atom-space-pen-views with the same effect. I’ve looked at markdown-preview and this seems to call the same functions, so I’m really not sure where to start looking.


#9

The problem I’ve been having is that the div didn’t take focus and therefore the cursor keys didn’t do anything. I fixed that by adding tabindex: -1 to the list of attributes of the top-level div. I have no idea if it helps you but it just takes a minute to test it.


#10

Hm. Didn’t seem to have an effect. I added in a TextEditorView instead of a div to hold text and once the texteditorview got too big for the page due to inserting text, I still wasn’t able to scroll down.


#11

Managed to get a scrolling view that I’m pretty happy with by literally making a markdown-preview div:

{ScrollView, TextEditorView} = require 'atom-space-pen-views'
fs = require 'fs'

module.exports =
class PlasmidEditorView extends ScrollView
  @content: ->
    @div class: "markdown-preview", tabindex: -1, =>
      @div id: "hey", "hello"
      @subview id: "editTextOne", new TextEditorView

I’ve been perusing markdown-preview.less from the markdown-preview package and adding bits and pieces, but haven’t been able to isolate what exactly makes it scrollable. Still, if anyone’s looking (and doesn’t mind having their page get a white background), this will work.


#12

Hm. I’ve tried your github project, but there you’ve got an iframe that’s marked scrolling="no" and overflow-y: hidden. But I have to confess that fiddling with that didn’t help :frowning:

Hm. So I played around a little more, and what I’ve found out is that I could add style="overflow: scroll;" to the div with the id plasmidDisplayBase, and that did the trick.

Does that help? Here is the result:

<div class="block" id="plasmidDisplayBase" callattachhooks="true" style="overflow: scroll;">
    <iframe class="inline-block" src="file:///CENSORED/red-october/lib/raphael-display.html"
        id="pageFrame" width="1000" height="1000" scrolling="yes" seamless="seamless"
        style="overflow-y: scroll;overflow-x: scroll;" frameborder="0">
    </iframe>
</div>

#13

I just figured that out myself, haha. Awesome, thanks so much!