I have two "boxes" in a sidebar with responsive widths. I need the headers to be sticky and the content scrollable. If I try to use position:fixed on the headers, I run into the issue where they lose their responsive width/background color.
Here's a jsfiddle of one of the boxes: http://jsfiddle.net/4tadzk7x/
HTML:
<aside class="sidebar col-xs-3 pull-right">
<div class="box-with-header queries">
<div class="header-fixed">
<h5 class="headline">Headline</h5>
</div>
<div class="content">
<ul class="item no-bullets red">
<li>Text Content</li>
<li>Text Content</li>
<li>Text Content</li>
</ul>
<hr />
<ul class="item no-bullets blue">
<li>Text Content</li>
<li>Text Content</li>
<li>Text Content</li>
</ul>
<hr />
<ul class="item no-bullets yellow">
<li>Text Content</li>
<li>Text Content</li>
<li>Text Content</li>
</ul>
<hr />
</div>
</div>
</aside>
Add this two classes:
.header-fixed{
position:fixed;
width:100%;
}
.content{
padding-top:45px;
}
Check JSFiddle Demo
Update:
If width isn't always 100% so you can simply move header div ans and modify your HTML code like this:
<aside class="sidebar col-xs-3 pull-right">
<div class="header-fixed">
<h5 class="headline">Headline</h5>
</div>
<div class="box-with-header queries">
<div class="content">
//content ...
</div>
</div>
</aside>
Check JSFiddle Demo
Use width: 100% and top: 0 on .header-fixed
Then this:
.box-with-header.queries {
max-height: 250px;
height: 250px;
margin-top: 3em;
}
FIDDLE
I am not sure if I understand your problem correctly. But if you want headers to be fixed and responsive. Give it position fixed and width 100%. That should do it.
Updated fiddle : http://jsfiddle.net/4tadzk7x/1/
.headline {
background: red;
padding: 10px;
margin: 0 0 8px 0;
text-transform: uppercase;
font-size: 13px;
position:fixed;
top:0;
width:100%;
}
You also need to add margin-top to content so that it doesn't overlap with the header.
div.content{
margin-top:40px;
}
Related
I want to create button like menu using navbar. I want to do this because it's collapsible interface for small devices.
I write this HTML markup:
<div class="container">
<nav class="navbar" style="background-color: transparent;">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar" style="background-color: black;">
<span class="icon-bar" style="background-color: white;"></span>
<span class="icon-bar" style="background-color: white;"></span>
<span class="icon-bar" style="background-color: white;"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
</div>
</div>
</nav>
</div>
and this styles:
nav ul {
width: 100%;
text-align:center;
}
nav ul li {
text-align: center;
width: 17%;
background-color: #dbd9d9;
margin: 10px;
}
but there is some problem:
this menu items isn't center in ul. How I can center all li in ul?
If I resize the window in some width this menu broke in 2 line. How I can fix this that my menu being 1 line for md an lg sizes?
Demo
Thanks
Using white-space: no-wrap will stop items wrapping within the ul
Bootstrap puts float: left on nav.li elements which we need to override
Change your css to this:
nav ul {
width: 100%;
text-align: center;
white-space:nowrap /* <-- changed */
}
nav ul li {
text-align: center;
width: 17%;
background-color: #dbd9d9;
/*padding: 10px;*/
margin: 10px;
display: inline-block !important; /* <-- changed */
float: none !important; /* <-- changed */
}
Have to use !important to override bootstrap
Updated bootply
With Changes in your HTML and removing width of li, I got this working as you wanted.
<ul class="row nav navbar-nav">
<li class="active col-xs-3 col-sm-2 col-ms-2 col-lg-2">Home</li>
<li class="col-xs-3 col-sm-2 col-ms-2 col-lg-2">Page 1</li>
<li class="col-xs-3 col-sm-2 col-ms-2 col-lg-2">Page 2</li>
<li class="col-xs-3 col-sm-2 col-ms-2 col-lg-2">Page 3</li>
<li class="col-xs-3 col-sm-2 col-ms-2 col-lg-2">Page 4</li>
</ul>
Here is a working Bootply
Dont worry about setting the width to the li manually, use the bootstrap inbuilt classes. Also the above HTML could be rewritten like below.
<li class="col-xs-3 col-sm-2">Page 1</li>
You dont have to specify col-ms-2 col-lg-2 because by default bootstrap framwework will carry forward styles to all the devices untill a specific rule for that device is given. Here the rule col-sm-2 will be carried out to md device and lg device. But its always good practice to be as detailed as possible.
Here is a JSfiddle with the code to my problem:
https://jsfiddle.net/367v2n1q/14/
On the right you will see a red bar which has a fixed position. I'm trying to get the body to have a min width of 808 pixels, but it is letting me re-size the body to smaller than 808.
The center div stops shrinking when it hits 808 pixels wide, but then the fixed div on the right keeps on going and envelops the rest of the content.
CSS
body.total{
background-color: black;
position: relative;
min-width: 808px;
}
.rightSidePane {
position: absolute;
background-color: red;
clear: both;
top: 0;
right: 0;
}
HTML snippet
<!DOCTYPE html>
<html>
<head>
<!-- head stuff here -->
</head>
<body class="total">
<div id="wrapper" class="leftSidePane">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="mainContent">
<h1>
WWW.SITE.COM
</h1>
<h2>dedicated to stuff</h2>
<p style="text-align: center;
color: #5D5D5D;">last updated: 01.01.2016</p>
<br>
<p style="
font-family: 'Times New Roman';
color: #C1C1C1;
font-weight: bold;
font-size: 20px;
text-align: center;
">Site visited 27 times</p>
<br><br>
<hr>
</div>
</div>
<div class="rightSidePane">
<!-- Side bar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand-right">
</li>
<li>
<a href="#">
</a>
</li>
<li>
<div class="barfix"></div>
</li>
<li class="board">
</li>
<li class="nextBar">
</li>
<li>
<div class="tileRightInit" id="bs">
<div class="barTextRight">MAIN</div>
</div>
</li>
<li>
<div class="tileRight" id="bs">
<div class="barTextRight">News</div>
</div>
</li>
<li>
<div class="tileRight" id="bs">
<div class="barTextRight">Links</div>
</div>
</li>
<li>
<div class="tileRight" id="bs">
<div class="barTextRight">Credits</div>
</div>
</li>
<li>
<div class="tileRight" id="bs">
<div class="barTextRight">About</div>
</div>
</li>
<li class="bottomRight">
</li>
</ul>
</div>
</div>
</body>
</html>
I figured out the problem. I needed to be using absolute positioning for the div on the right. Here is the fixed JS fiddle: https://jsfiddle.net/367v2n1q/15/
Here is the fixed CSS:
body.total{
background-color: black;
position: relative;
min-width: 840px;
}
.rightSidePane {
position: absolute;
background-color: red;
clear: both;
top: 0;
right: 0;
}
The HTML remained the same. Thanks #Roope for pointing out that the body never fell below 808px width, I don't know why I didn't catch that but you pointed me in the right direction.
Since I do want to use the same panel on every page in a jQuery multipage html file, I'm interested in using the same code for every page.
This should work with external panels. However, I do have a problem with the positioning: As far as I can see, an external panel always opens on the full page height. What I want to have is instead the same behavior as the panel in the jQuery mobile demo page:
always visible on big screens (e.g. desktop browser) and,
when always visible, "inside" the page (e.g. below the header).
All in all: I wan't to create an external panel with the exact behavior of the (internal) panel on the demo page.
My first thought was to include an external html file on every page, so I can at least only edit this single file to save it everywhere. This looks great at first, but doesn't work at all because then the elements would have the same id (e.g. using forms in the panel).
Is there a clean solution for this problem?
The exact CSS and HTML from the JQM Demo Page is (see below). The JQM Demo page shows the panel below the header if the browser window is larger than 60em --- 960px and in my demo i set it 40em
External Panels go at end of data role page(s).
Demo expand the window to reveal the panel
https://jsfiddle.net/jag6ose3/
Html
<div data-role="page">
<div data-role="header">
<h1>External panels</h1>
Opanel
</div>
<div role="main" class="ui-content my-content">
<h1>Content Area</h1>
</div>
</div>
<div data-role="panel" id="my-panel" data-position="left" data-display="overlay" data-theme="a">
<br>
<ul data-role="listview">
<li>The Panel</li>
<li>option A</li>
<li>option B</li>
<li>option C</li>
<li>option D</li>
</ul>
</div>
Css
#media (min-width: 40em) {
#my-panel {
visibility: visible;
position: relative;
left: 0;
clip: initial;
float: left;
width: 25%;
background: none;
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
transform: none !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.my-content {
width: 67%;
padding-top: 2em;
padding-left: 5%;
padding-right: 3%;
float: right;
}
.opanel {
visibility:hidden;
}
}
Code
$(function () {
$("body>[data-role='panel']").panel(); //initialize the external panel
$(document).on("click", ".opanel", function () {
$("#my-panel").panel("open")
});
});
There is a more complex example. Width of panel is 300px and window is less then 900px, icon .opanel will be displayed.
<script id="panel-init">
function resizeP() {
var cw = $("body").prop("clientWidth");
var padding2x = 32;
if (cw > 900) {
$(".my-content").width(cw - 300 - padding2x);
}
else
$(".my-content").width(cw - padding2x);
}
$(function () {
$("body>[data-role='panel']").panel(); //initialize the external panel
$(document).on("click", ".opanel", function () {
$("#my-panel").panel("open");
});
});
$(document).ready(function () {
resizeP();
});
$(window).resize(function () {
resizeP();
});
</script>
<style>
##media screen and (min-width: 900px) {
#my-panel {
visibility: visible;
position: relative;
left: 0;
clip: initial;
float: left;
width: 300px;
background: none;
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
transform: none !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.my-content {
width: 300px;
/*padding-top: 2em;
padding-left: 5%;
padding-right: 3%;*/
float: right;
}
.opanel {
visibility: hidden;
}
}
.ui-content {
padding: 16px;
}
.countBubl {
float: left;
margin-top: -30px;
margin-left: 35px;
background: #ed1d24;
color: #fff;
padding: 2px;
}
.ui-li-static.ui-collapsible > .ui-collapsible-heading {
margin: 0;
}
.ui-li-static.ui-collapsible {
padding: 0;
}
.ui-li-static.ui-collapsible > .ui-collapsible-heading > .ui-btn {
border-top-width: 0;
}
.ui-li-static.ui-collapsible > .ui-collapsible-heading.ui-collapsible-heading-collapsed > .ui-btn,
.ui-li-static.ui-collapsible > .ui-collapsible-content {
border-bottom-width: 0;
}
</style>
<div data-role="page">
<div data-role="header">
<h1>External panels</h1>
Opanel
</div>
<div role="main" class="ui-content my-content">
<h1>Content Area</h1>
<button>dds</button>
<p>A paragraph with a tooltip. Learn more</p>
<div data-role="popup" id="popupInfo" class="ui-content" data-theme="a" style="max-width:350px;">
<p>Here is a <strong>tiny popup</strong> being used like a tooltip. The text will wrap to multiple lines as needed.</p>
</div>
<ul data-role="listview" data-inset="true" data-divider-theme="a">
<li data-role="list-divider">Mail</li>
<li>Inbox</li>
<li>Outbox</li>
<li data-role="list-divider">Contacts</li>
<li>Friends</li>
<li>Work</li>
</ul>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>Summary <span class="ui-li-count ui-btn-corner-all countBubl">12</span></li>
<li>Favs</li>
<li>Setup</li>
</ul>
</div><!-- /navbar -->
</div>
</div>
<div data-role="panel" id="my-panel" data-position="left" data-display="overlay" data-theme="a">
<div data-role="collapsibleset" data-theme="a" data-inset="false">
<div data-role="collapsible">
<h2>Mailbox</h2>
<ul data-role="listview">
<li>Inbox <span class="ui-li-count">12</span></li>
<li>Outbox <span class="ui-li-count">0</span></li>
<li>Drafts <span class="ui-li-count">4</span></li>
<li>Sent <span class="ui-li-count">328</span></li>
<li>Trash <span class="ui-li-count">62</span></li>
</ul>
</div>
<div data-role="collapsible">
<h2>Calendar</h2>
<ul data-role="listview" data-theme="a" data-divider-theme="b">
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
<li>
<a href="index.html">
<h3>Stephen Weber</h3>
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
</a>
</li>
<li>
<a href="index.html">
<h3>jQuery Team</h3>
<p><strong>Boston Conference Planning</strong></p>
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
</a>
</li>
<li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
<li>
<a href="index.html">
<h3>Avery Walker</h3>
<p><strong>Re: Dinner Tonight</strong></p>
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
</a>
</li>
<li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li>
<li>
<a href="index.html">
<h3>Amazon.com</h3>
<p><strong>4-for-3 Books for Kids</strong></p>
<p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
<p class="ui-li-aside"><strong>12:47</strong>PM</p>
</a>
</li>
</ul>
</div>
<div data-role="collapsible">
<h2>Contacts</h2>
<ul data-role="listview" data-autodividers="true" data-theme="a" data-divider-theme="b">
<li>Adam Kinkaid</li>
<li>Alex Wickerham</li>
<li>Avery Johnson</li>
<li>Bob Cabot</li>
<li>Caleb Booth</li>
<li>Christopher Adams</li>
<li>Culver James</li>
</ul>
</div>
</div>
#*<br>
<ul data-role="listview">
<li>The Panel</li>
<li>option A</li>
<li>option B</li>
<li>option C</li>
<li>option D</li>
</ul>*#
</div>
</div>
Does anybody have idea how I can put content (div-menu) INSIDE (over sliding picture) my flex slide (li):
Flex slider default code:
<div class="wrapper_top">
<div class="flexslider">
<ul class="slides">
<li>
<img src="img/s1.jpg" />
</li>
<li>
<img src="img/s2.jpg" />
</li>
</ul>
</div>
</div>
and I want put for example .willbemenu div. This is picture what i want: http://s7.postimg.org/5ul8zk1d7/WILLBE.jpg
.willbemenu{width: 1000px; background-color: orange; padding: 10px; text-align: center;}
I try this way and work, but problem is when flex slider make slide, I need willbemenu div FIXED without sliding.
<div class="flexslider">
<ul class="slides">
<li style="background-image: url(img/s1.jpg);">
<div class="willbemenu">Some option Some option</div>
</li>
</div>
Use a div outside positioned absolute; You can use css tricks to center.
<style>
.willbemenu{ width:1000px; background-color:orange; padding:10px; text-align:center; }
.willbemenu{ position:absolute; top:10px; left:50%; margin-left:-500px; z-index:1; }
</style>
<div class="flexslider">
<div class="willbemenu">Some menu stuff</div>
<ul class="slides">
<li><img src="img/s1.jpg" /></li>
<li><img src="img/s2.jpg" /></li>
</ul>
</div>
I have this div and I have set its z-index : 99999, its working fine on firefox and safari, but when I ma testing it on chrome , the footer is not the top element,
What else should I do to make it topmost element
<div id="footer" style="z-index: 99999 !important; width: 100%; height: 65px; position: fixed; bottom: 0px; ">
<div class="container">
<div class="footer-nav">
<ul>
<li>Team</li>
</ul>
<ul>
<li>Jobs</li>
</ul>
<ul>
<li><Twitter></li>
</ul>
</div>
<hr>
</div>
</div>
http://jsfiddle.net/A5jcT/2/
<div id="footer">
<div class="container">
<div class="footer-nav">
<ul>
<li>Team</li>
</ul>
<ul>
<li>Jobs</li>
</ul>
<ul>
<li><Twitter></li>
</ul>
</div>
<hr>
</div>
</div>
#footer
{
border:1px solid blue; z-index: 9999;width: 100%;
height: 65px;position: ; bottom: 0px;
}
.container
{
border:1px solid red;position:relative;z-index: -10
}
.footer-nav
{
border:1px solid green;position:relative;z-index: -20
}
it looks like you have to make other elements also positioned. Now you have the footer on top.