So I have created my website using Bootstrap. I want to add a facebook-like collapsible sidebar. I have tried to divide my website into two columns. One for the sidebar and other for the whole website using col-md-2 and col-md-10 but the problem that was occurring was the site was being overflown towards the right side. This is what I did:
<html>
<head></head>
<body>
<div class="container">
<div class="col-md-2">...Sidebar...</div>
<div class="col-md-10">...Rest of the website...</div>
</div>
</body>
</html>
But the site was overflowing towards the right side. I tried that with many other col-* but to no avail. I also added .clearfix class to the body but still could not fix the overflowing issue.
Q1. How can I fix the overflowing issue?
Secondly, I want to make the sidebar collapsible. I thought I would do that by hiding the col-md-2 and changing the class of the website holder div to col-md-12 and reversing the thing when the user un-collapses the sidebar but the problem I know that would be occurring is that I would not be having a smooth sliding effect.
Q2. How could I make a collapsible siderbar with a smooth slide effect?
Demo of what's happening.
Q1: Have you tried adding a row after the container?
<div class="contianer">
<div class="row">
<div class="col-md-2">...Sidebar...</div>
<div class="col-md-10">...Content...</div>
</div>
</div>
Q2: You can create you sider bar off the top of the screen and animate it in using jquery to slide it down to where you want it when the menu button is clicked.
Related
I used thumbnail section and view section in my project. So I divided parent div into two div, first is col-md-3(that is thumbnail div) and second is col-md-9(that is view section). Now I want to hide first div and change second div into col-md-12 for small device like mobile or ipad.
Is there any way to make it with media query?
Bootstrap col system for grid has this built in.
When you specify col-md-3 you are saying "at medium screen give this col 3 blocks".
You can also do, side by side col-sm-12 to give it the entire row when on large screen and col-sm-0 to hide it when on smaller screens.
Look here for a better explanation about bootstrap grid system:
https://getbootstrap.com/docs/4.1/layout/grid/
<div class="row">
<div class="col-md-3 d-none d-sm-none d-md-block">THUMBNAIL</div>
<div class="col-md-9">Some data</div>
</div>
This will solve your issue.
For extra small and small screen thumbnail will not appear.
I currently have a layout made of multiple rows, with 4 columns each. Each column contains a "card" displaying some basic information.
When the user clicks on one of the cards, I want it to make a flip effect to show its back, which contains more detailed information, as well as animate the div to go above everything else, centered, and bigger so I can display a lot more text, and everything without breaking the layout (as a Bootstrap modal would display).
The flip effect is working, but I am now struggling with making the div kind of converting itself into a modal, a.k.a centering itself and zooming in, without scaling the text so I can fit in there more information.
Here is my HTML code:
<div class="row">
<div class="col s12 m3 center-align flip-container">
<div class="flipper">
<div class="front">
<div class="card-panel teal" style="position:relative;">
FRONT CARD TEXT
</div>
</div>
<div class="back">
BACK OF THE CARD WITH A LOT MORE TEXT, IMAGES AND STUFF
</div>
</div>
</div>
</div>
Any help is greatly appreciated !
Maybe you want check bootstrap, have modals. Else, you need a CSS that make look like modal and with jQuery only add or remove a class.
I want make div positioned fixed inside bootstrap carousel so content down the div can go under it. But nothing seems to work. Here is the link to my fiddle.
I want to makediv class="col-lg-12 col-md-12 col-sm-12 col-xs-12 fixed-div" fixed so that it wouldn't go outside screen.
Anyone can help? I really appreciate it .
Here is the link to my fiddle.
Your fiddle and your question are hard to understand. But if you want something fixed inside your slider you should try adding position:relative; to yourdiv class="item".
Then add the position:fixed to the child div inside that.
Like this,
<div class="item">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 fixed-div">content</div>
Css
.item{position:relative}
.fixed-div{position:fixed}
But fixing something inside a slider does not look good. If you want something to appear in every slide you should put that div inside every div class="item". That is easy.
Not much clear form your fiddle regarding which div you are trying to get fixed position. But the solution can be like this.
<div class="parent-div"> <!--/ Could be your slider wrapper or a single slide wrapper -->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 fixed-div">your fixed content</div>
</div>
And style this way
.parent-div{position:relative;} /*This won't let your fixed-div to go outside of this*/
.parent-div .fixed-div{position:fixed;} /*And you can positon by top,bottom,left,right property*/
I'm making an angular web-app with a sidebar view attached to the side of every page. I'm using twitter-bootstrap to handle grid/spacing on the page and ui-router to handle the different views.
My views are laid out like this:
index.html
<div ui-view="sidebar"></div>
<div ui-view="content"></div>
<div ui-view="content-2"></div>
The markup for my sidebar is as follows:
sidebar.html
<div class="col-sm-3 sidebar">
<!-- sidebar view content -->
</div>
and the markup for my content views:
content.html and content-2.html
<div class="col-sm-9 container-fluid">
<!-- content view content -->
</div>
the content views are stacked one on top of the other next to my sidebar.
The problem is that one of my pages includes a dynamically expanding component, which increases the height of the content views. This pushes the lower content view ('content-2') down the page, and when it goes below the bottom of the sidebar view, it slides left, underneath the sidebar, instead of staying on the right below the first content view.
I've tried adding style="padding-bottom:500px" and style="vh:100" to the sidebar div, which works for a bit because it extends that view down, but I'd prefer a solution that doesn't unnecessarily extend the page beyond what is currently necessary. Additionally, once the content-view2 reaches the bottom of the padding, it still slides over just like before.
Update:
I finally got my plunker up, so hopefully this will illustrate the problem and what I'm trying to do: http://plnkr.co/edit/EbGJAqxdjHRCMjjC6waA
The content.html view will dynamically increase/decrease when the user presses the button, illustrating the problem (make sure to scroll down to see what I'm talking about).
The simplest working solution without layout changes. The problem is the float:left of the 2nd content, so let's change it to right when the screen size is large enough - plunker:
<div class="content2 col-md-10 container-fluid">
<div class="container-fluid" style="background:#800000;color:white">
<h2>Content Frame Two</h2>
<p>Centered below Frame One at start, should still be centered after button press.</p>
</div>
</div>
#media (min-width: 992px) {
.content2 {
float: right;
}
}
A simpler working solution + plunker:
Remove this from sidebar - style="padding-bottom:100vh" - as we don't need it anymore.
Change your html markup, so that both content areas would be wrapped in one big float. In this way, the 2nd content, can slide left.
Index:
<div class="container">
<div ui-view="sidebar"></div>
<div class="col-md-10 container-fluid">
<div ui-view="content"></div>
<div ui-view="content-2"></div>
</div>
</div>
Content 1:
<div class="col-md-12 container-fluid" style="padding-bottom:20px">
<!-- the padding on the following container is to simulate the added space
that appears once the div dynamically increases in size -->
<div class="container-fluid" ng-style="vm.contentStyle">
<h2>Content Frame One</h2>
<button ng-click="vm.expand()" type="button" class="btn btn-default">{{ vm.change }} Size</button>
<p ng-show="vm.info">{{ vm.info }}</p>
</div>
</div>
Content 2:
<div class="col-md-12 container-fluid">
<div class="container-fluid" style="background:#800000;color:white">
<h2>Content Frame Two</h2>
<p>Centered below Frame One at start, should still be centered after button press.</p>
</div>
</div>
Previous non-working solution:
It's bit hard to hard to replicate the problem without a working plunker/fiddler, but I think that setting the height of the sidebar to 100vh or the padding to calc(100vh - height of sidebar) will solve your problem.
1vh is 1% of the view port height - ie the available browser display area, so setting it using vh will resize your sidebar or the padding dynamically according to screen height.
Note of caution - vh (and vw) are only supported by modern browsers (see caniuse).
I'm new to jQuery. I'm using Accordion. When I click on the accordion it overlaps on the footer. How can I avoid it
Below is the code for the footer -
<footer>
<div class="row footer_class">
<div class="container">
<div class="col-lg-8 font_color">Copyright © 2013</div>
<div class="col-lg-2 pull-right font_color">Powered by Test</div>
</div>
</div>
</footer>
Below is the picture of how accordion overlaps the footer.
I don't want it to overlap the footer but the footer should move down below the accordion when the collapsible menu is opened.
The problem is either the CSS for some wrapper for the accordions
Or the footer has been set to be fixed at that position on the page.
Make the wrapper (e.g. div) for the accordion fluid such that when accordion expands the wrapper height extends as well. Or you may add a dummy div after the accordion wrapper which will change in height when accordion is opened thus pushing the footer down.
set relative position for your footer.
position:relative
Happy Coding:)