2016-11-12 3 views
1

Я хочу, чтобы достичь чего-то вроде этого, что я искал здесь раньше:semantic ui сделать контент div прокручиваемым, но не всю прокручиваемую страницу? (Метеор + реагировать)

jsfiddle.net/psychomachine/03pfvhzs/1/

Но результат я получаю за мое заявление это:

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

Это код, который визуализируется:

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

Пример кода, который идет в DIV контента, то есть «толкатель»

<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> 

И ДИВ в строке меню, которая визуализируется на:

<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 

Разве это не возможно сделать в React, из-за того, как это делает вещи?

Это действительно беспокоит меня, но если это невозможно сделать, хорошо, больно жить с непоследовательностью страницы, потому что страницы без прокрутки контента не будут иметь бара, а те, кто это сделает, будут иметь свиток бар, который будет толкать все влево немного

ответ

0

Это не имеет никакого отношения к Метеору или Реагированию, вам просто нужно обернуть ваш толкатель в сменный класс тегов.

<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> 
0

Вы только должны обернуть его в pushable класс:

<div class="ui top attached demo inverted menu"> 
    <div class="pusher"> 
    <div class="ui main text container"> 
     <h3>Page Two</h3> 
     <h3>Page Two</h3> 
     <h3>....</h3> 
    </div> 
    </div> 
</div>