I'm trying to use Bootstrap-Material in my website.
I'm having a problem getting the checkbox to work. When I copy the code from the Bootstrap-Material site to my project, most of the features work, but no Box appears beside the label "Checkbox". Instead of looking like
it looks like
I've been going through the source code on the Bootstrap-Material and I've imported all the css and js they have.
What's confusing is, I've inspected the elements on the Checkbox of the Bootstrap-Material page and I can't figure out what css or js file is actually creating the checkbox. It doesn't seem to be coming from an image file, so where is it coming from? Perhaps if I can figure out where it is created, I can figure out why my project is not rendering it.
Any ideas on where this box comes from?
Two things to check:
1: Are you calling $.material.init() to active Material Design.
2: Are your CSS files stacked with Material Design before the Bootstrap v3.0+ file.
3: You're using jQuery 1.9.1+.
$.material.init()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/material.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h1 class="header">Checkbox</h1>
<!-- Simple checkbox with label -->
<div class="sample1">
<div class="checkbox">
<label>
<input type="checkbox"> Notifications</label>
</div>
</div>
</div>
Related
I'm following the Material Design Tutorials here. The tutorial follows a Node JS approach and makes use of npm to install the material design components. This is fine and I get the MDC 101 project running exactly as in the tutorial. The text box label floats nicely to the top left as soon as I start entering in the text as shown at the bottom of the page here.
However, I want to use the Material Design Components in my Scala Play web service and so I inserted the CSS link and JS scripts into my webpage (code below) as described here. The HTML for my page looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shrine (MDC Web Example App)</title>
<link rel="shortcut icon" href="https://material.io/favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">
</head>
<body>
<form action="home.html">
<div class="mdc-text-field mdc-text-field--box username">
<input type="text" class="mdc-text-field__input" id="username-input" name="username" required>
<label class="mdc-floating-label" for="username-input">Username</label>
<div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field mdc-text-field--box password">
<input type="password" class="mdc-text-field__input" id="password-input" name="password" required minlength="8">
<label class="mdc-floating-label" for="password-input">Password</label>
<div class="mdc-line-ripple"></div>
</div>
<div class="button-container">
<button type="button" class="mdc-button cancel">
Cancel
</button>
<button class="mdc-button mdc-button--raised next">
Next
</button>
</div>
</form>
<script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>
</body>
</html>
If you render this in the browser, it can seen that whilst the MDC Text Fields are displayed, the labels do not float like in the tutorial example running under Node.
What am I missing here? I suspect it is something to do with some Javascript not getting activated (Javascript noob here)
You need to instantiate the MDC textfield component. One quick and dirty way to do that is to just add a script tag to your html with the following JavaScript.
<script>
mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
</script>
For future visitors who followed the official getting started guide to install MDC with webpack, what worked for me is simply to add initialize the TextField in the JS file bundled (as mentioned in the docs):
import {MDCTextField} from '#material/textfield';
const textField = new MDCTextField(document.querySelector('.mdc-text-field'));
This Jquery is a terrible kludge that I'm not proud of, but it does work and doesn't require the import statement.
<script type="text/javascript">
$(document).ready(function() {
$("#user-input").val("Player One");
$("label[for='user-input']").addClass("mdc-floating-label--float-above");
$("#user-input").focus();
$("#user-input").blur();
});
</script>
It sets the value, adds the class required to make the label float, and then quickly adds and removes focus to the text field, which triggers the outline code in MDC to remove the outline notch.
I'm currently trying to place this lightbox into this accordion
I've had them both working seperately okay, but I don't seem to be able to get them to work on the same page (whether or not one is inside the other)
I've noticed that I've ended up with:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
In my header, which might be one duplicating a more recent version of the other etc and was wondering if that could be a problem?
In the html I have:
<div id="accordion" style="width:1000px; border: 1px solid black">
<h4> Section 1 </h4>
<div>
<p> Text </p>
<img src="images/image.jpg"/>
</div>
</div>
Is there something I'm trying to do incorrectly, or is this something that just won't work in this way?
Thanks in advance for any help!
As I thought above, I had used the two different versions of JQuery and loading them both was causing a little bit of confusion.
To solve this I removed one of the JQuery sources:
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
(I have also changed the sources to be local, rather than referencing a website)
Though I didn't remove the oldest, this appeared to work better for the versions of things I was trying to load. Hope this helps someone else at some point too.
So here's my html code (Important part is in the triple quotations):
<!DOCTYPE html>
<html>
<head>
<title>To Do</title>
<link rel="stylesheet" type="text/css" href="ToDoApp.css"/>
"""<script type="text/javascript" src="ToDoApp.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>"""
</head>
<body>
<h2>To Do</h2>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>
<div class="list">
<ol></ol>
</div>
<div class = "counter">
<h4>Things to do:</h4>
</div>
<div class = "comment"></div>
</body>
</html>
and my .css connection is working perfectly, but my .js/jquery connection is just not functioning. I've tried looking up correct html syntax for including a link, and I tried alternating among a few different links to the jquery library. Is there something I'm missing here, have I put the link in the wrong place, or is the syntax funky? Thanks in advance for any help.
If your ToDoApp.js relies on jQuery then you will need to change the order of your code.
<link rel="stylesheet" type="text/css" href="ToDoApp.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script src="ToDoApp.js"></script>
Otherewise, the code that you have supplied shows not reliance on jQuery.
The best way I have found to debug issues with JS or CSS files not being included, is to monitor the network traffic with your browsers Debugging tools.. In IE, press F12, and then click on the Network tab. Click 'Start Capturing' and re-navigate to the page.
If a 404 is returned, the path is probably wrong.. From here, you can look at the path the application actually tried to request its file from.
Other errors require different investigations. If you don't even see the file show up in the requests list, then check the Console tab to see if the browser has logged any messages that may pertain to the situation. As per Jeff's answer, if the problem is that something in your ToDoApp.js relies on jQuery, then you will see messages in the console that point to that issue, such as $ is undefined.
I'm looking for a way to make a layout similar to the Bing Travel app that comes standard with Windows 8. I'm developing the app using Javscript/CSS in Visual Studio 2012.
Here is a simple mock up:
The part that puzzles me is the first item that's being showed. Somehow, the first item is shown using the maximum vertical space, while all the next items are aligned in a gridlayout ListView..
I already have the gridlayout with the groupheader shown on the right. Is there a best practice for adding the first item? Should I add another parent css-grid with 2 columns (the 1stt with fixed and 2nd auto width) or can I somehow manipulate the listview to keep the layout simple?
Ok I solved it, this is based on the VS 2012 GridLayout template. I did two things.
1) Created a (parent) grid layout with 2 columns with the correct
overflow properties.
2) Disabled the overflow properties generated by the WinJS.UI.ListView control.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>groupedItemsPage</title>
<!-- WinJS references -->
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<link href="/pages/groupedItems/groupedItems.css" rel="stylesheet" />
<script src="/js/data.js"></script>
<script src="/pages/groupedItems/groupedItems.js"></script>
<style type="text/css">
#scrollContainer
{
height:100%;
display:-ms-grid;
-ms-grid-columns: 480px max-content;
-ms-grid-rows: 1fr;
overflow-x:scroll;
overflow-y:hidden;
-ms-overflow-style:scrollbar;
}
#col1
{
-ms-grid-column:1;
}
#col2
{
-ms-grid-column:2;
-ms-overflow-style:none;
}
</style>
</head>
<body>
<!-- templates -->
<!-- The content that will be loaded and displayed. -->
<div id="scrollContainer">
<div id="col1">
col1
</div>
<div id="col2" class="fragment groupeditemspage ">
<!-- the code from the GridLayout example goes here -->
</div>
</div>
</body>
</html>
If it were me, I would go with adding a column to the element containing the first item and the ListView. You could try and come up with a way to manipulate the ListView, but since you are group data it would be a pain, IMHO. No reason to make things harder than they need to be.
Is there an easy way to use Bootstrap in an existing project?
Currently it adds styles for table,a etc. which messes up everything in the page.
I really love the modal window, some buttons, but I don't want to hunt bootstrap css all the time to switch items back to default styles.
Bootstrap 3 // Less 1.4.0 edit:
After Bootstrap 3 and Less 1.4.0 has come out, bootstrap has started using the :extend() pseudo selector. This means that certain things will fail in the original code I've posted (you'll get some .bscnt .bscnt form-horizontal code which means you have to nest two divs inside eachother, which is just dumb). The easy way to fix this is to remove the first two lines from bootstrap.less (#import variables.less and #import mixins.less) and instead import these files outside of the .bs-cnt scope:
#import "variables.less";
#import "mixins.less";
.bscnt {
#import "bootstrap.less";
}
You can also download bootstrap from here: Bootstrap source and then enter the "less" directory and add a file called "bootstrap-custom.less" where you'll enter the following content:
.bs-cnt {
#import "bootstrap.less";
}
"bs-cnt" for BootStrap-CoNTainer. You can make it longer if you want, but remember that it'll be pasted in a lot of places in the compiled CSS, so it's to save space in the end file.
After you've done this, simple compile the bootstrap-custom.less file with your favourite less compiler (SimpLESS is pretty good if you're on Windows), and then you'll have a compiled bootstrap file that only works when you place a container element with the class of "bs-cnt".
<div class="bs-cnt">
<button class="btn btn-success btn-large">This button will be affected by bootstrap</button>
</div>
<button class="btn btn-danger">This however; Won't</button>
You can use the "customize" feature on the bootstrap website to get only those features you want: Twitter Bootstrap Download Page. Most of bootstrap's rules are explicit. You'll probably only want to leave out the reset rules which are implicit by default.
I think the link in answered section is not already updated. Here is where you can customize your Bootstrap directly on GetBootstrap site:
Customize and download - GetBootstrap
Using IFrame
Just make one html document with bootstrap in it, have your bootstrap element that you want on that page, and use Iframe to get it on the other one..
element_name.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Element</title>
</head>
<body>
<!--Code for the actual element-->
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
iframe {
border: none;
}
</style>
</head>
<body>
<iframe src="element.html"></iframe>
<!--Other stuff on the page-->
</body>
</html>
The element in the element.html will be integrated in the index.html like it's own element, without even importing a single bootstrap stylesheet in the index.html and there is no need to make custom bootstraps, which can be tedious.
You can tag the styles you want to not get overwritten by a special tag. Just put the !important tag. It can take a long time to paste it after every line of code but it'll be worth the time. Or you can use the bootstrap.css file instead of the bootstrap link and delete all the styles that are overriding your styles. You can download the bootstrap css file here