I'm building an HTML + CSS design based on Semantic UI and I was able to make pretty much any element responsive by using the class stackable.
However the left vertical menu, which I use as a visible sidebar, won't collapse in tablet and mobile view.
The result I need is exactly like the Semantic UI Docs page: the sidebar visible in desktop and landscape tablet and hidden, but toggleable, in portrait tablet and mobile.
Here's my code:
<div class="ui left vertical menu collapsible main sidebar visible desktop only">
<div class="transparent-bg">
<div class="ui center aligned basic sideheader segment">
<h2 class="ui header">Dashboard</h2>
</div>
<a class="bold item">
<i class="building outline icon"></i>Add Item
</a>
<a class="active item">
Item 1
</a>
<a class="item">
Item 2
</a>
<a class="item">
Item 3
</a>
</div>
</div>
Any idea on how I can achieve this? There's no documentation on the official docs page.
Many thanks!
I don't work with semantic-ui but have you checked https://semantic-ui.com/modules/sidebar.html ?
Related
I began learning Semantic ui lately.
The issue is that I didn't know why the "segment" width overflow the "container".
the => jsfiddle to be more clear.
any more alternative solutions?
Besides the grid system, i'm struggling with padding too (without touching the custom cc)
Thank you for your any advices.
<div class="ui container">
<header>
<h1 class="ui huge header">Your Logo
<span class="ui sub header">Using Single layout to create several looks</span>
</h1>
</header>
<div class="ui inverted brown segment">
<div class="ui inverted secondary menu">
<a class="ui brown big button">
Home
</a>
<a class="ui brown big button">
Messages
</a>
<a class="ui brown big button">
Friends
</a>
</div>
</div>
<div class="ui grid">
<div class="row">
<div class="ui inverted green placeholder segment column">
</div>
</div>
</div>
</div>
The segment will overflow from the container because semantic grids use negative margins. There's a margin of -1rem on all sides of the grid to make sure that the flex grid sits properly with the outsides of the container.since there's a gutter on the sides of the grid columns. Use a padded grid variation to make this work properly. https://semantic-ui.com/collections/grid.html#negative-margins
I'm not sure if I'm doing something wrong or if this is the intended result but the I'm using semantic ui's sidebar and it pushes everything past the max screen width. Am I missing something here?
<div class="ui bottom attached segment pushable">
<div class="ui left vertical menu visible thin attached inverted sidebar">
<a class="item">
Item 1
</a>
<a class="item">
Item 2
</a>
<a class="item">
Item 3
</a>
</div>
<div class="pusher">
<div id="search-bar">
<div class="ui fluid action input">
<input placeholder="Search..">
<div class="ui green button"> Search </div>
</div>
</div>
<h3 class="ui block header">
Item
</h3>
</div>
</div>
https://jsfiddle.net/kour6d1x/
If you don't want the content "pushed" for the Semantic UI sidebars you should use the .overlay class on it - relevant demos
Like the class name suggests, it will overlay the sidebar rather than pushing the content along with it.
Add overlay class to the <div class="ui left vertical menu visible thin attached inverted sidebar"> element.
JSfiddle
I have used below css to reduce thr width of pusher when sidebar is open. In below code 58px is the width of sidebar
.sidebar.visible + .pusher{
margin-right: 58px;
}
Custom CSS subtracting the width of the sidebar would do the trick:
.sidebar.visible + .pusher {
width: calc(100% - 260px);
}
In some cases the bootstrap navbar-fixed-bottom will overlap other content without displaying a scrollbar.
For example https://jsfiddle.net/m5vgd9g7/1/:
<div>
<a class="btn btn-primary" href="#">
Button
</a>
</div>
<div class="navbar navbar-default navbar-fixed-bottom"
style="padding-bottom:0px; min-height:0px">
bottom
</div>
If you make the display pane very short vertically, the text "bottom" overlaps the button:
How can the overlap be prevented, so a vertical scrollbar appears before they overlap?
You should add a class to your top div which is row, so your top html would look like
<div class="row">
<a class="btn btn-primary" href="#">
Button
</a>
</div>
This will add you a scrollbar for your content vertically. But when we declare a fixed navbar you should keep in mind to add a padding/margin to the rest of the content to the size of the navbar, which should display the rest of the content without being intruded by the navbar. So your final html for the top div would look like,
<div class="row" style="padding-bottom:15px;">
<a class="btn btn-primary" href="#">
Button
</a>
</div>
Note: I would never use inline styles as it would complicate the html in the long run and hard to debug. I did it here for the sake of demonstration.
And the fiddle example is here : https://jsfiddle.net/m5vgd9g7/
EDIT
Thanks to #JDiMatteo who commented about the row class addition. I was about to maintain the bootstrap standards in grid system. (ref: http://getbootstrap.com/css/#grid). Apparently it seems row should be contained within container or container-fluid classes for it to work. This will define a row, where elements/columns(as in bootstrap) could reside in. And by using this, you can get rid of the custom styling we used earlier, padding/margin.
<div class="container">
<div class="row">
<a class="btn btn-primary" href="#">
Button
</a>
</div>
</div>
Hi I am trying to get zurb foundation 6 to have the off-canvas menu with sticky menu inside.
Remaked off-canvas layout to have same height of sidebars and content blocks in desktop view.
Problem:
Sticky menu not working in right off-canvas sidebar
<div class="off-canvas position-right reveal-for-medium sticky-container" id="offCanvasRight" data-off-canvas="" data-position="right" data-sticky-container="" aria-hidden="true" data-offcanvas="f9d5j6-offcanvas" style="height: 24px;">
<div class="off-canvas position-right reveal-for-medium" id="offCanvasRight" data-off-canvas data-position="right" data-sticky-container>
<div class="callout sticky" data-sticky data-margin-top="0">
<h5>This is a callout.</h5>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
It's dangerous to go alone, take this.
</div>
</div>
</div>
I've created a JSFiddle here that demonstrates the problem.
I'm trying to set up a two-column layout - The left column is a list of items and the 2nd column is the details about an item in the first column (click on the item and the data renders, but that's not important right now).
I'm getting stuck setting up the layout - I can get the columns going, but when I add the list into the first column, it's rendering below it. And I'm not sure why.
Can someone point me in the right direction?
<body>
<div id="content">
<div class="row">
<div id="sidebar" class="col-md-4">
<div class="list-group">
<a class="list-group-item">Item Here</a>
<a class="list-group-item">Item Here</a>
</div>
</div>
<div id="main" class="col-md-8">
Other Stuff Here
</div>
</div>
</div>
</body>
I've tried removing the parent div (id="sidebar") and making that ID/width part of the list-group div, but then id="main" renders above the list.
So, I'm confused. What am I missing?
if you use col-md, your div have 100% width when your browser width is below < 768px, it's a behavior on mobile first css grid, so change col-md by col-xs for have your result for any device size