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
Related
I want to use a Font Awesome 5 icon as card background image using Bootstrap-4!
I tried everything what I found from the internet but nothing worked.
I'm using Angular2 (v8) along with Bootstrap 4.
The following code worked for me. I've simplified what I use but you still get a font-awesome icon as background and you can put text on top of it:
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-6 d-flex">
<div class="class-box">
<div class="bg-primary">
<i class="fa fa-question big-centered-icon"></i>
</div>
<div class="box-content">
<h3 class="title-bg text-outline"><Strong>TITLE</Strong></h3>
<h4 class="title-bg text-outline">Subtitle</h4>
<h4 class="title-bg text-outline"><Strong> Subtitle</Strong></h4>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 d-flex">
<div class="class-box">
<div class="bg-primary">
<i class="fa fa-question big-centered-icon"></i>
</div>
<div class="box-content">
<h3 class="title-bg text-outline"><Strong>HELLO</Strong></h3>
<h3 class="title-bg text-outline"><Strong> 2nd HELLO</Strong></h3>
<h3 class="title-bg text-outline"><Strong> 3rd HELLO</Strong></h3>
</div>
</div>
</div>
</div>
</div>
CSS:
.big-centered-icon {
font-size: 144px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex; /* add */
justify-content: center; /* add to align horizontal */
align-items: center; /* add to align vertical */
}
.class-box{ text-align:center;position:relative;margin:8px;width: 100%;padding-bottom: 75%}
div.class-box > div { position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;padding-top:15%}
.class-box .title-bg{font-size:24px;color:#000;}
See the working fiddle.
I have a div, inside a bootstrap column, that has class position-fixed so that the contents inside are fixed relative to the viewport. I am able to horizontally align these contents but I am having trouble vertically aligning it.
I know there are many methods out there in bootstrap 4, but it all seems to break due to the position-fixed class. Either the contents disappear somewhere outside the page, or nothing happens.
<div class="container-fluid">
<div class="row">
<div class="col-md">
<div class="container">
<div class="row justify-content-md-center">
<div class="position-fixed h-100 col-md-auto">
<div class="text-center vertical-center">
<h2>Title</h2>
<p>Subtext</p>
<a data-toggle="modal" data-target="#Modal" href="#">Click me</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div
If you want it to be fixed position, there's no reason to contain it inside the other elements (container, row, col) since as you said, it's positioning is relative to the viewport. Therefore, use custom CSS to center it...
.vertical-center {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
https://www.codeply.com/go/rtOA3jgjPG
Or, to use the Bootstrap classes, make the fixed element a flexbox container using d-flex, and then align-items-center to center.
<div class="position-fixed h-100 col-md-auto d-flex align-items-center">
<div>centered content</div>
<div>
https://www.codeply.com/go/TmySmKXXjC
Apply Bootstrap's flexbox utilities to the parent of the div you're trying to center (this is a good cheatsheet of what different flex properties do if you need it):
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md">
<div class="container">
<div class="row justify-content-md-center">
<div class="position-fixed h-100 col-md-auto d-flex align-items-center">
<div class="text-center vertical-center">
<h2>Title</h2>
<p>Subtext</p>
<a data-toggle="modal" data-target="#Modal" href="#">Click me</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Specifically, adding d-flex and align-items-center should work.
#OuterDiv {
position: fixed;
width: 100%;
height: 50px;
}
#InnerDiv {
display: inline-block;
top: 50%;
transform: translateY(-50%);
position: relative;
}
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 have a bootstrap panel where the height is automatically generated from a jquery script.
So, I would like to have the footer with a background for the entire section.
How can I achieve this goal ?
I don't want to fix the height for this section, is it possible to make something like :"height for the rest of your space in the panel".
Here the fiddle:
http://www.bootply.com/XBCffrO0My
Table layout approach
Idea is to have the element behave like a table and the child item as its row which would occupy the entire space.
Updated Bootply
#crud1 {
display: table;
width: 100%;
}
.panel-footer {
display: table-row;
height: 100%;
}
.panel-footer .row {
display: table-cell;
padding-top: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-4">
<div id="crud1" class="panel panel-primary" style="height: 248px;">
<div class="panel-heading clearfix">
<div class="pull-left">
ChartLine 1
</div>
<div class="pull-right">
<span class="label label-success">priusa2</span>
</div>
<div class="pull-right" style="padding-right: 7px;">
<span class="label label-success status"></span>
</div>
<p></p>
</div>
<!-- panel-heading closed -->
<div class="panel-body">
<div class="container-fluidrm">
No-picture
</div>
</div>
<!-- panel-body closed -->
<div class="panel-footer">
<div class="row" style="height: 100%;">
<div class="col-md-9">
<p>Description:</p>
</div>
<div class="col-md-1">
<a class="show-popup" href="#" id="poplink" data-showpopup="ChartLine 1"><span id="logos" class="material-icons"></span></a>
</div>
<div class="col-md-1" style="margin-left:7px;">
<span id="logos" class="glyphicon glyphicon-star"></span>
</div>
</div>
</div>
<!-- panel-footer closed -->
</div>
</div>
Flexible box approach
Give the child item flex: 1 to expand with the parent element.
Updated Bootply
#crud1 {
display: flex; /* Activate flexbox module layout */
flex-direction: column; /* Align items horizontally */
}
.panel-footer {
flex: 1; /* Expand with the parent */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-4">
<div id="crud1" class="panel panel-primary" style="height: 248px;">
<div class="panel-heading clearfix">
<div class="pull-left">
ChartLine 1
</div>
<div class="pull-right">
<span class="label label-success">priusa2</span>
</div>
<div class="pull-right" style="padding-right: 7px;">
<span class="label label-success status"></span>
</div>
<p></p>
</div>
<!-- panel-heading closed -->
<div class="panel-body">
<div class="container-fluidrm">
No-picture
</div>
</div>
<!-- panel-body closed -->
<div class="panel-footer">
<div class="row" style="height: 100%;">
<div class="col-md-9">
<p>Description:</p>
</div>
<div class="col-md-1">
<a class="show-popup" href="#" id="poplink" data-showpopup="ChartLine 1"><span id="logos" class="material-icons"></span></a>
</div>
<div class="col-md-1" style="margin-left:7px;">
<span id="logos" class="glyphicon glyphicon-star"></span>
</div>
</div>
</div>
<!-- panel-footer closed -->
</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