floating sidebar Semantic Ui

Question

This is my template

EDIT:Simplified the code.So when the code is as it is, the sidebar is not shown.But when i remove "sidebar" a vertical menu is displayed.

<template name="pageTemplate">
{{#if currentUser}}
    <div class="ui vertical menu inverted blue floating sidebar active">
        <div class="menu">
            <a class="item">
                <i class="home icon"></i>
                Home
            </a>
            <a class="item">
                <i class="disk outline icon"></i>
                Devices
            </a>
            <a class="item">
                <i class="area chart  icon"></i>
                Statistics
            </a>
        </div>
    </div>

{{/if}}
{{>yield}}
<div class="ui inverted footer red segment">
    Sixdee Technologies 2015 &copy;. All Rights Reserved
</div>

I am new to Meteor and Semantic UI.

I am working to get a floating sidebar, which will triggered using the "Menu" button. I cant get the sidebar to be displayed.However if i remove class sidebar i can see the vertical menu is being displayed.So i think there is a problem with class sidebar.

But even in this case when i open the developer mode in Google Chrome and mouse over the sidebar code, some part of the page is highlighted.Which means that it is getting created,but not displayed.

Pls help me out.I am missing something. These are the packages that i have installed.

semantic:ui                      2.2.1  Official Semantic UI    Integration for Meteor
semantic:ui-css                  2.1.2  Semantic UI - CSS Release of Semantic UI
semantic:ui-sidebar              2.1.7  Semantic UI - Sidebar: Single component release

I can also share my css if needed.

Thanks.

Answer 1

Hi Sanjith it's Avelx,

I couldn't get the Github example to run as I don't have MeteorJS installed. However I believe after comparing your example to the live version you're using, the sidebar isn't using the right classes. Don't forget my lecture's are for an older version of Semantic. Use these classes instead...

class=" ui simple sidebar inverted vertical menu left uncover visible "

See if that works and don't forget to use the developer tools on the official webpage like so...

google chrome developer tools

Here is some documentation from the site itself with the class definitions for further clarification.