I am wondering how to override styles of shell view being injected in Durandal inside div with id="applicationHost" ... I am trying to use common Bootstrap template (sticky footer with fixed navbar) and it works as standalone but as soon as I use it within shell.html the "wrapper" looses its auto height...
Here is my shell.html
<div>
<div id="wrapper">
<!-- ko compose: {view: 'nav'} -->
<!-- /ko-->
<div id="content" class="container-fluid">
<!--ko compose: {
model: router.activeItem, //wiring the router
afterCompose: router.afterCompose, //wiring the router
transition:'entrance', //use the 'entrance' transition when switching views
cacheViews:true //telling composition to keep views in the dom, and reuse them (only a good idea with singleton view models)
}--><!--/ko-->
</div>
<div id="push"></div>
</div>
<footer id="footer">
<div class="container-fluid">
<div class="row-fluid">
<div class="span6"><p class="muted">© ABC Company Inc. 2013. All rights reserved.</p></div>
<div class="span6 "><p class="muted pull-right">v0.0.1-debug</p></div>
</div>
</div>
</footer>
</div>
the nav sub-view just has standard <nav id="mainnav" class="navbar navbar-fixed-top"> and the styles are the same as on Bootstrap example page...
When I examine styles via Firebug I can clearly see that wrapper div has lost its full height...Driving me nuts! :)
I fixed this by adding the following style to my main html page after the styles necessary to get the sticky footer to work
/*durandal fixes*/
#applicationHost, #applicationHost > div
{
height: 100%;
}
The first selector takes care of the applicationHost div in the main html page and the second the one inserted by durandal (it has a class of durandal-wrapper, so you could make the selector more specific if you wanted). As you have an extra div in your shell.html file you may need the following:
/*durandal fixes*/
#applicationHost, #applicationHost > div, #applicationHost > div > div
{
height: 100%;
}
Related
I am using bootstrap visibility classes as follows on my webpage:
<div class="hidden-sm">
<div id="lrg-div-A"></div>
</div>
<div class="hidden-lrg">
<div id="lrg-div-B"></div>
</div>
<div class="hidden-md">
<div id="lrg-div-C"></div>
</div>
The visibility classes work and are hidden in the viewport where required. But, when I look at the markup in the browser's developer tools, I still see the markup for the hidden divs. For example, on large screens, "lrg-div-B" is not seen in the viewport, but the markup is still seen in the HTML tab. Is there anyway to remove it from the markup as well, similar to what 'dispaly: none' does?
display: none doesn't remove it from the markup, but it does remove it from the document flow so that it doesn't take up space. You can remove a node with javascript using remove() or removeChild() but mind you can't get it back again (unless you store it and re-append it later).
console.log('Hidden node: ', document.querySelector('.hidden-sm'));
//Hidden node: <div class="hidden-sm">…</div>
console.log('Before remove(): ', document.getElementById('lrg-div-B'));
// Before remove(): <div id="lrg-div-B">large B</div>
document.getElementById('lrg-div-B').remove();
console.log('Removed node: ', document.getElementById('lrg-div-B'));
// Removed node: null
.hidden-sm {
display: none;
}
<div class="hidden-sm"> <!-- hidden but still in markup -->
<div id="lrg-div-A">large A</div>
</div>
<div class="hidden-lrg">
<div id="lrg-div-B">large B</div> <!-- removed from markup -->
</div>
<div class="hidden-md">
<div id="lrg-div-C">large C</div>
</div>
It is not supposed to remove the elements from markup. CSS handles how DOM looks not its structure. You need to use a bit of Javascript if you actually want to remove the DOM elements.
i use affix bootstrap but don't work
i like set nav fix right and create content div with 12 grid.(create fixed sidebar)
code :
<section class="container-fluid">
<div class="affix navbar-side">
nav
</div>
<div class="col-md-8">
content
</div>
<section>
css :
.navbar-side{
width: 400px;
}
when content full overflow data go to under nav sider i don't like.
How fixed this problem ?
https://jsfiddle.net/8f8c8wur/
I read in this, the affix is style that you must create by your own and put it in the data-spy, not in class..
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
Hope this help you..
I have a two columns layout like this:
<div class="row">
<div class="col-xs-8 content">
</div>
<div class="col-xs-4">
</div>
</div>
If I set the position:sticky to the sidebar column, I get the sticky behaviour of the sidebar: https://codepen.io/marcanuy/pen/YWYZEp
CSS:
.sticky {
position: sticky;
top: 10px;
}
HTML:
<div class="row">
<div class="col-xs-8 content">
</div>
<div class="col-xs-4 sticky">
</div>
</div>
But when I set the sticky property only to the menu that is located in the sidebar, so the related articles section scrolls normally and gets the sticky behaviour with the menu div, it doesn't work:
<div class="row">
<div class="col-xs-8 content">
</div>
<div class="col-xs-4">
<div class="menu sticky">
</div>
</div>
</div>
This is the screencast of the first example scrolling the whole sidebar with a sticky behaviour, and then changing the sticky property to the menu that doesn't work:
Bootstrap 4 recommends the sticky property as the dropped support for the Affix jQuery plugin:
Dropped the Affix jQuery plugin. We recommend using a position: sticky polyfill instead.
I have tested it in:
Firefox 47.0 with css.sticky.enabled=“true” under about:config
Chrome 50.0.2661.94 (64-bit) with experimental Web Platform features enabled in chrome://flags
(This is not a duplicate of How to make a sticky sidebar in Bootstrap? because that one is using BS affix)
In the stable Bootstrap 4.0.0 release, this is done using the sticky-top class...
Demo
<div class="container">
<nav class="navbar navbar-light bg-light navbar-expand">
<a class="navbar-brand" href="#">Header</a>
...
</nav>
<div class="row">
<div class="col-8 content">
Content
</div>
<div class="col-4">
<div class="sticky-top">
<h4>Sticky menu</h4>
...
</div>
</div>
</div>
<div class="footer">
...
</div>
</div>
This works even in the height of the header/navbar, content, and footer are dynamic/unknown.
https://codeply.com/go/QJogUAHIyg
I solved enabling flexbox. After raising an issue in Bootstrap's Github repository I got an answer by a Bootstrap member:
The .col-xs-4 isn't as tall as the .col-xs-8, so there's basically no
space for the Menu to "float" within when the stickiness kicks in.
Make the .col-xs-4 taller and things work fine:
https://codepen.io/anon/pen/OXzoNJ If you enable the Flexbox version
of our grid system (via $enable-flex: true;), you get automatic
equal-height columns for free, which comes in handy in your case.
Polyfill explanation.
You need to include the JS polyfill in order to use it. The polyfills recommended by the link on the Bootstrap page are
https://github.com/wilddeer/stickyfill
https://github.com/filamentgroup/fixed-sticky
Here is an updated codepen: https://codepen.io/anon/pen/zBpNRk
I included the required polyfill (I used stickyfill) and called it with
var stickyElements = document.getElementsByClassName('sticky');
for (var i = stickyElements.length - 1; i >= 0; i--) {
Stickyfill.add(stickyElements[i]);
}
The library suggested you use this for your css
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
.sticky:before,
.sticky:after {
content: '';
display: table;
}
and finally you had the div order mixed up. You need to put the div with the sticky class outside of an entire row so I filled up the rest of the row with another <div class="col-xs-6"></div> that is empty.
The answer by #wrldbt works up to bootstrap 4 alpha 5, but in alpha 6 the -xs infix has been dropped and the grid have been rewritten.
I put something together, a bit cleaner, working with current version of bootstrap & also included a sticky footer using flexbox.
https://codepen.io/cornex/pen/MJOOeb
Within a polymer element I am trying to build a simple multi-column layout with lost-grid to render a list of items using dom-repeat. It looks like this:
HTML
<div class="grid">
<template is="dom-repeat" items="{{data}}">
<div class="grid__col">Example Content</div>
</template>
</div>
CSS
.grid {
lost-utility: clearfix;
lost-center: 100%;
position: relative;
}
.grid__col {
lost-column: 1/2 2 0px;
}
For example if the data array assigned to dom-repeat has 4 items, the following HTML is rendered:
<div class="grid">
<div class="grid__col">Example Content</div>
<div class="grid__col">Example Content</div>
<div class="grid__col">Example Content</div>
<div class="grid__col">Example Content</div>
</div>
Instead of displaying the columns at 50% width, the layout breaks and they are stacked on top of each other. If I remove the dom-repeat and list the 4 columns manually, it works. In both cases the code is the same in the end, so I'm guessing the rendering of the template somehow messes with the total width the columns can take up.
Another thing to note is that when using the exact same code inside a dom-bind template directly in the body of the page (outside of a polymer element but using dom-repeat), it works.
I just quickly read about lost. If you must use it I can't give you a specific answer, but if you only have a couple of divs that you are aligning, Polymers layout manager seems sufficient.
In a similar situation I was using the wrap layout and the calc() CSS operator (which seems to be in use behind the scenes with lost anyway).
<div class='horizontal layout wrap'>
Lots of divs here with template repeat
</div>
This is a rudimentary example and would need to be customized of course.
Hope this helps.
I suspect this may be due to shadow DOM. Are you using shadow DOM or are you using shady DOM? If you are using shadow DOM, you will need to add the CSS inside of your element's dom-module in order for it to take effect.
In other words, you should have something like this:
<dom-module id="an-element-with-grid">
<link rel="import" type="css" href="an-element-with-grid.css"> <!-- This will be the home of your lost CSS -->
<template>
<div class="grid">
<template is="dom-repeat" items="{{data}}">
<div class="grid__col">Example Content</div>
</template>
</div>
</template>
</dom-module>
This is per the shadow DOM spec. Nodes inside an element's shadow DOM are hidden from outside scopes, to prevent outside styles from stepping on your element's internal styles.
I am using Zurb Foundation 5 to build a site. My site has a navigation panel against the left side of the screen. When open, I want the nav area to take up 3 columns. The actual content will take up the remaining space. Here is the HTML I have thus far:
<body>
<div style="width:100%; max-width:100%; height:100%;">
<div id="navDiv" class="large-3 columns" style="background-color:#2D2D2D;height:100%;">
<!-- Nav Items Go Here -->
</div>
<div class="large-9 columns">
<!-- Main Content Goes Here -->
</div>
</div>
</body>
Each nav item has an icon and some text. I need to be able to collapse the navDiv in a way that it shrinks down so that only the icons are showing. The text goes away. At the same time, I need the main content area to grow to take up the space that was used by the nav area. I cannot figure out how to do this in the realm of zurb. From what I can tell, the grid is not dynamic. Is it possible to do what I'm trying with a grid? If so, how?
THank you!
If you want to use Foundation (with jQuery dependency) and no other add-ons, you can use a jQuery event handler to toggle the classes used by Foundation. It feels like a hack, but it works.
HTML
<body>
<button>Toggle sidebar</button>
<div class="row">
<div id="navDiv" class="small-2 medium-1 columns">
<img src="http://dummyimage.com/48"><span>Item 1</span>
</div>
<div id="content" class="small-10 medium-11 columns">
<!-- Content goes here -->
</div>
</div>
</body>
CSS
.small-2 span {
/* Hide text when sidebar is small */
display: none;
}
JavaScript + jQuery
$(function() {
$('button').click(function() {
// Resize sidebar
var navDiv = $('#navDiv');
navDiv.toggleClass('small-3');
navDiv.toggleClass('small-2');
navDiv.toggleClass('medium-2');
navDiv.toggleClass('medium-1');
// Resize content
var content = $('#content');
content.toggleClass('small-9');
content.toggleClass('small-10');
content.toggleClass('medium-10');
content.toggleClass('medium-11');
});
});
Demo on Plunker