I'm creating a responsive website using bootstrap.
When the browser window narrows, the columns should collapse.
The issue is, I want dropdowns to appear when I click on heading.
I've positioned the menu absolute so I can put the z-index above.
In full width, it looks fine:
When columns stack, the menu is pushed to the left
How can I position the menu beneath the centered menu heading text? One way I can think of is to set the position of the dropdown menu to the x y position of the heading text. Is that the only way?
<div class="col-md-1">
<div id="heading_practice">
<a href="#">
<h4>Practice Areas</h4>
</a>
<div class="menu_practice">
<p>test</p>
<p>test2</p>
</div>
</div>
</div>
<div class="col-md-1">
<div id="heading_about">
<a href="#">
<h4>About Us</h4>
</a>
<div class="menu_about">
<p>test</p>
<p>test2</p>
<p>test3</p>
</div>
</div>
</div>
CSS
/*Menu*/
#home, #heading_practice, #heading_about, #heading_contact {
position: relative;
text-align:center;
}
.menu_practice, .menu_about, .menu_contact {
position: absolute;
padding: 10px;
border: thin solid Silver;
background: rgba(0, 0, 0, 0.9);
color: white;
z-index: 1;
margin-left:20px;
text-align:left;
}
If you're using Bootstrap, then why not use Bootstrap-Dropdowns?
http://getbootstrap.com/components/#dropdowns
It also seems like you're building a navbar there, Bootstrap has that integrated aswell with well-working support for Dropdowns:
http://getbootstrap.com/components/#navbar
Related
I'm using a collapsible bootstrap navigation. I made a few changes to a .css so that navigation links look like tabs. Positioning links at the bottom of header using a margin property did not work, because when zooming in and out navigation was sometimes pushed up or down by a pixel. Instead I set a position property to absolute to place navigation at the bottom of the hader. Now when I click on the navbar button. Navigation is pushed upwards instead of downwards and header is not expanding.
Here's my HTML:
<div class="header-inner clearfix">
<nav class="navigation pull-right" role="navigation">
<div class="navbar pull-right">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
</a>
</div>
<div class="nav-collapse in collapse" style="height: auto;">
<ul class="nav menu nav-pills">
<li>
<a>link1</a>
</li>
<li>
<a>link2</a>
</li>
<li>
<a>link3</a>
</li>
</ul>
</div>
</nav>
</div>
And here is my CSS:
.nav-pills > li > a {
border-width: 2px 2px 0 2px;
border-radius: 5px 5px 0 0;
border-color: #cc0000;
border-style: solid;
padding: 8px 12px 8px 12px;
}
.header-inner {
border-bottom: 2px solid #cc0000;
position: relative
}
.navigation {
position: absolute;
bottom: 0;
}
Im hoping this can be solved setting a margin of navigation using different units than pixels if not, how can I change the .js file.
Thanks I already solved a problem. When a screen width is smaller than 900 px, when instead of navigation bar a navigation button apears I just set a position property to static and now everithing works fine.
Thanks anyway
Hi all I want to know if the following is possible. I am using bootstrap frame work to build a simple webpage. In the CSS I have borders on certain div elements showing as gray however when I view from the mobile a few of these divs are hidden and the border property looks very out of place. I would like to know if there is a way to target CSS elements with bootstrap so if a page is re sized to mobile the border color changes to black or doesn't show at all.
Here is a sample of my code.
HTML
<div class="container">
<!--Strt of row-->
<div class="row">
<!--leftdiv1-->
<div class="col-sm-6" id="left1">
<h3 class="text-center" id="main">XXXXXXX</h3>
<p class="text-center">XXXX & XXXXX</p>
</div>
<!--rightdiv1-->
<div class="col-sm-6 hidden-xs contacts" id="right1">
<ul>
<li><a id ="print" href="#"><span class="glyphicon glyphicon-print"></span> Print</a></li>
<li><span class="glyphicon glyphicon-save-file"></span> Download</li>
<li><a id="contact" href="#"><span class="glyphicon glyphicon-earphone"></span> Contact</a></li>
</ul>
</div>
</div>
CSS
#left1 {
border-right: dashed grey 3px;
border-bottom: dashed grey 3px;
height: 100px;
overflow: auto;
}
#right1 {
border-bottom: dashed grey 3px;
height: 100px;
overflow: auto;
}
Yes, as I see you are trying to hide the col-xs so the size is <768px See Bootstrap CSS So you would add a #media in your css. This will work:
#media (max-width: 768px) {
#left1 {
border-right: 0px;
border-bottom: 0px;
}
#right1 {
border-bottom: 0px;
}
}
You can put an extra class on the element for example: hidden-xs. It is build in bootstrap.
http://getbootstrap.com/css/#responsive-utilities
I have a sidebar I want sticky when its hits the header - so I wrote a script that gives it a fixed class when scroll reaches correct position, then gave it a fixed position. Sp far so good- But the sidebar has an expanding column, and being fixed this expandes the sidebar down and out of the page.
How can I make it stick but still push content down?
You can not do it using pure css because:
An element with position: fixed; is positioned relative to the
viewport, which means it always stays in the same place even if the
page is scrolled. The top, right, bottom, and left properties are used
to position the element.
A fixed element does not leave a gap in the page where it would
normally have been located.
So it is out of the document's flow but you can use js to achieve what you want like this:
$(document).ready(function () {
$('#expander').click(function () {
$('.content').toggleClass('nav-expanded');
})
});
.navbar {
position: fixed !important;
width: 100%;
}
p {
text-align: center;
}
.header{
padding: 10px;
}
.content {
padding-top: 60px;
transition: .35s;
}
.nav-expanded {
padding-top: 165px; /*you can change the value to more accuracy */
}
.navbar-ex1-collapse{
width: 100%;
}
.list-group .list-group-item{
background: #f8f8f8 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
<div class="header">
Logotipo
<button id="expander" type="button" class="btn btn-success" data-toggle="collapse" data-target=".navbar-ex1-collapse">Click me</button>
</div>
<div class="collapse navbar-ex1-collapse">
<ul class="list-group">
<li class="list-group-item">Enlace #1
<li class="list-group-item">Enlace #2
</ul>
</div>
</nav>
<div class="content">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>q</p>
<p>w</p>
<p>e</p>
<p>r</p>
<p>t</p>
<p>y</p>
<p>u</p>
<p>i</p>
<p>o</p>
<p>p</p>
<p>a</p>
<p>s</p>
<p>d</p>
<p>f</p>
<p>g</p>
<p>h</p>
<p>j</p>
<p>k</p>
<p>l</p>
<p>z</p>
<p>x</p>
</div>
The idea is when you click the button to expand the header(or whatever you use for that) setting padding-top on content equal to the height of you header expanded. You even can compute the height of navbar in js using .outerheight() and setting that height as padding-top of .content to make it more accuracy, the use of important in snippet is only because the bootstrap's styles overwrite mines but in general that is not needed.
I hope you get the idea so you may use it.
I'm trying to make a simple page where there are several rows of images, each one with a horizontal scrolling (using Nicescroll 3).
Using the mouse, when the horizontal scrolling of the row is finished, the mouse wheel has no function. What I wanted to do is that the page continued scrolling vertically after the horizontal scrolling has finished.
My code:
HTML:
<div id="main-content">
<div class="row">
<div class="square-container">
<div class="square"></div>
</div>
<!-- several other square-container divs -->
<div class="square-container">
<div class="square"></div>
</div>
</div>
<div class="row">
<!-- several other square-container divs -->
</div>
<!-- several other rows -->
</div>
</div>
CSS:
#main-content{
min-height: 100%;
height: auto;
}
#main-content > .row {
overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap;
}
.square-container {
float:none;
display:inline-block;
margin: 20px 30px 5px 30px;
}
.square{
height: 100px;
width: 100px;
border: 1px solid black;
}
Here's my Fiddle
Thanks for feedback.
Added to TODO list.
Issue opened -> https://github.com/inuyaksa/jquery.nicescroll/issues/451
I'm trying to build this web app thing (it'll eventually a stage/props/que management system for my community theatre group) and I've encountered quite a difficult problem. Apologies if this question has been answered before, I certainly couldn't find anything relating to this specific problem.
Here's the last two I've tried. In theory they have the best chance of working but... they aren't working.
questions/2758651/how-to-change-height-div-on-window-resize
questions/16837525/resize-div-height-with-jquery
So what I'm doing is creating a page that resizes to fit the current screen real-estate the problem I'm having is the central scrolling div and the 'sidebar's' scrolling div only scroll when they have a fixed height. Basically if I use a percentage height in my CSS it becomes the size of it's contents regardless of how overflow: scroll; is setup. I'm thinking it's got something to do with the float:left; definition on all col-*-* elements. The thing I can't fathom is that when I set the div a fixed height (say height:300px;) everything works. Hence why I'm trying JS/JQ solutions but apparently even $(window).height() is getting the document height in Chrome and not the 'viewport' height.
Here's the page as it stands with a fixed height. http://azarel-howard.me/stage-management/props-manager/ I've tried a handful of JS solutions but... they don't seem to run. Or they run into the same issues.
edit: code as requested;
<body>
<!-- Scroll block - this works with fixed height. However I NEED variable height and also WP8 IE support which just flat out doesn't work as I've discovered. (scrolling-wise that is) -->
<div class="scrollable col-lg-9" style="height: 650px; overflow-y: auto;">
<div class="container">
<!-- This scene block get's repeated for each scene -->
<div class="scene row">
<h4>Scene 1</h4>
<div class="container">
<!-- This script block get's repeated for each speakers block within the scene -->
<div class="script row col-lg-offset-1">
<div class="col-lg-2">
<h6>Speaker-1:</h6>
</div>
<div class="col-lg-10">
<p>Speaker's text</p>
</div>
</div>
<!-- End script block -->
</div>
</div>
<!-- End scene block -->
</div>
</div>
<div class="col-lg-3" style="height: 650px;">
<div class="container">
<!-- Scroll block - again this works with fixed height. -->
<div class="row" style="height: 430px; overflow-y: auto; overflow-x: hidden;">
<h5>Stage Props</h5>
<div class="row">
<div class="container">
<div class="col-lg-12">
<h6>Scene 1</h6>
</div>
</div>
</div>
</div>
<!-- Everything from here down is irrelevant for the purpose of figuring out how to have a variable height scrolling div but the presence of these elements will effect to height variables for this specific scrolling div. -->
<div class="row">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="container">
<div class="contributor">
<img class="image-circle" style="width:100%" src="/stage-management/photo%20log/WP_20131121_004.jpg" alt>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="contributor">
<img class="image-circle" style="width:100%" src="/stage-management/photo%20log/WP_20131121_005.jpg" alt>
</div>
</div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<div class="row">
<button type="button" class="btn btn-default" style="width:49%;">Current Que</button>
<button type="button" class="btn btn-default" style="width:49%;">Next Que</button>
</div>
</div>
</div>
</body>
And the CSS for reference: these excerpts are extracted directly from bootstrap.css
.col-lg-9,
.col-lg-3 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-lg-9 {
width: 75%;
}
.col-lg-3 {
width: 25%;
}
#media (min-width: 768px) {
.container {
max-width: 750px;
}
}
#media (min-width: 992px) {
.container {
max-width: 970px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1170px;
}
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.row:before,
.row:after {
display: table;
content: " ";
}
.row:after {
clear: both;
}
.row:before,
.row:after {
display: table;
content: " ";
}
.row:after {
clear: both;
}
Ok... I just found this which apparently should work I'm trying it now.
HTML5 Canvas 100% Width Height of Viewport?
Ok at long last I've discovered the secret to using height percentages! I'm going to answer my own question (even though I think it's somewhat bad form but anyway).
With percentages of width everything works as expected. If a relative width is defined it is based off of the parent elements width, which unless explicitly assigned, is the size forced on it by the other content inside of it (say a picture that's 200px wide).
Now it doesn't work this way with height. I decided to go back to basics with this one and concentrated on background-color div's to isolate the factor. After a bit I decided a simple google search was in order, and very quickly discovered this forum question from '08 http://forums.htmlhelp.com/index.php?showtopic=7543 and there you go.
In order to use percentage height the height of the parent element MUST be EXPLICITLY defined from the opening HTML tag all the way down to the element where it counts. With the exception of parent elements that have explicit px heights defined.
So for those of us wanting to make 'fullscreen' apps (ie those that are contained within the dimensions of the browser viewport) we need to include the following CSS code.
html, body {
height: 100%;
}
or in my case the div row elements directly under the body also need this applied so
html, body, body > div.row {
height: 100%;
}
and that will make all the difference.
Just remember that from this level down you will still need to include in-line style statements for each and every element that needs to be percentage scaled.
Assuming your HTML is something along the lines of:
<div class="sidebar">
<!-- sidebar content -->
</div>
<div class="main-content">
<!-- main content -->
</div>
You can achieve an independently scrolling sidebar with the following style declarations:
.main-content {
position: relative;
width: 75%;
}
.sidebar {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 25%;
overflow-y: scroll;
}
Here's a jsfiddle example http://jsfiddle.net/7txqj/