admin管理员组文章数量:1287593
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=".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=".1.1/jquery.min.js"></script>
<script type='text/javascript' src=".1.4/semantic.min.js"></script>
</body>
</html>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./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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare./ajax/libs/semantic-ui/2.1.4/semantic.min.js"></script>
</body>
</html>4 Answers
Reset to default 4Take 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
overlaycss class:<div class="ui left sidebar inverted vertical menu visible overlay">
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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/semantic.min.js"></script>
<link href="https://cdn.jsdelivr/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.
I spent time on same issue in Semantic-UI-React
As I understand, Sidebar ponent 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 ponents 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 ponent 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.
You can keep all your other code the same, and just change how you initialize the sidebar.
// Initialize the sidebar before it's used
$('.ui.sidebar').sidebar({
// Overlay will mean the sidebar sits on top of your content
transition: 'overlay'
});
// Do the toggling
$('.toggler').on('click', function() {
$('.ui.sidebar').sidebar('toggle');
});
本文标签： javascriptStop Semantic UI from overflowing content with sidebarStack Overflow
版权声明：本文标题：javascript - Stop Semantic UI from overflowing content with sidebar - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741314685a2371845.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论