Bootstrap 3.x framework and jQuery 2.x library are been used.
I have four divs in three different rows. I am using jQuery to change the div height when mouse hover.
Use of z-index and absolute position break Bootstrap responsivness.
Using z-index and absolute position with .col-xs-* can provide a working solution. However, the result is not mobile friendly.
$(function() {
console.log(">>> jQuery is ready");
$(".site-box-id-01").mouseenter(function() {
console.log(">>> mouse enter");
$(this).stop(true, false).animate({
height: "500px"
}, {
duration: 100
});
}).mouseleave(function() {
console.log(">>> mouse leave");
$(this).stop(true, false).animate({
height: "300px"
}, {
duration: 100
});
});
});
.site-box {
width: 300px;
height: 300px;
border: 1px solid black;
background-color: white;
}
.row {
border: 1px dashed black;
height: 301px;
/* fix row height*/
}
.site-row-id-01 {
background-color: blanchedalmond;
}
.site-row-id-02 {
background-color: azure;
}
.site-box-id-01 {
position: absolute;
z-index: 1;
}
<body>
<div class="container-fluid">
<div class="row" id="site-row-id-01">
<div class="col-sm-4">
<div class="site-box site-box-id-01">Test Box 01</div>
</div>
<div class="col-sm-4">
<div class="site-box site-box-id-01">Test Box 02</div>
</div>
<div class="col-sm-4">
<div class="site-box site-box-id-01">Test Box 03</div>
</div>
</div>
<div class="row row-class-02" id="site-row-id-02">
<div class="col-sm-4">
<div class="site-box site-box-id-02">Test Box 04</div>
</div>
<div class="col-sm-4">
<div class="site-box site-box-id-02">Test Box 05</div>
</div>
<div class="col-sm-4">
<div class="site-box site-box-id-02">Test Box 06</div>
</div>
</div>
</div>
</body>
The Normal State
For Desktop
For Mobile
The Desired Result
For Desktop
For Mobile
The Current Result
For Desktop
(NOT Using Absolute Positon and z-index )
For Mobile
(Using Absolute Positon and z-index)
I have a solution at http://jsbin.com/fulequ/3/edit that I think meets your needs.
First, your html wasn't really responsive. I modified it as below. class="col-xs-6 col-sm-3" gives 4 columns in desktop mode and 2 columns in mobile view.
<div class="row" >
<div class="col-xs-6 col-sm-3">
<div class="site-box site-box-id-01">Test Box 01</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="site-box site-box-id-01">Test Box 02</div>
</div>
<div class="col-xs-6 col-sm-3" >
<div class="site-box site-box-id-01">Test Box 03</div>
</div>
<div class="col-xs-6 col-sm-3 ">
<div class="site-box site-box-id-01">Test Box 04</div>
</div>
</div>
To expand a block vertically in desktop mode, add the following CSS class to the <div class="site-box site-box-id-01">and remove it on mouseleave() function.
.expand-box{
z-index:1;
height: 150px;
position: absolute;
background-color: yellow;
}
For the mobile view you describe above, the JavaScript has to do the following
Set the height of the "row" div to the actual height that it is.
For each of the position them absolutely to the position that they are currently at.
Add expand-box CSS class to div to enlarge.
On mouseleave, the JavaScript has to undo the above steps.
Related
I would like to align three div in one line with a little space between first div and second div and last div using bootstrap as you see in the picture :
I try with this code :
<div class="row">
<div class="col-md-2">
<img src="img/emo_positif.png')}}">
</div>
<div class="col-md-7">
<div class="square1"></div>
</div>
<div class="col-md-3">
<img src="img/emo_negative.png')}}">
</div>
</div>
but it shows me a big space between the div
Using Bootstrap 3:
.row {
height: 24px;
}
.row > div {
height: 100%;
}
.square {
background: pink;
}
.square1 {
background: #01a8ff;
height: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" >
<div class="row">
<div class="col-xs-2 square">
</div>
<div class="col-xs-8">
<div class="square1"></div>
</div>
<div class="col-xs-2 square">
</div>
</div>
Check this Pen.
Read the docs.
For making the three division in same line . There are many ways. For better UX use display:flex in css for the parent division
Thanks
I'm building a sidebar using the grid system in Bootstrap 4, and the Flexbox utility. For the most part, I have it working, except that I would like to have the sidebar be "static," that is, it should not move when the user scrolls on the page next to it.
I attempted to do this by adding position:fixed to it, but when I did that, the column the sidebar was in was reduced in size to the length of the longest string that was there.
How do I make the sidebar stay fixed in place, while maintaining column width?
Here's my code: (It's a React app, so "class" is replaced with "className")
Parent component:
{ this.state.isLoggedIn ?
<div className="row h-100">
<div className="col-2 no-padding-right">
<Sidebar />
</div>
<div className="col-10 no-padding-left">
<Main />
</div>
</div> :
<Main />
}
The sidebar itself:
<div className="d-flex h-100 align-items-start sidebar-left flex-column sidebar-background sidebar-text">
<div className="p-2">
Week 11
</div>
<div className="mb-auto align-self-stretch h-100 p-2">Leagues/Teams</div>
<div className="p-2">Current Features</div>
<div className="p-2">Feature Request</div>
<div className="p-2">Settings</div>
<div className="p-2">Billing</div>
<div className="p-2">Log Out</div>
</div>
And the relevant piece of CSS:
.sidebar-left {
padding-top: 83px;
position: fixed;
}
Thanks!
Apply the max-width to the sidebar-left is equal to how much your col have.
.sidebar-left {
max-width: 16.666667%;
}
Stack Snippet
body {
margin: 0;
}
.sidebar-left {
font: 13px Verdana;
padding-top: 83px;
position: fixed;
background: red;
max-width: 16.666667%;
left: 0;
top: 0;
overflow: auto;
}
.p-2 {
word-break: break-word;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="row h-100">
<div class="col-2 no-padding-right">
<div class="d-flex h-100 align-items-start sidebar-left flex-column sidebar-background sidebar-text">
<div class="p-2">
Week 11
</div>
<div class="mb-auto align-self-stretch h-100 p-2">Leagues/Teams</div>
<div class="p-2">Current Features</div>
<div class="p-2">Feature Request</div>
<div class="p-2">Settings</div>
<div class="p-2">Billing</div>
<div class="p-2">Log Out</div>
</div>
</div>
<div class="col-10 no-padding-left">
<div class="main"></div>
</div>
</div>
I am trying to fix a page which wasn't bootstrapped like the illustration. But my col-2, col-3, col-4 don't align with the col 1 and 2. I cannot really understand how pull and push work. I have worked on my mobile layout and it seem fine, but as it goes to desktop, it messing the layout.
My layout becomes this, when I make it go desktop. Misaligned headings and columns under it.
You need to include yellow div-s into row so they won't jump over next line.
.left-box {
height: 290px;
width: 100%;
background: #e66;
margin: 3px;
}
.right-box {
height: 70px;
background: #ee6;
margin: 3px;
}
#media screen and (min-width: 992px) {
.left-box, .right-box {
height: 200px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-2 col-xs-5">
<div class="left-box"></div>
</div>
<div class="col-md-10 col-xs-7">
<div class="row">
<div class="col-md-3"><div class="right-box"></div></div>
<div class="col-md-3"><div class="right-box"></div></div>
<div class="col-md-3"><div class="right-box"></div></div>
<div class="col-md-3"><div class="right-box"></div></div>
</div>
</div>
</div>
</div>
Note: according to bootstrap rules, the statement class="col-md-2 col-sm-5" is the same that class="col-lg-2 col-md-2 col-sm-5 col-xs-12".
Actually you don't need push-pull classes I think. You could use a markup like this:
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="left-box"></div>
</div>
<div class="col-md-6">
<div class="right-box"></div>
<div class="right-box"></div>
<div class="right-box">etc...</div>
</div>
</div>
</div>
Pen: http://codepen.io/anon/pen/yVKgwG
I downloaded Bootstrap 4, set $enable-flex true and recompiled.
I have a question about Bootstrap 4 and flexbox.
If you reduce the size of Twitter homepage, you can see that "Who to follow" part is moving from right to the left side of the site (but main feed doesn't get effected by that), and this is the thing I want to do using Bootstrap 4 and flexbox. So, when I resize the window (for a hypothetical size like sm), #right will start after #left. #middle is the feed section.
How can I do it?
Here's my current setup.
#left {
background: yellow;
}
#middle {
background: brown;
}
#right {
background: #a8d6fe;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-2" id="left">
<div class="col-md-12">PROFILE</div>
<div class="col-md-12" id="menu">MENU</div>
</div>
<div class="col-sm-9 col-md-7" id="middle">NEWS</div>
<div class="col-sm-3 col-md-3" id="right">RIGHT PART</div>
</div>
</div>
Looks like you need a div with col- as a wrapper to order the flex items. Which makes sense, because only the flex items can be ordered. Not the flex container.
#import url('https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css');
[class*="col-"] {
display: flex;
flex-flow: row wrap;
}
#left{
background:yellow;
}
#middle {
background:brown;
order: 1;
}
#right {
background:#a8d6fe;
}
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-3 col-md-2" id="left">
<div class="col-md-12">PROFILE</div>
<div class="col-md-12" id="menu">MENU</div>
</div>
<div class="col-sm-9 col-md-7" id="middle">NEWS</div>
<div class="col-sm-3 col-md-3" id="right">RIGHT PART</div>
</div>
</div>
</div>
I have been trying for hours trying different examples I have found, and none seem to work.
What I want to do (without the custom JS): http://jsfiddle.net/paulalexandru/Z2Lu5/
However, I can't get it to work within Bootstrap. I am specifically using React-Bootstrap (I have changed the below code to normal HTML for those unfamiliar with React/React-Bootstrap), but I don't believe that to be the problem. I have a setup along the lines of:
<body>
<div class="container-fluid main">
<div class="row">
<div class="col-md-2 sidebar"
<my sidebar elements>
</div>
<div class="col-md-10">
<some random empty div (that will fill in the future)>
<div class="search">
<div className="panel-group">
<div className="panel panel-default">
<div className="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#searchResultsContainer">
<input type="text" onchange="handleChange()" />
</a>
</div>
<div id="searchResultsContainer" className="panel-collapse collpase">
<div className="panel-body">
<my table containing search results from the server>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
However, no matter how hard I try
.search {
position: fixed;
bottom: 0;
width: 100%;
}
You will also notice stuff to try and make the search results accordion, but that's useless to me until I can get this box to stay at the bottom.
My guess is that the Rows/Columns of Bootstrap are causing some issues. I can't move the search box out of the grid and to the bottom (which does work) because it then also covers the sidebar, and I am using the grid system to keep the search box dynamically sized/placed.
Also, I tried this but it didn't seem to work: Making expandable fixed footer in Bootstrap 3?
The solution is position: fixed (you can see the other example using it as well). It should work no matter what framework you are using.
body
{
margin: 0;
padding: 0;
}
.search
{
background: rgba(255,0,0,0.5);
bottom: 0;
position: fixed;
width: 100%;
}
#media only screen and (min-width: 550px)
{
.search
{
left: 50%;
margin-left: -250px;
width: 500px;
}
}
#media only screen and (min-width: 850px)
{
.search
{
margin-left: -400px;
width: 800px
}
}
<div class="container-fluid main">
<div class="row">
<div class="col-md-2 sidebar">
<div>my sidebar elements</div>
</div>
<div class="col-md-10">
<div>some random empty div (that will fill in the future)</div>
<div class="search">
<div className="panel-group">
<div className="panel panel-default">
<div className="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#searchResultsContainer">
<input type="text" onchange="handleChange()" />
</a>
</div>
<div id="searchResultsContainer" className="panel-collapse collpase">
<div className="panel-body">
<div>my table containing search results from the server</div> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JSFiddle