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
Related
I am trying to create bootstrap grid page with two main sections. one is the app content and the other one is side nav bar.
the nav bar is much shorter the the app content itself. what i am trying to accomplish is that whenever i scroll the page, the app side nav bat will always stick to the top of the page (top, not bottom of it)
my code:
<div class="row">
<div class="col-sm-10 col-md-10">
<div class="col-sm-8 col-md-8">
<app-content></app-content>
</div>
<div class="col-sm-4 col-md-4">
<app-side-navbar></app-side-navbar>
</div>
</div>
</div>
whenever i scroll the page, i want to always see on the top right corner the app navbar.
thanks!
this is what solved the issue for me:
<div class="row">
<div class="app-wrapper">
<div class="col-sm-10 col-md-10">
<div class="col-sm-8 col-md-8">
<app-content></app-content>
</div>
<div class="sticky">
<div class="col-sm-4 col-md-4">
<app-side-navbar></app-side-navbar>
</div>
</div>
</div>
</div>
</div>
and the css:
.sticky {
position: sticky;
top:0;
z-index: 999;
}
You can try using the overflow: auto for content wrapper only
<div class="row">
<div class="col-sm-10 col-md-10">
<div class="col-sm-8 col-md-8 content">
<div class='col-md-12 wrapper'>
Content
</div>
</div>
<div class="col-sm-4 col-md-4">
Sidebar
</div>
</div>
</div>
.content {
max-height: 100vh;
overflow: auto;
}
.wrapper {
height: 800px;
}
Let me know for more details
Try use fixed
<div class="row">
<div class="col-sm-10 col-md-10">
<div class="col-sm-8 col-md-8">
<app-content></app-content>
</div>
<div class="nav-sticky">
<div class="col-sm-4 col-md-4">
<app-side-navbar></app-side-navbar>
</div>
</div>
</div>
And in css:
.nav-sticky{
position: fixed;
top: 0;
height: 100%;
overflow:hidden;
}
Add this property to your app container
min-height:100vh;
max-height:100vh;
overflow:scroll;
Give position:fixed to your row.
Added header to my sample as well.
.app {
min-height: 100vh;
max-height: 100vh;
overflow: auto;
background: red;
color: white;
}
.row {
position: fixed;
width: 100%;
}
.header {
height: 50px;
background: blue;
color: white;
}
.navigator {}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 header">HEADER</div>
<div class="col-sm-10">
<div class="col-sm-8 app">
APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>APP CONTENT
</div>
<div class="col-sm-4 navigator">
NAVBAR
</div>
</div>
</div>
</div>
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 am trying to build a form to add new users to some kind of entity. The idea is to have user avatars in a line and on the end of the line there is a input-field with a typeahead to insert new users.
I tried this some years ago and ended up using javascript as I was not able to do this in plain css (2).
The big question: is this somehow possible in css3?
Basic idea of code:
<div class="availableWidth">
<div class="list">
<ul>
<li><div class="avatar">...</div></li>
...
</ul>
</div>
<div class="form">
<div class="typeaheadField">
<input ...>
</div>
<button>+</button>
</div>
</div>
CSS:
.list ul li {
list-style-type:none;
display:inline-block;
}
button {
width:50px;
}
Basic Idea is that the box .availableWidth has some width (100%) the box .list grows in width (when new li items are added) as the box .form should shrink in width. Right to the input is a some pixels wide button. The input should take the remaining space.
Is that possible in css3 or will I need Javascript?
You can use flexbox, or you can use display table attributes in CSS. Take a look:
.container {
display: table;
width: 100%;
position:relative;
}
.avatar {
width: 50px;
height: 50px;
display: table-cell;
}
.input {
height: 50px;
display:table-cell;
vertical-align: middle;
}
.input input {
width: 100%;
box-sizing: border-box;
padding: 5px;
}
<div class="container">
<div class="avatar">
<img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/>
</div>
<div class="avatar">
<img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/>
</div>
<div class="avatar">
<img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/>
</div>
<div class="input">
<input type="text"/>
</div>
</div>
<div class="container">
<div class="avatar">
<img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/>
</div>
<div class="avatar">
<img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/>
</div>
<div class="avatar">
<img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/>
</div>
<div class="avatar">
<img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/>
</div>
<div class="avatar">
<img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/>
</div>
<div class="input">
<input type="text"/>
</div>
</div>
You can add all the avatars that you want at left side and the input rearrange automatically.
You want to make input 100% width relative to some container from avatars to button. You can get it by using table, flexboxes or formatting contexts and floats.
Here is last one http://jsfiddle.net/53f0yzeL/
Notice overflow:hidden rule for .avatars-wrapper, it make container to fit exactly between floated elements and .avatars side so you can make input 100% wide.
I have following css:
#stopBtn{
width : 100%;
bottom: 0px;
}
.affix-bottom{
position: absolute;
}
this is javascript:
$("#stopBtn").affix({
offset: {
bottom: 0
}
});
The affix effect run smooth, but at the bottom it doesn't place below the content but overlap content.
The markup of it looks like:
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<!-- <div class="text-center"> -->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
</div>
<!-- </div> -->
</div>
</div>
<div class"tex-center" id="stopBtn">
<button class="btn btn-danger btn-mega stopButton">PAUSE</button>
</div>
I solved it, but putting some extra space after the accordion. put in about 4 does the trick
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.