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.
Related
I am having trouble with my css. I am trying to have my contact information, the quote, and my contact form to be in the same row but different columns. And also why is it that my html doesn't all fit on one page, I can scroll to the rigth and there's just empty white space. I figure its because I added -1.23em in my navbars margin; However, I only did this because my navbar was not filling the whole page. Here is a link to my gist and bitballon. Thank you in advance.
https://gist.github.com/bklynbest/a19565b1b5289f045919e76d657848ea
http://sad-goodall-e4f115.bitballoon.com
You have a .row div in the nested directly under the body on line 103 that is causing the page to spread past 100% width
Bootstrap requires a containing element to wrap site contents and
house our grid system. You may choose one of two containers to use in
your projects. Note that, due to padding and more, neither container
is nestable. bootstrap containers
Regarding the contact info your nesting and class names are not correct, you currently have the following:
<div class="container-fluid" id="contact">
<div class="row">
<div class="column">
<div class="col-xs-12 col-md-12">
<div id="quote">...</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="contact">...</div>
</div>
</div>
</div>
</div>
<form>
you will need to change this to follow bootstrap3 grid conventions, something like the following:
<div class="container">
<div class="row" id="contact">
<div class="col-sm-4">
<div id="quote">...</div>
</div>
<div class="col-sm-4">
<div class="contact">...</div>
</div>
<div class="col-sm-4">
<form>
</div>
</div>
</div>
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 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
I have a simple bootstrap row with two columns:
<div class="row">
<div class="col-md-5 col-md-push-7">
This should show on right
</div>
<div class="col-md-7 col-md-pull-5">
This should show on left
</div>
</div>
I want the first row to show on the right and the second row on the left. All of this works, however when the screen size becomes small or extra small, the first column shows up first and second shows up second.
I would like to display second column first and first column second on small and extra small devices. I tried to achieve this with pull-right and pull-left classes but it did not work.
Would appreciate your suggestions.
P.S. I want the divs to stack
Something like this might work if you want the horizontal column ordering reversed:
<div class="row">
<div class="col-xs-5 col-sm-push-7">
This should show on right
</div>
<div class="col-xs-7 col-sm-pull-5">
This should show on left
</div>
</div>
Here is a JSFiddle demo.
If you do want these to stack rather than being side by side like the comments are talking about.
And if you want the second dive to show on top of the stack then you would do it something like this. Show and hide to swap between divs/blocks.
Here is a Fiddle I set the media breakpoints low at 320px.
<div class="row showhide1">
<div class="col-xs-5 col-xs-push-7 col-sm-5 col-sm-push-7 col-md-5 col-md-push-7 bg-primary">
This should show on right on larger views
</div>
<div class="col-xs-7 col-xs-pull-5 col-sm-7 col-sm-pull-5 col-md-7 col-md-pull-5 bg-info">
This should show on left on larger views
</div>
</div>
<div class="row showhide2">
<div class="col-xs-12 bg-primary">
Was on right, now on top on smaller views
</div>
<div class="col-xs-12 bg-info">
This should show on left on smaller views
</div>
</div>
I'm using Twitter Bootstraps grid system and inside that I use their panels. I have two cols and in each col I have one panel. But this creates a horizontal scrollbar on my page.
I could probably disable the horizontal overflow. But I'd rather "fix" the problem in a cleaner way that Bootstrap is causing.
What would be a good way to solve this problem?
Example: http://www.bootply.com/iPdjlxuexk
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Form widgets</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Selected page widgets</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
If I wrap a <div class="container"></div> around the row div, then the panels inside are really small. A big margin-left and margin-right apprears on the container. Not really what I'm after either.
http://www.bootply.com/BWMTAFeO8x
The problem is occurring because of the following HTML class:
col-md-6
Specifically, with Bootstrap, this means that whatever is currently in this column will extend to be 6 column spaces wide. This is not good if you are looking to only have something, let's say, 3 column spaces wide because it actually stretches what you are trying to do.
How do we fix it?
Use a smaller width space and then use Bootstraps ability to push/pull things. I will demonstrate what I mean via a JsFiddle, which is found here.
Basically, I altered your HTML to become the following:
<div class="row">
<div class="col-lg-3 col-md-3 col-lg-push-3 col-md-push-3">
<div class="panel panel-default">
<div class="panel-heading">Form widgets</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-lg-push-3 col-md-push-3">
<div class="panel panel-default">
<div class="panel-heading">Selected page widgets</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
NOTE
In my demonstration, I added the ability to view the panels in both a large screen setting and a medium screen setting versus just having it in a medium setting. I also had to push the columns according to the screen sizes. You can see this in effect with the JSFiddle by changing the width of the portion of the output screen in the demo. This is useful because you can see the difference between a large/medium sized screen to a small/extra-small sized screen.
More Information:
You can find more information on the grid system via the actual website. It will show you how the grid system is laid out and how you can use the push/pull aspect as well.
http://getbootstrap.com/examples/grid/