Don Warren Don Warren - 26 days ago 10
HTML Question

semantic ui make content div scrollable but not the whole page scrollable? (meteor + react)

I want to achieve something like this, that I searched up here before:

jsfiddle.net/psychomachine/03pfvhzs/1/

But the result I am getting for my application is this:

http://i.imgur.com/S4wbKp9.png

This is the code that is being rendered:

//App.js
render() {
return <div className="main2">
{/*HEADER (NAVIGATION + CONTEXT BAR)*/}
<Navigation />
{/*CONTENT*/}
<div className="pusher">{ this.props.children }</div>
</div>;
},


Example code that goes in the content div, i.e. "pusher"

<div className="ui main text container">
<h3>Page Two</h3>
<h3>Page Two</h3>
<h3>Page Two</h3>
<h3>Page Two</h3>
<h3>Page Two</h3>
<h3>Page Two</h3>
<h3>Page Two</h3>
<h3>Page Two</h3>
<h3>Page Two</h3>
<h3>Page Two</h3>
<h3>Page Two</h3>
..... // This goes on for another 20 times, just to get scrolling to show
</div>


And the div for the menu bar, that is rendered at :

<div className="ui top attached demo inverted menu">
Rest of the code is at: http://semantic-ui.com/examples/fixed.html
If you view the page source, since it will be too cluttered to put in here


Is it not possible to do in React, due to how it renders things?

This is really bugging me, but if it can't be done, oh well, ill have to live with page inconsistencies because pages without scrolling content won't have a bar, and those that do, will have a scroll bar that will push everything to the left a little

Answer

It has nothing to do with Meteor or React, you just need to wrap your pusher in a pushable tag class, like so.

<div class="ui bottom attached segment pushable">
  <div class="pusher">
    <div class="ui main text container">
      <h3>Page Two</h3>
      <h3>Page Two</h3>
      <h3>Page Two</h3>
      <h3>Page Two</h3>
      <h3>Page Two</h3>
      <h3>Page Two</h3>
      <h3>Page Two</h3>
      <h3>Page Two</h3>
      <h3>Page Two</h3>
      <h3>Page Two</h3>
    </div>
  </div>
 </div>