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.
Related
I am using Bootstrap to design a webpage. Since many people uses large screens I prefer webpages where the content is centered with some white space on both sides. An example is this page:
https://www.nhstateparks.org/visit/state-parks/dixville-notch-state-park.aspx
I have tried to make a design like this:
<div class="container-fluid text-center">
<div class="row content">
<!--Uses an offset to get white space on left -->
<div class="col-sm-2 col-md-offset-2">
Sidebar with some links
</div>
<div class="col-sm-6">
Main content
</div>
<div class="col-sm-2">
<!--This is added only to get white space on right -->
</div>
</div>
</div>
But I want the page to behave like this page do. When you shrink the page, it will "use" the blank space on left and right before it start to scale the content. I see stackoverflow.com also do this. It to not start to scale the content before the white space on both side are used.
Replace the container-fluid class with container class.
<div class="container">
<div class="row">
<!--Uses an offset to get white space on left -->
<div class="col-sm-2">
Sidebar with some links
</div>
<div class="col-sm-6">
Main content
</div>
</div>
</div
Let's consider the following semantic-ui page structure (using meteor):
<div class="ui top attached demo menu">
{{> header}}
</div>
<div id="main" class="ui bottom attached segment">
<div class="ui teal labeled left inline vertical sidebar menu">
{{> sidebar}}
</div>
<div class="pusher">
{{> yield}}
</div>
</div>
Being the content inside the pusher a grid of images as following:
<div class="ui sixteen column wide center aligned grid book-grid">
{{#each book}}
<div class="center aligned column item">
<div class="ui basic segment">
<img src="{{cover}}" class="ui fluid image">
<p>{{title}}</p>
</div>
</div>
{{/each}}
</div>
Is it possible to have the pusher dynamically fit to the browser when the sidebar is open? My content is pushed off-screen (standard behavior) but I'd like the images grid to adapt to the new panel width. Thanks
Not the most elegant solution, but you could manually adapt the .pusher's width by adding an event to capture the show/hide of the sidebar.
The key is providing the width in percent. Please also have a look at Bootstrap's Grid System.
I am using the grid system (Bootstrap 3.3.4) to try to make about four columns. The only problem is it puts the grid in the background. And the footer just sits on top of everything in the grid. Here is the jsFiddle, notice how the last little bit of text is cut off by the navbar on the bottom. Here is my code:
<div class="jumbotron">
<h1>Example page header</h1>
</div>
<div class="col-md-2">
<div ng-repeat="category in main_business_categories">
{{category}}
</div>
</div>
<div class="col-md-2">
<p>column2</p>
</div>
<div class="col-md-2">
<p>third</p>
</div>
<div class="col-md-6">
<p>fourth</p>
</div>
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
Made with love by Jeremy Martinez
</div>
</div>
How do I get it to where everything (header, footer, and text in grid) are all on the same depth. Right now, grid is in background and everything else is in foreground.
First you should wrap your columns inside a .container or .container-fluid and .row: https://jsfiddle.net/bhbhv38f/2/
The .navbar-fixed-bottom cause the behaviour you describe. You should remove that class to get the footer at the end of your content, see https://jsfiddle.net/bhbhv38f/3/
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>
i have a fluid layout based of twitters bootstrap.
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>
It would be very nice to have the sidebar a fixed width. if a change the layout from fluid to "static" and set the width of sidebar to
220px
and i resize the window or change my resolution to 1024... the body-content jumps under the sidebar. how can i avoid this?
EDIT:
Got it. Will post my "solution" later on. thanks for your responses
I think you are looking something like this:
<div class="sidebar span4">
this is my fixed sidebar
</div>
<div class="main">
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">this is fluid</div>
<div class="span3 offset1">yeah!</div>
<div class="span6">Awesome!</div>
</div>
<div class="row-fluid">
<div class="span6">1 half</div>
<div class="span6">2 half</div>
</div>
</div>
</div>
here´s a fiddle for your convenience: http://jsfiddle.net/TT8uV/2/
As as general note:
You don´t need to use bootstrap as your 'main container', so you can place your
sidebar side-by-side with a grid system (like bootstrap
fluid and responsive). This way you have A LOT of control of the
sidebar, without affecting the actual content.
Hope it works for you.
I think this is what you need: http://jsfiddle.net/U8HGz/1/