I'm looking for a Dashboard Layout with bootstrap 4.
Based on https://getbootstrap.com/docs/4.0/examples/dashboard/ the dashboard works already fine.
But combined with https://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/ it seems not to work.
In the end the layout should look like this:
+----------------------------------------------------------------------+
| Nav (fixed, sticky) |
+----------------------------------------------------------------------+
| | |
| | |
| Sidebar | Main (scrollable) |
|(scrollable)| |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
+----------------------------------------------------------------------+
| Footer (fixed, sticky) |
+----------------------------------------------------------------------+
Is this possible?
Is there any example how it could work?
Thanks a lot.
Put Footer before </main> tag.
<footer class="footer" style="text-align: center;">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
</main>
To navbar add navbar-fixed-top and to footer add:
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
background-color: #eeeeee;
}
Related
I'm trying to display a scrollable dropdown in a scrollable div
To manage dropdown, I'm using position:relative on the container and position:absolute
on the content, but if the dropdown content is higher than the container, or start at the end of the scrollable content, it will be displayed below, and maybe hiden by the overflow
example
example
I'm looking for a way to display this dropdown outside/over the parent div, like a native select do.
I have something like this
+------------------------+
| other |
| show |
| +---------------+ |
| | Content which | |
| | expands over | |
+------------------------+
... but I want something like this (thanks for the illustration :) ) :
+------------------------+
| other |
| show |
| +---------------+ |
| | Content which | |
| | expands over | |
+---| the parent. |----+
+---------------+
Here is an example of what I'm trying to do https://codepen.io/spoissonnierAz/pen/LYWOarx
HTML
<div class="parent">
<div class="data">other</div>
<div class="data">
<div id="show1" onclick="$('#dropdown-content1').show();$('#show1').hide();$('#hide1').show()">show</div>
<div id="hide1" onclick="$('#dropdown-content1').hide();$('#show1').show();$('#hide1').hide()">hide</div>
<ul id="dropdown-content1" class="dropdown-content">
<li>data</li>
...
<li>data end</li>
</ul>
</div>
<div class="data">other</div>
...
<div class="data">other</div>
<div class="data">
<div id="show2" onclick="$('#dropdown-content2').show();$('#show2').hide();$('#hide2').show()">show</div>
<div id="hide2" onclick="$('#dropdown-content2').hide();$('#show2').show();$('#hide2').hide()">hide</div>
<ul id="dropdown-content2" class="dropdown-content">
<li>data</li>
...
<li>data</li>
<li>data end</li>
</ul>
</div>
<div class="data">other</div>
<div class="data">
<select>
<option>data</option>
....
<option>data</option>
<option>data end</option>
</select>
</div>
<div class="data">other</div>
</div>
CSS
.parent {
overflow: auto;
}
.data {
position:relative;
}
.dropdown-content {
display: none;
position: absolute;
height:100px;
overflow: auto;
z-index:50;
}
.dropdown-content > li {
display: block;
}
#hide1,#hide2 {
display: none
}
Thanks
I am assuming you have this...
+------------------------+
| other |
| show |
| +---------------+ |
| | Content which | |
| | expands over | |
+------------------------+
... but you want this:
+------------------------+
| other |
| show |
| +---------------+ |
| | Content which | |
| | expands over | |
+---| the parent. |----+
+---------------+
You can position the container with additional information using .position() and .offset() or use .css() directly, which ever works for you.
See stackoverflow search results for "jquery position element relative to another" or similar.
One example here: How to position one element relative to another with jQuery
jQuery offset
jQuery position
jQuery css
If I try the old absolute centering trick of left:50% and transform:translate(-50%, 0) on a child element that is a table (with 'auto' width), the width is limited to 50% of the parent:
What I want:
-----------------------------------------
| |
| |
| |
| ----------------------------- |
| | | |
| | | |
| | | |
| ----------------------------- |
| |
| |
| |
-----------------------------------------
But what I get is:
-----------------------------------------
| |
| |
| |
| -------------------- |
| | | |
| | | |
| | | |
| -------------------- |
| |
| |
| |
-----------------------------------------
The reason being, when 50% left is applied it's reduced in width to fit the parent:
-----------------------------------------
| |
| |
| |
| --------------------|
| | ||
| | ||
| | ||
| --------------------|
| |
| |
| |
-----------------------------------------
Which is then centered using translate.
Any way to overcome this and keep auto width set on the table?
Code here: https://jsfiddle.net/n4f9v5ro/3/
Only seems to be a problem when the child is display:block?
You can center by using auto margins instead of left: 50% and translateX(-50%).
.main {
width: 500px;
height: 500px;
position: relative;
border: 1px solid black;
margin: 30px;
}
.main > div {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
border: 1px solid blue;
}
table {
margin: 0 auto;
border: 1px solid red;
}
<div class="main">
<div>
<table>
<tr>
<td>some long text some long text some long text some long text some long text</td>
<td>something else</td>
<td>something else</td>
</tr>
</table>
</div>
</div>
<div class="main">
<div>
<table>
<tr>
<td>some</td>
<td>small</td>
<td>text</td>
</tr>
</table>
</div>
</div>
What I would like to accomplish with Bootstrap:
desktop view
+-------------------------------------------+
| | |
| | |
| | |
| | |
| | |
| | |
| sidebar | content |
|accordion | |
| menu | |
| | |
| | |
| | |
| | |
|----------| |
| submenu | |
+-------------------------------------------+
tablet view
+-------------------------------+
| | submenu |
| |-------------------------|
| | |
| | |
| | |
| | |
|side | content |
|bar | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
+-------------------------------+
phone view
+--------------+
| submenu |
|--------------|
| sidebar |
| accordion |
| toogle |
|--------------|
| |
| |
| |
| content |
| |
| |
| |
| |
| |
+--------------+
What I have done so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- Bootstrap core CSS -->
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
<style>
.row {
margin-bottom: 20px;
}
.row .row {
margin-top: 10px;
margin-bottom: 0;
}
[class*="col-"] {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
border: 1px solid #ddd;
background-color: rgba(86,61,124,.15);
border: 1px solid rgba(86,61,124,.2);
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-2 col-xs-12">
side bar
<div class="row">
<div class="col-md-12 col-xs-12">sub menu</div>
</div>
</div>
<div class="col-md-8 col-sm-10 col-xs-12">content</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body>
</html>
Is it really possible to make this sample template with Bootstrap? Any Bootstrap guru here to help me?
.............................................
Check this fiddle
the trick is take advantage of the Responsive utilities
http://getbootstrap.com/css/#responsive-utilities
I want something below like structure in my webpage:
+---------------+ +-----------+
| | | |
| | | Div-B |
| | |Float:left |
| | | |
| Div-A | | |
| Float: left | +-----------+
| | +-----------+
| | | Div-C |
| | |<marquee> |
| | |</marquee> |
| | +-----------+
| |
+---------------+
But I can't creat Div-C like above style. If I give a different background color of Div-C, it extends to left border of Div-A. So I can't make white spaces between Div-A and Div-C. It is becoming like this:
+---------------+ +-----------+
| | | |
| | | Div-B |
| | |Float:left |
| | | |
| Div-A | | |
| Float: left | +-----------+
|---------------|-+-----------+
| Div-C |
| (Background color fills |
| this whole section |
|---------------|-+-----------+
| |
+---------------+
Also note that Div-C contains a marquee.
Please give me solution.
Why don't you use something like this: (working jsFiddle)
HTML:
<div id="mainContainer">
<div id="divA"></div>
<div id="divB"></div>
<div id="divC"></div>
</div>
CSS:
#mainContainer{ overflow:hidden; }
#divA{ float:left; width:60%; }
#divB{ float:right; width:30%; }
#divC{ float:right; width:30%; }
2 ways possible.
1) You could use CSS Positioning. Cover all your divs in a mother div then give the mother div a CSS position:relative; and a desired width and height... then all the Children CSS position: absolute; then DivA could have CSS left:0px; then DivB could go for a CSS right:0px; top:0px; then DivC CSS right:0px bottom:0px;... give them their respective widths and Colors.
Example:
<style type="text/css">
.kids{position:absolute;}
</style>
<div id="mainContainer" style="width:300px; height:500px; background:#ccc; position:relative;">
<div class="kids" id="divA" style="width:60%; height:100%; top:0px; left:0px; background:orange;">A</div>
<div class="kids" id="divB" style="width:60%; height:50%; top:0px; right:0px; background:green;">B</div>
<div class="kids" id="divC" style="width:60%; height:50%; bottom:0px; right:0px; background:red;">C</div>
</div>
Fiddle: http://jsfiddle.net/pgkWL/
2) Create a <table> with 1 full column and 2 half columns. Place the divs in respective columns.
<div id="aNewWrapper" style="width:300px; height:500px;">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" rowspan="2" height="500"><div id="divA" style="width:100%; height:100%; background:orange;">A</div></td>
<td width="50%" height="250"><div id="divB" style="width:100%; height:100%; background:green;">B</div></td>
</tr>
<tr>
<td height="250"><div id="divC" style="width:100%; height:100%; background:red;">C</div></td>
</tr>
</table>
</div>
Fiddle: http://jsfiddle.net/tWCBP/
I am using the 1140px fluid grid (cssgrid.net) layout.
I am having some problem..
My layout looks like this:
Side Menu - Content
- Content
- Content
- Content
- etc. etc.
My problem is, that my layout does like this:
Side Menu - Content
Content
Content
Content
Content
etc. etc.
I want, so my "Side Menu" is full height, so it will push the content to "the right".
My layout (Exist of 12 cols):
<div class="container">
<div class="row">
<div class="twocol">
-- Side Menu Content Here --
</div><!-- END 2col -->
<div class="tencol last">
content content content
</div>
<div class="tencol last">
content content content
</div>
<div class="tencol last">
content content content
</div>
<div class="tencol last">
content content content
</div>
</div><!-- END .row -->
</div><!-- END .container -->
The CSS is:
.container {
padding-left: 20px;
padding-right: 20px;
}
.row {
width: 100%;
/*max-width: 1140px; */
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}
.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol {
margin-right: 3.8%;
float: left;
min-height: 1px;
}
.row .onecol {
width: 4.85%;
}
.row .twocol {
width: 13.45%;
}
.row .threecol {
width: 22.05%;
}
.row .fourcol {
width: 30.75%;
}
.row .fivecol {
width: 39.45%;
}
.row .sixcol {
width: 48%;
}
.row .sevencol {
width: 56.75%;
}
.row .eightcol {
width: 65.4%;
}
.row .ninecol {
width: 74.05%;
}
.row .tencol {
width: 82.7%;
}
.row .elevencol {
width: 91.35%;
}
.row .twelvecol {
width: 100%;
float: left;
}
.last {
margin-right: 0px;
}
I hope you can help me. Thank you.
Your layout looks this way:
body
+------------------------------------------------------------+
| two col content ten col content |
| +--------------+ +---------------------------------------+ |
| | | | | |
| | | | | |
| +--------------+ +---------------------------------------+ |
| +---------------------------------------+ |
| | ten col content | |
| | | |
| +---------------------------------------+ |
| +---------------------------------------+ |
| | ten col content | |
| | | |
| +---------------------------------------+ |
| +---------------------------------------+ |
| | ten col content | |
| | | |
| +---------------------------------------+ |
| +---------------------------------------+ |
| | ten col content | |
| | | |
| +---------------------------------------+ |
| +---------------------------------------+ |
| | ten col content | |
| | | |
| +---------------------------------------+ |
+------------------------------------------------------------+
Do not repeat that ten col content. Keep it as a wrapper and use smaller divs. Like this:
body
+------------------------------------------------------------+
| two col content ten col content |
| +--------------+ +---------------------------------------+ |
| | | | +-----------------------------------+ | |
| | | | | | | |
| +--------------+ | | | | |
| | +-----------------------------------+ | |
| | +-----------------------------------+ | |
| | | | | |
| | | | | |
| | +-----------------------------------+ | |
| | +-----------------------------------+ | |
| | | | | |
| | | | | |
| | +-----------------------------------+ | |
| | +-----------------------------------+ | |
| | | | | |
| | | | | |
| | +-----------------------------------+ | |
| | +-----------------------------------+ | |
| | | | | |
| | | | | |
| | +-----------------------------------+ | |
| +---------------------------------------+ |
+------------------------------------------------------------+
In case if you want the HTML Code,
<div class="container">
<div class="row">
<div class="twocol">
-- Side Menu Content Here --
</div><!-- END 2col -->
<div class="tencol last">
<div>
content content content
</div>
<div>
content content content
</div>
<div>
content content content
</div>
<div>
content content content
</div>
</div>
</div><!-- END .row -->
</div><!-- END .container -->
Hope it helps!
You can add height: 100% to the menu-div (twocol). That should do it.
In any way: maybe it would be a bit better to change the structure of the divs a bit:
<div class="menu">
-- Side Menu Content Here --
</div>
<div class="content">
<div class="tencol last">
content content content
</div>
<div class="tencol last">
content content content
</div>
<div class="tencol last">
content content content
</div>
<div class="tencol last">
content content content
</div>
</div>
I my experience it makes the layouting easier, when you have seperate divs containing the menu, content, header and footer.
When you use float, I often set a backgroudcolor to my divs during development, so I can see how much space they take (especially the height). Because as soon as the div ends, all left floated divs will go as far left as they can.
I just did it here on jsfiddle ( http://jsfiddle.net/cXXGj/ ). I think you need this way. I just wrapped content inside another div with class content_container. Have a look at the fiddle: http://jsfiddle.net/cXXGj/