The documentation of the bootstrap 3 container class states that 'due to padding and more, neither container is nestable".
But then, in the official examples, take this, a demo of a simple navbar, we see something like:
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
where a container-fluid is clearly nested inside a a container.
My understanding of the "neither container is nestable" sentence is that we should have just one container in a page, or on the other hand we can have multiple if they are not nested one within the other.
Seeing the examples it doesn't seem to be the case, then what does it mean that constraint? I've read also this question and some others but they don't talk about the nesting thing.
This has been brought up as in issue on the Bootstrap repo:
https://github.com/twbs/bootstrap/issues/15512
I'm not sure if the doc will be updated accordingly, but as you'll see in the issue it looks like it's ok to put a container-fluid inside a container.
Related
I use the slick carousel on a regular basis and today I am experiencing an issue thats making me feel like I'm going insane.
When I apply the .slick() method to the parent element all the slides appear to the left of the page, the page extends horizontially by a lot and then when you attempt to slide it just jumps all over the place.
I have created a codepen to show the issue I'm having which you can see here https://codepen.io/harrietmcmahon/pen/pLWMbX?editors=1111
I've got
<div class="js--sc">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Applying .slick to js--sc
I've tried this with additional settings and without, I even tried just copying another codepen where it works, and it broke on that too!
Would really appreciate if someone could point out what I'm missing, or if anyone has experienced this issue?
Thank you
You just need to include the Slick CSS
https://cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.css
https://cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick-theme.css
I am working on a legacy application that is being rewritten using Aurelia, the application has a bunch of static html in a tblHelp that needs to be displayed. I am using innerhtml.bind on a div in my view to databind the stored static HTML into the view. Each record is essentially a document complete with a full table of contents that links to other divs within the document (Bookmarks).
Something like:
<div id="toc">
<h1>Table of Contents</h1>
<ul>
<li>Section 1<li>
<li>Section 2<li>
</ul>
</div>
<div id="section1">
<h2>Section 1</h2>
<p>Paragraph Text...</p>
<p>Back to Table of Contents</p>
</div>
<div id="section2">
<h2>Section 2</h2>
<p>Paragraph Text...</p>
<p>Back to Table of Contents</p>
</div>
When I display the resulting page in my Aurelia view and click on the links, rather than moving to the proper Div on the current page, it seems to be attempting to route to an unknown route and ends up returning to the home page (that is my unknown route behavior). How do I make the Aurelia Router know that I am just moving around the same page and do not require it to route to another page?
I think you need to change your <div id= to <a id= which is the correct syntax for anchors. Hopefully Aurelia will recognize them as legitimate anchors when formatted correctly.
Also, since an anchor tag shouldn't wrap the whole content, you'll just open and close it at the top of the div. You can even leave the divs there but should not duplicate the id.
Update:
That being said, I created a GistRun that actually demonstrates that Aurelia should be able to handle the <div id= anchor targets. So, I'm not exactly sure why you're having problems.
Maybe this GistRun or the more standard <a id= approach will help you.
I am wondering if it is necessary to put navbar content into the container/container-fluid, for example:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid"> etc...
If that is a must then there is no proper way to place navbar within some column elements(col-*) since containers can not be nested.
Can anyone confirm this?
Thank you very much.
Containers can be nested, it's just not recommended. But if the layout you're going for requires putting the navbar within some .cols, just try it! Then come back asking for help if it's not working the way you want...
In a document, there are multiple <nav> and <aside> elements. Should I add role="navigation" on all <nav>s and role="complementary" on all <aside>s?
In other words, is it more beneficial or more redundant that there are multiple <nav role="navigation">...</nav>s and multiple <aside role="complementary">...</aside>s in a document?
According to the HTML5 spec, role="navigation" is implicit to the <nav> element, and role="complementary" is implicit to the <aside> element. As such, you do not need to add them according to the spec.
The question is how many ATs actually honor the spec, so if you want to play it safe, you can add those roles, it won't hurt.
Also rememebr that some <aside> elements should however be marked as role=note.
Another thing to consider is that the HTML5 spec allows multiple seperate <ul>s to be grouped under a <nav>. I am uncertain if this implies that role="navigation" is enough on just the <nav> or that each <ul> should be marked as such. I am unable to find any information on this.
I'm working on a Meteor app that gets data from Facebook & I would like to use jquery-layout for presentation. I suspected that there might be some "subtleties" when trying to use jquery to modify HTML in reactive templates, so I set up a relatively simple test case that goes something like this (paraphrased for brevity)...
<body>
{{> mainTemplate}}
</body>
<template name="mainTemplate">
{{#with userInfo}}
{{> partialNorth}}
{{> partialWest}}
{{> partialCenter}}
{{> partialEast}}
{{/with}}
{{layItOut}}
</template>
Template.mainTemplate.userInfo returns contents of a Session variable that starts with a default value and asynchronously get updated with info from Facebook.
Template.mainTemplate.layItOut sets up a call to Meteor.defer with a callback fcn that actually executes the 5 lines of jquery-layout code.
And that seems to work pretty well...
the initial display is as expected/intended (although there's a brief period where the page is not laid out)
any updates to the reactive context cause re-execution of the layout (again, w/brief-but-visible re-layout)
So, why am I whining? Mostly I would like to find a cleaner approach that does away with the noticeable re-layout activity.
I could make the reactive contexts more granular, but I'm not sure that this would really help.
Alternatively, I suppose I could experiment with directly controlling rendering (e.g., via Meteor.ui.render() , but that sounds like a lot of work ;-)
I think what I'd really like is either
a) a way to hook into Meteor render events
or better still
b) a cleaner way to connect query-layout to templates
Thoughts?
So I managed to educate myself enough to answer my own question in case anyone else finds it useful. Bottom line is that I was wrong on several levels; making the reactive contexts more granular is the answer (or at least an answer).
In the example I gave, I made the whole page reactive by placing all of the rendering within the #each construct. What I now do is try to make the reactive contexts as small as possible so that only a (relatively) small part of the page is re-rendered on any reactive change and all of the reactive elements are contained below (or way below) the level of the jquery ui elements.
I.e., something like this:
<body>
{{> mainTemplate}}
</body>
<template name="mainTemplate">
{{#with userInfo}}
{{> partialNorth}}
{{> partialWest}}
...
{{/with}}
{{layItOut}}
</template>
<template name="partialNorth">
<div class="ui-layout-north"> <-- definition for jquery-layout north panel
<h1>This is the north pane</h1>
<p>The user data go next:</p><br />
{{> templateUserData}}
</div>
</template>
<template name="templateUserData">
<div>
{{#with theUserData}} <-- Assumes a helper function 'theUserData' for this template
<p>First name: {{first_name}}</p>
<p>Last name: {{last_name}}</p>
...
{{/with}}
</div>
</template>
Once you have the reactive elements below the jquery ui elements (I have tried it with panels, tabs, accordions, buttons and pop-ups so far) the whole thing works just like it said it would in the shiny brochure! ;-)