I have followed your install instructions to the letter, including setting up my angular module files correctly.
I have cut and pasted code from your demo into my app.component.html file as below
<ngb-tabset>
<ngb-tab title="Simple">
<ng-template ngbTabContent>
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum
iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
</ng-template>
</ngb-tab>
<ngb-tab>
<ng-template ngbTabTitle><b>Fancy</b> title</ng-template>
<ng-template ngbTabContent>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
<p>Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table
craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl
cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia
yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean
shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero
sint qui sapiente accusamus tattooed echo park.</p>
</ng-template>
</ngb-tab>
<ngb-tab title="Disabled" [disabled]="true">
<ng-template ngbTabContent>
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum
iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
</ng-template>
</ngb-tab>
</ngb-tabset>
however, I get this when I run up the site in localhost:
So something isnt right with the setup.
I created a brand new Angular app with angular-cli.
the angular version is 4.0.0
Thanks for your help
ng-bootstrap provides directives that you can use, but it does not include the Bootstrap CSS for styling. The instructions for getting started mention that there is a required dependency on Bootstrap CSS, and it is not explicit but implied that you must include the Bootstrap CSS in your application. This is just to clarify that there is a difference between the use of the directives and the use of the CSS for styling. You do not need to use ng-bootstrap if you will just be using Bootstrap for styling, formatting, layout, etc.
OK, I've found a hack to get it working, I have added the following line to my angular app's main css files
#import '~bootstrap/dist/css/bootstrap.min.css';
This fixes the issues, so it seems like somehow the ng-bootstrap package is failing to hookup the css somehow.
Thanks anyway for everyones help
I tripped over this too.
It's clear that ng-bootstrap is a replacement for the js which bootstrap brings in when you bring in the bootstrap css, but it's not clear how to bring in the bootstrap css without the unwanted js, or that bringing in ng-bootstrap without the associated css won't have the desired effect.
Here's what I did...
at the terminal:
npm install bootstrap#4.0.0-alpha6 --save
brings in the bootstrap 4 css (probably updated by the time you read this) along with the corresponding bootstrap js and a dependency on jquery, which you'll just have to ignore.
npm install #ng-bootstrap/ng-bootstrap --save
brings in the angular components which make use of the bs4 styles.
In angular-cli.json (you are using angular-cli aren't you?):
"styles": [
"styles.css"
],
becomes
"styles": [
"./../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
to have webpack include the bootstrap styles along with your custom styles.
Then add the imports as described in the getting started doc.
J just use url(bootstrap official website):
and it worked!
Related
I'm working through the Mozilla website's tutorial on CSS Flexbox, but I can't get the flex-wrap: wrap option to work as the tutorial describes. Instead of wrapping the row of text cells around the page, it causes them to expand into a single wide column. The tutorial only gives a screenshot of the result, so I can't check their actual code. I'd be grateful if anyone could tell me what I'm getting wrong.
Here's the full code:
html {
font-family: sans-serif;
}
body {
margin: 0;
}
header {
background: purple;
height: 100px;
}
h1 {
text-align: center;
color: white;
line-height: 100px;
margin: 0;
}
article {
padding: 10px;
margin: 10px;
background: aqua;
}
section {
display: flex;
flex-direction: row;
/* Lines I added following the tutorial */
flex-wrap: wrap;
flex: 200px;
}
article {}
<header>
<h1>Sample flexbox example</h1>
</header>
<section>
<article>
<h2>First article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed.
PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Second article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed.
PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Third article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed.
PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
<p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle
pickled man bun cornhole heirloom art party.</p>
</article>
<article>
<h2>Fourth article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed.
PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Fifth article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed.
PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Sixth article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed.
PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
<p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle
pickled man bun cornhole heirloom art party.</p>
</article>
<article>
<h2>Seventh article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed.
PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Eighth article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed.
PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Ninth article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed.
PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
<p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle
pickled man bun cornhole heirloom art party.</p>
</article>
<article>
<h2>Tenth article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed.
PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Eleventh article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed.
PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Twelfth article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed.
PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
<p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle
pickled man bun cornhole heirloom art party.</p>
</article>
</section>
Here's the expected tutorial results and what I actually get:
The code gives the same result in Chrome, Edge and the CodePen online editor. The W3C html and css validators don't give any errors.
add width to the article tag.
article {
.
.
.
.
width: 200px;
}
<article> tags are block-level elements, so if we don't assign any width separately, they will take the whole page width and the next article element will start from the next row which is why the issue is coming as shown in the screenshots above in question. Providing separate width to the article tag will allow the next article element to come beside the first article element, You can also understand this using the box model.
I'm trying to create a header (comparable to MailChimp's) but instead of if being fixed all the time, I want the header to scroll up with the page and only drop down once the user has made an upward scrolling motion.
I have this working at present by adding a class that has postion: fixed; and then applying transform: translateY(-50px); to position the header off screen. Here's the trick, when this happens, the postion: fixed; starts at what appears to be top: 0; and therefore shows itself before sliding up (I have a transition on the top to slide it up gracefully). Anyone know how I can force the header to start off canvas and then go transition to transform: translateY(0); when I queue it.
JSFiddle
If I understood your problem, this may be the solution: Fiddle
I changed plenty of lines because I think it's easier.
Gave header .fixed class in the markup and removed it from JS (because you can translate it without removing the positioning)
Inserted function to detect scroll direction:
Removed transform from fixed class since the initial value is zero
Put all together into $(window).scroll()
var scrolled;
var lastPos = 0;
var $header = $('.main-header');
var scrollDirection;
// on scroll, let the interval function know the user has scrolled
$(window).scroll(function() {
scrollDirection = getScrollDirection();
lastPos = $(this).scrollTop();
if(lastPos >= 400 && scrollDirection == "down") {
$header.addClass("hidden");
} else if(scrollDirection == "up") {
$header.removeClass("hidden");
}
});
function getScrollDirection() {
if(lastPos >= $(this).scrollTop()) {
return "up";
} else {
return "down";
}
}
.main-header {
position: absolute;
width: 100%;
left: 0;
top: 0;
height: 56px;
z-index: 2;
background: black;
-moz-transition: all 500ms;
-o-transition: all 500ms;
-webkit-transition: all 500ms;
transition: all 500ms;
}
.main-header.hidden {
-moz-transform: translateY(56px);
-ms-transform: translateY(-56px);
-webkit-transform: translateY(-56px);
transform: translateY(-56px);
position: fixed;
}
.main-header.fixed {
position: fixed;
}
div {
margin-top: 100px;
}
<body>
<header class="main-header fixed"></header>
<div class="hipsum"><p>Keytar sriracha direct trade, you probably haven't heard of them put a bird on it Odd Future farm-to-table gastropub XOXO tousled PBR hashtag viral gentrify polaroid. Paleo deep v skateboard pug polaroid readymade, tofu Pinterest pork belly crucifix Etsy Echo Park gluten-free Banksy Neutra. +1 irony YOLO gluten-free PBR Austin Brooklyn drinking vinegar. Fingerstache ethnic aesthetic, beard Schlitz XOXO pop-up wayfarers Tonx normcore cornhole tattooed you probably haven't heard of them whatever. Stumptown actually banh mi, Echo Park cornhole beard Tonx flannel Helvetica. Truffaut selfies ethnic pop-up biodiesel, stumptown master cleanse four loko freegan letterpress Thundercats hoodie fap ethical fanny pack. PBR&B Odd Future sriracha forage.</p><p>Polaroid Brooklyn Odd Future, photo booth Kickstarter bicycle rights ethnic leggings fanny pack viral tattooed 3 wolf moon bitters hoodie. Swag tousled Godard messenger bag. Organic irony gentrify, High Life synth typewriter vegan +1 freegan swag farm-to-table tote bag. Whatever wayfarers raw denim, fashion axe mumblecore narwhal drinking vinegar pour-over selvage PBR chillwave locavore salvia distillery. Kogi hoodie disrupt Godard. PBR&B pork belly literally, ennui Cosby sweater paleo dreamcatcher Neutra kitsch hella YOLO. Brunch jean shorts chia ethical viral twee.</p><p>Banjo distillery Vice, Tonx selfies leggings narwhal tote bag ethnic chambray mustache gluten-free. Wes Anderson wolf umami +1. Williamsburg cliche occupy four loko. Vinyl Shoreditch 90's bicycle rights photo booth, vegan asymmetrical Brooklyn normcore actually locavore. Drinking vinegar selvage cray Schlitz, ethical selfies 3 wolf moon Vice fashion axe vegan VHS bitters plaid. Intelligentsia McSweeney's retro, squid tousled actually 8-bit. Intelligentsia gentrify hella farm-to-table Pitchfork asymmetrical.</p><p>Fanny pack lomo Cosby sweater iPhone kogi wolf, selvage 3 wolf moon 8-bit banh mi tote bag chillwave Tonx try-hard. Seitan blog fixie put a bird on it tattooed, forage chambray chillwave scenester keytar umami street art +1. Craft beer before they sold out direct trade chambray biodiesel. Typewriter Brooklyn leggings, tattooed PBR fingerstache chambray cred gastropub photo booth roof party synth distillery banjo tousled. Pug retro swag normcore Schlitz, biodiesel 90's craft beer selfies lomo. Portland stumptown beard master cleanse normcore. Butcher four loko Echo Park kale chips church-key fanny pack.</p><p>Marfa fanny pack flannel, cliche lo-fi YOLO kitsch. Pinterest mumblecore next level banh mi try-hard mlkshk, irony before they sold out chia fap lo-fi semiotics direct trade Wes Anderson. Hella craft beer disrupt, pug +1 sustainable paleo locavore meggings. Banh mi selvage freegan bespoke, direct trade Bushwick skateboard roof party farm-to-table typewriter McSweeney's mustache. Slow-carb bespoke Neutra literally Carles authentic XOXO. Ethical 90's organic wolf skateboard post-ironic try-hard Pitchfork, Neutra locavore XOXO banh mi lomo roof party swag. Kickstarter tattooed small batch, wayfarers beard Vice McSweeney's put a bird on it post-ironic squid viral ethical Cosby sweater.</p><p>Single-origin coffee swag biodiesel brunch. Blog Austin whatever drinking vinegar mustache, twee Bushwick gentrify seitan skateboard polaroid Pinterest disrupt next level 8-bit. Portland biodiesel selvage trust fund bicycle rights. Photo booth fingerstache bitters, lomo scenester typewriter normcore Austin. Bushwick Intelligentsia iPhone, Thundercats 8-bit fingerstache Neutra sustainable Echo Park cardigan locavore Odd Future drinking vinegar. Paleo street art next level, twee fap +1 organic post-ironic beard banjo blog dreamcatcher. Master cleanse salvia Helvetica normcore bespoke sartorial, McSweeney's cliche authentic street art.</p><p>XOXO flannel chia, ennui Tumblr Truffaut Marfa 90's artisan mustache fashion axe tousled. Meh fanny pack Echo Park you probably haven't heard of them art party keytar, blog street art gastropub chia. Typewriter cliche flannel beard banjo, fanny pack gluten-free cardigan wayfarers Tumblr four loko scenester American Apparel. Aesthetic Wes Anderson sustainable flexitarian, Thundercats retro scenester art party chillwave. Drinking vinegar VHS trust fund, readymade normcore XOXO irony fingerstache YOLO banjo sriracha jean shorts Odd Future PBR&B chia. Roof party authentic vegan put a bird on it, Williamsburg Schlitz keytar seitan deep v letterpress sartorial Pitchfork Tonx. Selvage semiotics 3 wolf moon Portland VHS.</p><p>Chillwave beard sriracha trust fund, Schlitz authentic flannel asymmetrical mumblecore ethnic stumptown. Austin cliche synth yr, XOXO next level before they sold out High Life 8-bit readymade iPhone Thundercats typewriter meh cardigan. Authentic ennui Banksy plaid. Fap Neutra banh mi skateboard, Banksy blog meh Pitchfork photo booth Tumblr four loko. Slow-carb roof party ethnic Banksy PBR meggings. Mlkshk semiotics actually Helvetica. Aesthetic direct trade four loko 90's dreamcatcher forage, pug Pinterest pickled cardigan put a bird on it wayfarers distillery Tumblr.</p></div>
</body>
If you have any questions, just ask.
I've just setup Bootstrap 3.0 and following a tutorial by William Helfi:
William Helfi Bootstrap Tutorial
The issue I'm having is that my columns of class 'col-md-6 are stacking on top of each other instead of being located alongside one another in the same row. This is despite me copying and pasting the exact code from the tutorial. 6+6=12 so I expect them to fit on one row but they do not. It's really frustrating. What am I missing? I've tried two tutorials, exactly, and I get the same result.
Screenshot of issue
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-6">
<p>Asymmetrical YOLO banjo lomo fanny pack, shoreditch flexitarian enter code heredreamcatcher ethnic kitsch sriracha nisi sustainable swag. Cliche 90's farm-to-table master cleanse Pinterest jean shorts. Cillum raw denim aesthetic sunt.</p>
<p>Aliqua photo booth literally veniam minim leggings, est craft beer `enter code here`banjo intelligentsia Truffaut officia. r.</p>
</div>
<div class="col-md-6">
<p>Consectetur art party Tonx culpa semiotics.</p>
<p>Wayfarers selvage YOLO, commodo assumenda eu est bespoke mlkshk.</p>
</div>
</div>
</div>
</body>
This example works for me. Make sure you have the bootstrap stylesheet correctly referenced.
http://www.bootply.com/122865
I'm using PIE to achieve some cross-browser CSS3 effects (gradient backgrounds, rounded corners, drop shadows, etc), but it's messing up my jquery accordion something awful.
Basically when PIE inserts its css3-container elements into the DOM, the jquery accordion code can't recover, because it's expecting the accordion container to be filled exclusively with an alternating list of H3 and DIV elements.
Has anyone found a way to make these two tools play nice together?
Instead of CSS PIE use pie.js the simple benifit that pie.js gives you is that you decide when to apply pie classes you can find a nice documentation on how to use pie.js here . Simply by the javascript way the pie will be applied after the code is executed by jQuery hence it should NOT mess with the markup. [though i am going to test it ]
And your code with pie should look something like
$('.accordion').accordion({
parameter:value;
});
$('.pieElement').each(function(){
PIE.attach(this);
});
Another method of doing this is by using gutters , while programming mobile webapps because of webkit i found out how useful gutters can be especially with polyfills .
Using gutters your code can look like
<div id="accordion">
<h3><span class="gutter">Section 2</span></h3>
<div>
<div class="gutter">
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
</div>
</div>
then apply your PIE CSS3 on gutters , from what i have read about PIE it seems that it applies a VML markup inside the parent of the element and if so using gutters the style will be applied without changing your markup.
When I include \usepackage{Sweave} in the preamble of a beamer presentation, beamer ignores changes to font, e.g., \usepackage{helvet}.
Here is a minimal example:
\documentclass[professionalfonts]{beamer}
\usepackage[T1]{fontenc}
\usepackage{helvet}
\usepackage{Sweave}
\begin{document}
\begin{frame}
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
\end{frame}
\end{document}
The text is set in computer modern, rather than helvetica. If you comment out \usepackage{Sweave}, then the text is set in helvetica.
Thus my question: Is there a way to change fonts in beamer presentations that include Sweave content?
I realize that my example here does not include any actual, "Sweable" R code, but it seems to not matter, because the unwanted font-switching behavior appears to result from Sweave.sty. My bigger goal is to use pgfSweave with beamer, but I'm having the same problem there. I think I have tracked it down to \usepackage{Sweave}.
From the R-help mailing list, Roger Peng suggests
\usepackage[noae]{Sweave}
See http://tolstoy.newcastle.edu.au/R/e2/help/06/11/4803.html
Also see http://www.theresearchkitchen.com/blog/archives/118
Shot in the dark, here, but do you get the same result if you put \usepackage{helvet} after \usepackage{Sweave}? Sometimes order of package declarations matters in LaTeX.
Also, you may find a more knowledgeable audience at the TeX-LaTeX Stack Exchange.