So I am using Bootstrap to create my collapsable elements. I am also using a range selector cdn, and I'm thinking there might be some styles from the BS CSS, specifically to the collapse elements, that are causing the error in UI.
When I place the range selector outside of the collapse element, it looks and works perfectly.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!--Slider documentation: https://maxshuty.github.io/accessible-web-components/-->
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div id="container">
<div>
<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#power-range">Power</button>
</div>
<div id="power-range" class="collapse" data-bs-parent="#container">
</div>
<range-selector min-range="0" max-range="15" inputs-for-labels />
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/maxshuty/accessible-web-components#latest/dist/simpleRange.min.js"></script>
</body>
</html>
But when I try to put it inside the collapse element, it throws the slider off the page.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!--Slider documentation: https://maxshuty.github.io/accessible-web-components/-->
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div id="container">
<div>
<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#power-range">Power</button>
</div>
<div id="power-range" class="collapse" data-bs-parent="#container">
<range-selector min-range="0" max-range="15" inputs-for-labels />
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/maxshuty/accessible-web-components#latest/dist/simpleRange.min.js"></script>
</body>
</html>
I can't seem to pinpoint where its occuring.
Will work with 2 minor modifications
The range slider initializes itself when the page loads and calculates it's size.
When you enclose the slider in a hidden element, like a Bootstrap collapse, it can't calculate the size correctly. And that's why it looks messed up.
There are a couple of ways we could fix this problem. For example, we could call the slider's reset method to force it to resize correctly. Yet, the simplest solution is to show the collapse on page load, allow the slider to initialize, and then close the collapse. And all this happens without the user noticing anything.
In the markup we add the show invisible class:
<div id="power-range" class="collapse show invisible" data-bs-parent="#container">
And then in a script tag at the end of the page (or a DOMContentLoaded event handler) we remove show invisible class.
<script>
document.querySelector(".show.invisible").classList.remove("show", "invisible");
</script>
The selected answer
The selected answer "fixes" the problem by breaking the Bootstrap collapse control. It doesn't work like OP's original code and has some visible UI problems after the page loads.
Try it
Run the code snippet to understand how it works.
// hide the collapse after range control has initialized
document.addEventListener("DOMContentLoaded", function() {
document.querySelector(".show.invisible").classList.remove("show", "invisible");
});
<div id="container" class="mb-2 p-2 border">
<div>
<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#power-range">Power</button>
</div>
<div id="power-range" class="collapse show invisible" data-bs-parent="#container">
<range-selector min-range="0" max-range="15" inputs-for-labels />
</div>
</div>
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/maxshuty/accessible-web-components#latest/dist/simpleRange.min.js"></script>
I fixed the code by defining a custom class, You are using Bootstrap 5.1.0 where 5.1.3 is the latest so I have used it although it works perfectly on both.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapse" role="button" aria-expanded="false" aria-controls="collapse">
Link with href
</a>
</p>
<div id="collapse">
<div class="card card-body">
<range-selector min-range="0" max-range="1000" />
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-->
<!-- Option 2: Separate Popper and Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/maxshuty/accessible-web-components#latest/dist/simpleRange.min.js"></script>
</body>
</html>
Related
I am a beginner in Bootstrap and I'm following bootstrap documentation. Still, my code is not working. My folder contains only an index.html file.
Visual Studio Code screenshot.
<!doctype HTML>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRe3js3W69CrMinNGtLdWyYrnnKzHR26vu4tDT5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>WeGo</title>
</head>
<body>
<div class="container">
<!-- This part is not working. The bootstrap styling or classes are not working -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">WeGo</a>
</nav>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEQcxuUJwunvQgZnSQpGTJeEuqjoHcLiYk1xMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</body>
</html>
You had problems with the integrity attribute, and the files you were trying to use were blocked, when you use cdn links always make sure to use the liks provide in the official source bootstrap website or bootstrapcdn
<!doctype HTML>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>WeGo</title>
</head>
<body>
<div class="container">
<!-- This part is not working. The bootstrap styling or classes are not working -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">WeGo</a>
</nav>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
I'm really new to javascript and jquery. I'm trying to open this modal when the page loads but it's not working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My PopUp</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
</head>
<body>
<!-- Modal HTML embedded directly into document -->
<div id="ex1" class="modal">
<p>Thanks for clicking. That felt good.</p>
Close
</div>
<!-- Link to open the modal -->
<p>Open Modal</p>
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
</body>
</html>
Also in the instructions says that I can add a fade but when I put the script nothing happens. This is the script for fade transitions.
$("#fade").modal({
fadeDuration: 100
});
Thank you.
Guide: https://jquerymodal.com/
You need to add $("#ex1").modal({ fadeDuration: 100 }); where #ex1 is the id selector of your model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My PopUp</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
</head>
<body>
<!-- Modal HTML embedded directly into document -->
<div id="ex1" class="modal">
<p>Thanks for clicking. That felt good.</p>
Close
</div>
<!-- Link to open the modal -->
<p>Open Modal</p>
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<script>
$("#ex1").modal({
fadeDuration: 100
});
</script>
</body>
</html>
You can do this with jquery:
$(document).ready(function(){
$('#ex1').modal({fadeDuration: 100})
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My PopUp</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
</head>
<body>
<!-- Modal HTML embedded directly into document -->
<div id="ex1" class="modal">
<p>Thanks for clicking. That felt good.</p>
Close
</div>
<!-- Link to open the modal -->
<p>Open Modal</p>
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
</body>
</html>
By using $(document).ready() you are telling js to wait until the page is loaded and then execute you code which loads your modal.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Glyphicons</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="bootstrap-4.0.0-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Bootstrap Glyphicons</h1>
<p class="lead">Icons that are actual, real-life fonts! This means no Photoshopping required :)</p>
</div><!-- page-header -->
<p><span class="glyphicon glyphicon-circle-arrow-right"></span></p>
<h3><span class="glyphicon glyphicon-music"></span> An icon in a header!</h3>
<p><span class="glyphicon glyphicon-trash"></span> There's an icon for just about anything you can think of!</p>
<p>You can link an icon like so: <span class="glyphicon glyphicon-cog"></span></p>
<button type="button" class="btn btn-default btn-lg btn-info">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> A button with an icon
</button>
<br><br>
<div class="alert alert-warning">
<span class="glyphicon glyphicon-exclamation-sign"></span>
You may use icons in alert messages, too!
</div>
<br>
<h4>Use icons for User Interface design</h4>
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></button>
</div>
</div>
<hr>
</div><!-- container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
hey I am trying to show icon in the browser but it is not showing in the browser while I am using proper bootstrap tags but didn't find any icon in the browser
is it any tag error or something please help me to understand it
** is it necessary ** to use all the cdn links like jQuery javascript are use or choose manually which one is the better decision.
That's because you're using Bootstrap 4, and according to its documentation, in that version they dropped the Glyphicons icon font, that means, from v4.0, Bootstrap won't offer Glyphicon support.
If you need to use icons in Bootstrap 4, you need to search alternatives like Font Awesome and add it by yourself, or get down to Bootstrap 3.3.7 and use it.
You have to include the glyphicons. Put this after importing bootstrap
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
Replacing your line
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
with
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
solved the issue for me.
You are also trying to reference a local version of the 4.0.0 css, you probably don't need that line.
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.js" type="text/javascript"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="script.js"></script>
<meta charset="UTF-8">
<title>RNG</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 text-center">
<h1>Random Number Generator</h1>
<button class="btn btn-primary" id="generateButton">Generate</button>
<p id="randomNumber"></p>
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
</html>
And my JS/jQuery:
$("#generateButton").on("click", function() {
alert("Hello");
})
If you are wondering why the only thing my Random Number Generator is supposed to do is saying "Hello", that's because I was trying to figure out why my code wasn't working properly, and then I found out it was jQuery not working.
The file 'script.js' is linked properly though, because when I tried the normal JS alert with no jQuery code, it worked fine.
This is the part of the code where I am linking to jQuery:
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.js" type="text/javascript"></script>
Yes, I am linking jQuery from 3 different sources, just in case. That is because the first one didn't work, the second one didn't either, so I just wanted to make sure.
Assuming script.js is where your code lives, when you do
<script src="script.js"></script>
There is no $("#generateButton"). You can either move your script to just before the </body>, or wrap you code in
$(function() {
//your code goes here
});
which tells it to wait for the document to load before executing.
You just put your code before loading jquery, you should put your script after not before.
It make sense in programming to import or load the lib before using something from it
$(function(){
$('#generateButton').click(function(){
alert("functional");
})
})
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.js" type="text/javascript"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="script.js"></script>
<meta charset="UTF-8">
<title>RNG</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 text-center">
<h1>Random Number Generator</h1>
<button class="btn btn-primary" id="generateButton">Generate</button>
<p id="randomNumber"></p>
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
</html>
I'm trying to just run the Angular Material grid layouts demo that can be found here titled Flex Percent Values.
Excerpts from my HTML code is as follows:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1" />
<!-- LINK TO LOCAL BUT HOW? -->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc4/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="../../../bower_components/angular-material/modules/css/angular-material-layouts.css">
<base href="/">
</head>
<body data-ng-app="MyApp" data-ng-controller="MainCtrl">
<div layout="row" layout-wrap>
<div flex="30">
[flex="30"]
</div>
<div flex="45">
[flex="45"]
</div>
<div flex="25">
[flex="25"]
</div>
<div flex="33">
[flex="33"]
</div>
<div flex="66">
[flex="66"]
</div>
<div flex="50">
[flex="50"]
</div>
<div flex>
[flex]
</div>
</div>
<div ng-view></div>
<!-- Angular Material Dependencies -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.11.2 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.js"></script>
When I add Material Angular elements like md-button they render, although anything layout related doesn't work. I've double checked that I'm importing all the stylesheets I need, and I think I am. I'm not sure what's wrong though.
You're linking to the CSS stylesheet of the 1.0.0-rc4 version but you're loading the scripts of the 0.11.2 version...
I'm pretty sure that this is the problem!