daemonite / material Goto Github PK
View Code? Open in Web Editor NEWMaterial Design for Bootstrap 4
Home Page: http://daemonite.github.io/material/
License: MIT License
Material Design for Bootstrap 4
Home Page: http://daemonite.github.io/material/
License: MIT License
I'm having trouble getting this working in Meteor. The CSS files are running well but the JavaScript files keep throwing the error: Uncaught TypeError: Cannot read property 'style' of null
base.js?4f6009c08cf32c5ac7ff405986401b33b8512157:83
.
Is it something I am doing wrong? Any ideas how I can get around this?
Hi there
I sent a pull request 21 days ago, but you haven't responded. I don't mind if you reject it, or request that I change it, but would appreciate a response. If you don't want pull requests, maybe mention it in your readme.
Using Opera on Android, icons like hamburger menu, plus, etc.. are not showing (neither the code name). - on IE (windows phone) there is visible only code name "plus" or "menu".
Hi there
When you have a multi-select box with one or more options selected, the .header-logo drops down and obscures the LHS menu. This seems to only affect Chrome, I could not reproduce the problem in Safari or Firefox.
Even weirder, if you inspect the .header-logo, click "float: left" off and on again, it pops up to the correct place.
The offending form control:
<div class="form-group">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4">
<label class="form-label" for="input-select">Select</label>
</div>
<div class="col-lg-4 col-md-6 col-sm-8">
<select class="form-control" id="input-select" multiple="multiple">
<option selected="selected">1</option>
<option selected="selected">2</option>
<option>3</option>
</select>
</div>
</div>
</div>
As a work-around, I'm just doing this (not ideal):
<header class="header">
<div class="clearfix pull-left" style="min-width: 300px">
When a datepicker is used inside a modal dialog, a graphical error occurs with the datepicker's black background:
I tried using a very crude hack which seemed to make it look okay on desktop:
.modal .picker__holder {
margin-top: 49px;
margin-bottom: 49px;
overflow-y: hidden;
margin-left: 17px;
width: calc(100% - 34px);
}
But it doesn't really work when it comes to mobile:
As you can see, it cuts off the controls at the bottom of the datepicker.
Would it be possible to maybe move the datepicker holder so that it is part of the body instead of the parent div or something similar?
Hi, was wondering something.
I was looking to play with you repo' and as I was reading a topic on good practices on javascript I noticed that in your page there is a lot of " javascript:void(0) " in href attributes.
" There is no need to use knowing that the javascript code does not belong in an href attribute of a tag . In the href attribute of a link must appear a valid URI that points actually on a resource, in this case javascript: is treated as a protocol! Protocol that does not exist; the link is then invalid and useless. At the time of web accessible, it's task. Replace the URI with an empty anchor, the famous action is as bad.
To add an event to a link - for example on a confirmation link or delete the management with "AJAX" loading a link - so, use Event onclick. To confirm deletion, can be used, for example:
<a href="/delete/id" onclick="return confirm('Delete this object ?');">delete object</a>.
" -- end of citation.
Why keep this behaviour ? Is there a meaning behind this I didn't find ?
Those versions of IE are not used enough for the amount of work needed to support them
Cannot be loaded font awesome or ¿how should we must load it?
How does one get the value of the switch whether on or off with JavaScript. Using $('input[name="input-switch"]').val()
with jQuery always returns "on"
even when the switch is off
Hi,
I think your project is the best association of HTML5, Bootstrap & Material Design .
I suggest to improve the UI: add a badge with a number (like the number of unread messages on an envelope icon).
It's just a suggestion. It must be adapted with your CSS structure, design and the CSS guideline rules.
Sample:
<span class="icon">mail</span>
<span class="icon icon-lg">mail</span>
<span class="icon icon-2x">mail</span>
Sample, included badge:
<span class="icon icon-badge" data-badge="1">mail</span>
<span class="icon icon-lg icon-badge" data-badge="1">mail</span>
<span class="icon icon-2x icon-badge" data-badge="1">mail</span>
<style>
.icon.icon-badge[data-badge]::after {
content: attr(data-badge);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
align-items: center;
position: relative;
top: -21px;
right: -7px;
font-family: "Roboto","Helvetica","Arial",sans-serif;
font-weight: 600;
font-size: 9px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #F44336none repeat scroll 0% 0%;
color: #FFF;
}
.icon-lg.icon-badge[data-badge]::after {
content: attr(data-badge);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
align-items: center;
position: relative;
top: -27px;
right: -11px;
font-family: "Roboto","Helvetica","Arial",sans-serif;
font-weight: 600;
font-size: 10px;
width: 17px;
height: 17px;
border-radius: 50%;
background: #F44336 none repeat scroll 0% 0%;
color: #FFF;
}
.icon-2x.icon-badge[data-badge]::after {
content: attr(data-badge);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
align-items: center;
position: relative;
top: -35px;
right: -15px;
font-family: "Roboto","Helvetica","Arial",sans-serif;
font-weight: 600;
font-size: 12px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #F44336 none repeat scroll 0% 0%;
color: #FFF;
}
</style>
Thank you for your time and attention.
See you soon for the next commit.
Polymer Paper implements this.
One method: http://jsfiddle.net/muicss/Lrw1me3e/
Would love to see this at:
http://daemonite.github.io/material/docs/4.0/components/forms/
Its really nice you remove the font downloading from google, but now the roboto font is missing in css/font.
What is the browser compatibility like? How would it fall back to <IE9?
I really like this project and I would have a little fun with it in Meteor and Cordova. I tried checking out the templates from a PHP server and everything works fine. However, when I put them in a Meteor they don't seem to look and behave as they should. Is there something I am not doing right? Is it Meteor or there are known issues with meter.
Here's my app structure:
├── application_layout_minimal.html
├── client
│ ├── css
│ │ └── base.min.css
│ ├── lib
│ │ └── material
│ │ ├── base.js
│ │ ├── html5shiv.js
│ │ └── respond.js
│ └── templates
│ ├── application
│ │ └── application_layout_minimal.html
│ ├── authentication
│ └── home
├── index.html
├── lib
│ ├── collections
│ └── router.js
├── page-404.html
├── page-affix-full.html
├── page-affix.html
├── public
│ ├── css
│ │ └── fonts
│ │ ├── FontAwesome.otf
│ │ ├── fontawesome-webfont.eot
│ │ ├── fontawesome-webfont.svg
│ │ ├── fontawesome-webfont.ttf
│ │ ├── fontawesome-webfont.woff
│ │ ├── fontawesome-webfont.woff2
│ │ ├── MaterialDesignIcon.eot
│ │ ├── MaterialDesignIcon.svg
│ │ ├── MaterialDesignIcon.ttf
│ │ └── MaterialDesignIcon.woff
│ └── images
│ ├── samples
│ │ ├── landscape.jpg
│ │ └── portrait.jpg
│ ├── screenshots
│ │ ├── material01.png
│ │ ├── material02.png
│ │ └── material03.png
│ └── users
│ └── avatar-001.jpg
└── server
The link: ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js doesn't work.
You have to download the jquery 1.11.3 (from: https://jquery.com/download) and replace this line:
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"
with this one:
src="js/jquery-1.11.3.js"
in every html.
any plans to make a bower package?
Hi,
It's a correction/adaptation of the documentation or your CSS file.
The text-overflow
doesn't work for long texts on small screens in tiles with actions.
File: ui-tile.html
Section: Tiles with Actions
Code:
<div class="tile-inner">
<span class="text-overflow">consectetur adipiscing elit, consectetur adipiscing elit, consectetur adipiscing elit</span>
</div>
When the code works correctly:
<div class="tile-inner text-overflow">
<span class="">consectetur adipiscing elit, consectetur adipiscing elit, consectetur adipiscing elit</span>
</div>
Kind Regards
It will be good to get a better styling for a video tag, I cannot make a video tag fill a card. Hope you can fix that soon.
Google has a similar UI project for Angular (https://github.com/angular/material) on GitHub. What's the difference between this one and Google's Material?
Template is a fantastic !!! But I continue to have problems with the file base.min.css.
How can I fix?
Are you ok to force a css style on material using scss-linter and css-comb ?
I have a problem in base.min.js on tabSwitch=function(a,b){var c=a.closest(".tab-nav"),d=$(".tab-nav-indicator",c),e=c.offset().left, function
I have a problem with this file base.min.css. It seems that is not formatted correctly.
There are several material design mobile apps which have tab in the header area like whats-app, google reader etc. But here in this framework, I can't add tabs into the header area satisfactorily. (I am not a css wiz though). Can you please show me how to achieve that?
I tried to install it by Bower with cmd: bower install --save git://github.com/Daemonite/material
at finished, I found its version is 1.0.0 (like).
and then tried to cmd bower install --save git://github.com/#1.2.0, told not this version.
Needs ability to swipe side menus in and out of view
From the commit history, I see this library was started in Feb 2015. At that time, MaterializeCSS was already around, so there must've been good reasons to not contribute there instead, or fork that project.
Would be nice to mention prior art in the README.
Hi,
Will you agree to reorganize the files/directories according to this best practice : aesthetic sass
And create tests, assets, dist as root directories. I'll submit a pull request.
Thanks
I can only find info for toggling it with a button.
Would you be interested to create an angularized version of this template? There is already an angular version for the bootstrap.js https://angular-ui.github.io/bootstrap/
There is an ongoing project for angular material design :
https://github.com/angular/material
However this is based on FlexBox instead of Bootstrap.
When scrolling to the bottom, the RHC starts flickering on mobile Safari. It's as if it's possible to scroll down further than what is "normally" possible. Several swipes up - while the RHC is flickering - are needed until the middle column text shows up again, then it's back to normal. Tested it also on mobile Chrome, there everythings ok.
Since this is built with Bootstrap, it might be worth mentioning in README the extra features it offers vs. Bootswatch Paper (see #16).
Hi,
Will you agree pull request replacing parts of the bootstrap js with "custom" code ?
In es6, transpilated by babel ?
Thanks
elevation & shadows describes precisely z-index and shadows.
I will do a pull request, but I need some guidance on how to do that.
Using placeholder ? mixins ?
Checkbox and radio button on firefox is not accepting css in both mine as well as in your demo .
Hi,
Awesome work.
I want to use the material design icons as a separate dependency. What is the source of _material-design-icons.scss
?
Thanks
It will be appreciated if you can offer a detail code.
I am totally new to Javascript.
thanks for your help.
have a nice day.
:)
I cant see the live template today
Edit: this was solved by erasing the historial, also i cant edit and put this template in live mode by using Adobe Brackets.io web editor.
Hello,
First of all, it's a great material design implementation!
Maybe I missed something but I don't find a way to make a form field mandatory the same way as in : https://www.polymer-project.org/0.5/components/paper-input/demo.html
Regards,
PL
Hi,
I'd like to use it locally, without Internet access.
How can I do?
Thanks for your help!
When unit testing my code, I ran across this issue. $mdDialog and $mdBottomSheet - promises do not resolve when testing by call hide() or cancel(). I included my test here. Both services use $q so I tested that and it is fine - release: version 0.10.1-master-514927a.
'use strict';
describe('$mdDialog.show()', function () {
beforeEach(module('ngMaterial'));
// region var
var promise;
var resolve = function (e) {
console.log('resolve', e);
};
var reject = function (e) {
console.log('reject', e);
};
var notify = function (e) {
console.log('notify', e);
};
var catchs = function (e) {
console.log('catch', e);
};
var finallys = function () {
console.log('finally');
};
// endregion
it('$mdDialog', inject(function ($mdDialog, $rootScope) {
console.log('begin $mdDialog');
promise = $mdDialog.show({template: "<md-dialog></md-dialog>"});
promise.then(resolve, reject, notify).catch(catchs).finally(finallys);
$mdDialog.cancel();
$rootScope.$apply();
console.log('end $mdDialog');
}));
it('$mdBottomSheet', inject(function ($mdBottomSheet, $rootScope) {
console.log('begin $mdBottomSheet');
promise = $mdBottomSheet.show({template: "<md-bottom-sheet></md-bottom-sheet>"});
promise.then(resolve, reject, notify).catch(catchs).finally(finallys);
$mdBottomSheet.cancel();
$rootScope.$apply();
console.log('end $mdBottomSheet');
}));
it('$q', inject(function ($q, $rootScope) {
console.log('begin $q');
var defer = $q.defer();
promise = defer.promise;
promise.then(resolve, reject, notify).catch(catchs).finally(finallys);
defer.resolve(0);
$rootScope.$apply();
console.log('end $q');
}));
});
}
Output is
begin $mdDialog
end $mdDialog
begin $mdBottomSheet
end $mdBottomSheet
begin $q
resolve, 0
finally
end $q
Hi, beatiful work! It's a wonderful themplate! Just one thing that is not perfect, the icons doesn't appear...do you have any solution for that? thanks
The project is great so far (highfive).
All it needs now is some animations.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.