Menu
I'm using the Semantic UI sidebar on my page for navigation. By default, I'd like to have it visible with the option for the user to close it if they like. The problem is that by having the sidebar open by default, my page content gets pushed off screen and is overflowing so that part of the page is cut off. Not seeing anything in the docs about making the page content conform to the available width rather than get pushed off screen.
$('.toggler').on('click', function() {
$('.ui.sidebar').sidebar('toggle');
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic UI Sidebar test</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.css">
</head>
<body>
<div class="ui left sidebar inverted vertical menu visible pushable">
<a href="#" class="item">Sidebar Link</a>
</div>
<div class="ui pusher">
<div class="ui menu">
<a class="item toggler">
Toggle
</a>
<div class="item header">
Semantic UI
</div>
<div class="menu right">
<a href="#" class="item">Test</a>
</div>
</div>
<div class="ui segment">
<table class="ui celled table">
<thead>
<tr><th>Header</th>
<th>Header</th>
<th>Header</th>
</tr></thead>
<tbody>
<tr>
<td>
<div class="ui ribbon label">First</div>
</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
<tfoot>
<tr><th colspan="3">
<div class="ui right floated pagination menu">
<a class="icon item">
<i class="left chevron icon"></i>
</a>
<a class="item">1</a>
<a class="item">2</a>
<a class="item">3</a>
<a class="item">4</a>
<a class="icon item">
<i class="right chevron icon"></i>
</a>
</div>
</th>
</tr></tfoot>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.js"></script>
</body>
</html>
698
Take a look at the Examples section for Sidebar docs. You have two choices I think:
Scaling down the content using <div class="ui left sidebar inverted vertical menu visible scale down">
Make the sidebar display over the content using overlay css class: <div class="ui left sidebar inverted vertical menu visible overlay">
86
The other way to solve this problem is just add several paddings:
.pushable > .ui.fixed.menu {
padding-left: 260px;
}
.pushable > .ui.main.container {
padding-left: 260px;
padding-top: 40px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css" rel="stylesheet"/>
<div class="pushable">
<div class="ui visible left vertical menu sidebar overlay">
<div class="header item">Logo/Company Name</div>
<a href="#" class="item">Link #1</a>
<a href="#" class="item">Link #2</a>
<a href="#" class="item">Link #3</a>
</div>
<div class="ui top fixed menu">
<div class="ui fluid container">
<div class="left menu">
<a href="#" class="item">Menu #1</a>
<a href="#" class="item">Menu #2</a>
</div>
<div class="right menu">
<a href="#" class="item">Menu #3</a>
<a href="#" class="item">Menu #4</a>
</div>
</div>
</div>
<div class="ui main fluid container pusher">
<h1 class="ui header">Content</h1>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then </p>
</div>
</div>P.S. This snippet has problem with vertical scrolling because impossible to set pushable class for body element.
2
I spent time on same issue in Semantic-UI-React
As I understand, Sidebar component of Semantic-UI is only for showing a temporary menu bar on mobile devices for navigation. It's not designed as a fixed dashboard menu.
I've tried effects "overlay" "scale down" "push" .. and all of them didn't show my components properly and I don't want to go into deep details of CSS like "transform: translate3d" property.
So for the dashboard ; I simply coded a Grid and I put a Menu component on the left as vertical and then content on the right side.
Now I'm preparing a different layout for mobile size which will use Semantic-UI Sidebar with "overlay" feature.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
