Using Semantic-UI's fixed menu and sidebar in React

Question

I'm trying to use Semantic-UI's fixed menu and sidebar together with the React framework. I would like to achieve the same results as the Semantic-UI's Docs page (in Tablet and Mobile displays) with a fixed menu at the top and a left sidebar that is overlaid when toggled.

I have put together an example of that here: https://jsfiddle.net/bullwinkle/m3hr5v36/

It works, but Semantic-UI doesn't like the layout, and provides the following errors in console:

Sidebar: Had to add pusher element. For optimal performance make sure body content is inside a pusher element
Sidebar: Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag <div class="ui inverted left vertical sidebar menu" data-reactid=".0.0">…</div>

So Semantic-UI moves the layout around so that .sidebar and .pusher are direct children of <body>. That's not exactly the React way.

As explained here:

Semantic UI sidebar throws console errors with ReactJS when render app to body

you would need to define a custom context for the sidebar. OK, so I've done that in the sidebar initialization:

componentDidMount() {
    $('.ui.sidebar').sidebar({
        transition: 'overlay',
        context: $('#layout')
    });
},

(see the 4th revision of the jsfiddle, I can't post more links because of low rep)

That fixes the error messages, but now the top menu is no longer fixed, and the sidebar scrolls along with the content. I've tried everything I can to get Semantic-UI and React to play along nicely, but I'm obviously missing something

Did you ever get this working?

Jack
– Jack

2016-04-22 13:46:08 +00:00
Commented Apr 22, 2016 at 13:46 — Jack
– Jack, Commented Apr 22, 2016 at 13:46
same problem. still no solution

Yao Zhao
– Yao Zhao

2016-06-17 15:26:30 +00:00
Commented Jun 17, 2016 at 15:26 — Yao Zhao
– Yao Zhao, Commented Jun 17, 2016 at 15:26

dandan · Accepted Answer · 2015-12-18 00:03:41Z

0

I had the same problem with Ember, it generates the following DIVS:

<div data-label="layer-div" style="display: none;"></div>
<div data-label="preview-div" style="pointer-events: none; display: none;"></div>

... before your content, which creates problems for the sidebar, as the content needs to be wrapper in a PUSHER class so the sidebar can PUSH it over when it open.

So, React is adding some extra content outside of your pusher class, that's what it's complaining about.

{{!-- Pusher means that the sidebar will push it out of the way --}}
<div class="ui grid pusher">

If you have any content prior to your pusher class, with the exception of the sidebar div, you will get the error. Take a look at your source, you will see that Semantic-ui has created a second pusher class to wrap the content generated by react.

answered Dec 18, 2015 at 0:03

dandan

1,1861 gold badge8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using Semantic-UI's fixed menu and sidebar in React

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related