How to make sidebar always visible in the Semantic UI?
Simply adding the "active" css class works, but messes up page layout.
There is a working example on jsFiddle.
This has been officially fixed.
<div class="ui vertical inverted left visible sidebar menu">
<a class="item">
<i class="home icon"></i>
Home
</a>
<a class="item">
<i class="block layout icon"></i>
Topics
</a>
</div>
<div class="pusher">This is some content.</div>
This issue is officially fixed since 2015 so the definite answer can be found below.
Just for reference… in 2014 I had to do following things to make this work:
add active css class to the sidebar
add html code:
<div class="segment">
<div class="container" style="margin:1.5em 1.5em 1.5em 325px">
<!-- content here -->
</div>
</div>
Related
I am new to Semantic and I would like to use the menu look like the sidebar. As in I want the Menu to look like how it would if the sidebar is visible.
I had the same problem as this question, and the solution suggests to use menu instead of sidebar. But I am lost trying to implement this.
I used the same example as in the semantic-ui website.
<div class="d-flex pushable">
<div class="ui left vertical inverted sidebar labeled icon menu visible">
<a class="item">
<i class="home icon"></i>
Home
</a>
<a class="item">
<i class="block layout icon"></i>
Topics
</a>
<a class="item">
<i class="smile icon"></i>
Friends
</a>
</div>
<div class="pusher">
<router-outlet></router-outlet>
</div>
</div>
Any help is appreciated.
I want to make a menu fixed to the left side.
I tried sidebar, it seems good at first but soon I realize the content in the pusher cannot be shown fully if the content is wider than the screen (and there is no scrollbar).
<body>
<div class="ui visible left vertical menu sidebar">
<a class="item">Item 1</a>
<a class="item">Item 2</a>
</div>
<div class="pusher">
a very long sentence, a very long sentence, a very long sentence, a very long sentence,
</div>
</body>
If I delete the pusher class the wide contents get shown but now the sidebar covers some contents, which is not a surprise. It seems in Semantic UI the sidebar is designed to be hidden so that contents in the pusher will be fully shown.
What is the "right" way to make a fixed left side vertical menu? or is there any way to have contents in the pusher fully seen(even a scrollbar is helpful)?
I've inspect what you described and I have an answer for your "What is the "right" way to make a fixed left side vertical menu?" question.
Here is the HTML;
<div class="ui top attached demo menu">
<a class="item">
<i class="sidebar icon"></i> Menu
</a>
</div>
<div class="ui bottom attached segment">
<div class="ui inverted labeled icon left inline vertical demo sidebar menu">
<a class="item">
<i class="home icon"></i> Home
</a>
<a class="item">
<i class="block layout icon"></i> Topics
</a>
<a class="item">
<i class="smile icon"></i> Friends
</a>
<a class="item">
<i class="calendar icon"></i> History
</a>
</div>
<div class="pusher">
<div class="ui basic segment">
<h3 class="ui header">Application Content</h3>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</div>
</div>
And Here is the JavaScript;
$('.ui.sidebar').sidebar({
context: $('.bottom.segment')
})
.sidebar('attach events', '.menu .item');
For detail you can review this code snippet;
https://codepen.io/redshift7/pen/VaKmjq
Hope you will handle it!
Is there a simple css code for bulma making their horizontal tabs to vertical tabs? (sample below) I just want to overwrite their css
<div class="tabs">
<ul>
<li class="is-active"><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
</ul>
</div>
I'm afraid there isn't a simple class to add in Bulma to achieve this (or at least not that I'm aware of). But since Bulma is using flexbox you can achieve a lot by simply overwriting the flex-direction.
.tabs ul {
-webkit-flex-direction: column;
flex-direction: column;
}
I also made a fiddle to demonstrate.
Very late to on this one but if it helps anyone else. I use a horizontal tile with 2 children. The first child I use a panel without a heading, just panel blocks that are anchor tags for my vertical tabs, the second child a div to put the target content of the anchor tag in. Switches to tabs on top and content on bottom at mobile breakpoint. JSFiddle
<section class="section">
<div class="container">
<div class="tile is-ancestor">
<div class="tile box is-parent is-horizontal">
<div class="tile is-child is-2">
<nav class="panel datanav">
<a class="panel-block">Families</a>
<a class="panel-block">Members</a>
<a class="panel-block">Member Birthdays</a>
<a class="panel-block">Member Cars</a>
<a class="panel-block">Sponsors</a>
<a class="panel-block">Newsletter Mailed</a>
<a class="panel-block">Newsletter Electronic</a>
</nav>
</div>
<div class="tile is-child is-10 has-background-white-ter">
CONTENT
</div>
</div>
</div>
</div>
</section>
I'm using semantic-ui as my site ui framework, alongside angular 1.5.8.
What happens when the sidebar is visible is that the browser must hide nearly 50% of the card, within a ui cards dive, before the card responsively moves to a new row.
<body ng-controller="MainCtrl">
<div class="pushable">
<div class="ui left vertical inverted visible thin sidebar menu">
<a class="item">
Overview
</a>
<a class="item">
Upcoming
</a>
</div>
<div class="pusher">
<div style="margin: 20px;" class="ui cards">
<div class="card" ng-repeat="bill in bills">
<div class="content">
<div class="header">
{{bill.name}}
</div>
<div class="meta">
{{bill.biller}}
</div>
</div>
<div class="extra content">
<div class="ui two buttons">
<div class="ui basic green button">Edit</div>
<div class="ui basic red button">Delete</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
If I remove the visible class from the sidebar div, then it works as expected. As soon as the browser window chrome gets close to the border of the card, the card wraps to a new row. What am I doing wrong? Do I have to manually account for the size of the sidebar myself? It doesn't seem like I would have to, considering the cards and sidebar are both semantic-ui components.
I've got a working plunker demonstrating this issue as well.
From http://semantic-ui.com/collections/menu.html
A container can be used alongside a grid to provide a responsive, fixed width container for wrapping the contents of a page.
Add the container class to your to your cards div to make it responsive.
I have this simple nav.
<div class="ui attached stackable menu">
<div class="ui container">
<a class="item">
Home
</a>
<div class="ui simple dropdown item">
More
<i class="dropdown icon"></i>
<div class="menu">
<a class="item"><i class="edit icon"></i> Edit Profile</a>
<a class="item"><i class="globe icon"></i> Choose Language</a>
<a class="item"><i class="settings icon"></i> Account Settings</a>
</div>
</div>
<div class="item">
<div class="ui input"><input placeholder="Search..." type="text" class="dictionary"></div>
</div>
</div>
</div>
I am trying to add styling to <div class="ui input"><input placeholder="Search..." type="text" class="dictionary"></div> but no styles are being applied, anything .. for example
input.dictionary{
border:1px solid red;
}
does not have any effect on it.
OK So what's happening is that Semantic UI is overriding your custom style:
http://i.imgur.com/ayRs3Kx.png
As you can see your custom CSS is crossed out in chrome developer tools.
You have two choices
Make your CSS Selector more specific
Include !important after your style e.g. border:1px solid red !important;
Option 1 is more preferable. I've made a JSFiddle here with an example. By adding red-border I've made the style more specific than the Semantic UI CSS.
When you find your CSS does not seem to be working, use the dev tools to see if it shows up, and if it does what is overriding it.