We have fixed this problem and we’ll release our changes soon. Thanks!
-
This reply was modified 5 minutes ago by
Madgalena Obalska.
↧
Reply To: [Angular] Multiple select
↧
Reply To: Show the value inside the Pie Chart
Hi,
try this code:
$(function () {
var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
]
var option = {
responsive: true,
};
// Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart").getContext('2d');
var myPieChart = new Chart(ctx).Pie(data,option);
$("#myChart").on('mouseleave', function (){
myPieChart.showTooltip(myPieChart.segments, true);
});
});Best,
Marta
↧
↧
Reply To: Angular-boostrap-md gives error
I’m very thankful for your ideas. Both points are very good materials for the tutorial and I guess we will use them or something close to them. Now as I wrote earlier we are waiting for feedback and rather repairing crucial parts of this product. However, it’s not like we aren’t thinking about tutorials and creating better documentation.
↧
Reply To: Angular 2 float label not working
Hi,
could you tell in more details what’s wrong with this label?
mdbActive is responsible for highlighting inputs icons and activating labels.
↧
Reply To: Responsive Issue?
Hi,
compare your html code with this one below and try to find what was wrong. The code below is responsive on mobile devices:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!--Main Navigation-->
<header>
<!--Navbar-->
<nav class="navbar navbar-toggleable-md navbar-dark bg-primary">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav1" aria-controls="navbarNav1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<strong>Navbar</strong>
</a>
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link">Features</a>
</li>
<li class="nav-item">
<a class="nav-link">Pricing</a>
</li>
<li class="nav-item dropdown btn-group">
<a class="nav-link dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu dropdown" aria-labelledby="dropdownMenu1">
<a class="dropdown-item">Action</a>
<a class="dropdown-item">Another action</a>
<a class="dropdown-item">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline waves-effect waves-light">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</div>
</nav>
</header>
<!--Main Navigation-->
<!--Main Layout-->
<main>
<div class="container">
<div class="row">
<div class="col-md-12">
<!--Carousel Wrapper-->
<div id="carousel-example-1z" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-1z" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-1z" data-slide-to="1"></li>
<li data-target="#carousel-example-1z" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!-- Slides -->
<div class="carousel-inner" role="listbox">
<!-- First slide -->
<div class="carousel-item active">
<!-- Mask color -->
<div class="view hm-black-light">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20%2839%29.jpg" class="img-fluid" alt="">
<div class="full-bg-img">
</div>
</div>
</div>
<!--/ First slide -->
<!-- Second slide -->
<div class="carousel-item">
<!--Mask color-->
<div class="view hm-black-light">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20%2837%29.jpg" class="img-fluid" alt="">
<div class="full-bg-img">
</div>
</div>
</div>
<!--/ Second slide -->
<!-- Third slide -->
<div class="carousel-item">
<!-- Mask color -->
<div class="view hm-black-light">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20%2841%29.jpg" class="img-fluid" alt="">
<div class="full-bg-img">
</div>
</div>
</div>
<!--/ Third slide -->
</div>
<!--/ Slides -->
<!--Controls-->
<a class="carousel-control-prev" href="#carousel-example-1z" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example-1z" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
</div>
<!--/.Carousel Wrapper-->
</div>
</div>
<!--Grid row-->
<div class="row mt-3">
<!--Grid column-->
<div class="col-md-4">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<div class="row my-3">
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat nemo dolorum cumque vel harum placeat eveniet corrupti, ipsam explicabo dolorem, optio nostrum quam laboriosam sed soluta illum eum reprehenderit at. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat nemo dolorum cumque vel harum placeat eveniet corrupti, ipsam explicabo dolorem, optio nostrum quam laboriosam sed soluta illum eum reprehenderit at. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat nemo dolorum cumque vel harum placeat eveniet corrupti, ipsam explicabo dolorem, optio nostrum quam laboriosam sed soluta illum eum reprehenderit at.</p>
</div>
</div>
<div class="row my-3">
<!--Grid column-->
<div class="col-md-4">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
</main>
<!--Main Layout-->
<!--Footer-->
<footer>
</footer>
<!--Footer-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
</body>
</html>
Best,
Marta
↧
↧
Reply To: Responsive Issue?
Hi,
Thanks for the code, but my site responds just like the code you provided.
I was hoping to get everything moving into 1 column on mobile devices rather than everything shrinking in size – please see images in my first post. (right click and view in new tab)
Thanks
-
This reply was modified 1 hour, 10 minutes ago by
ollievincent.
↧
Reply To: Installing MDB angular 4 in existing angular-cli project
Hi,
Adding mdb-angular-pro to an existing project is complex and you can experience some error resulting from your project structure and file, wich you must figure how it fixes on your own.
1. Move files from mdb-angular-pro to your project:
from mdb-angular-pro/ folders img, scss and font to your_project/ – all these folders should be a move to this same place
2. Add external lib to package.json:
paste this line at the end of dependencies
“@angular/animations”: “^4.0.1”,
“bootstrap”: “^4.0.0-alpha.6”,
“chart.js”: “^2.5.0”,
“classlist.js”: “^1.1.20150312”,
“easy-pie-chart”: “^2.1.7”,
“font-awesome”: “^4.7.0”,
“hammerjs”: “^2.0.8”,
“screenfull”: “^3.2.0”,
“web-animations-js”: “^2.2.5”
in terminal go to your project and install package with npm install
3. Edit angular-cli.json:
change styleExt to scss: "styleExt": "css" -> "styleExt": "scss"
add bootstrap, font-awesome and rename style.css:
this should look like
“styles”: [
“../node_modules/bootstrap/scss/bootstrap.scss”,
“../node_modules/font-awesome/scss/font-awesome.scss”,
“styles.scss”
]
add scripts
“scripts”: [
“../node_modules/chart.js/dist/chart.js”,
“../node_modules/easy-pie-chart/dist/easypiechart.js”,
“../node_modules/screenfull/dist/screenfull.js”
],
4. add imports in your main ts file
import { …, NO_ERRORS_SCHEMA } from ‘@angular/core’;
import { MDBBootstrapModule } from ‘./typescripts/angular-bootstrap-md/free’;
import { MDBBootstrapModulePro } from ‘./typescripts/angular-bootstrap-md/pro’;
import { AgmCoreModule } from ‘./typescripts/angular-bootstrap-md/free/angular2-google-maps/ts/core’;
imports: [
…,
MDBBootstrapModule.forRoot(),
MDBBootstrapModulePro.forRoot(),
AgmCoreModule.forRoot({
apiKey: ‘Google_maps_api_key’
})
],
shemas: [NO_ERRORS_SCHEMA]
Regards
-
This reply was modified 50 minutes ago by
Rafal Rogulski.
↧
Reply To: Responsive Issue?
Hi, can you share us link to your page? Better is working with real code, not only head and images of your page
↧
Reply To: Angular 2 DoubleNavbarModule not working?
Hi,
I copy a code from sidebar component HTML and I paste it to my component, I remove all attributes and directives from a router, and I figure it out, it’s probably mistakes with DoubleNavbar name. In your code is <DoubleNavBar ... it should be <DoubleNavbar ...
Regards
↧
↧
Reply To: Angular-boostrap-md gives error
Sounds like you did update your npm package and forgot update checksum?
NPM install now fails.
> npm i angular-bootstrap-md –save
npm ERR! Cannot read property ‘write’ of null
npm ERR! code EINTEGRITY
npm ERR! sha512-OLsh6pBJZBnwBWyBjqn7DCzlIrp3/k1XG92bbHj4BQrItCcMvPY6weq6ak8ZVlj7yQgDmGAvnqIH9rAsiEWSXw== integrity checksum failed when using sha512: wanted sha512-OLsh6pBJZBnwBWyBjqn7DCzlIrp3/k1XG92bbHj4BQrItCcMvPY6weq6ak8ZVlj7yQgDmGAvnqIH9rAsiEWSXw== but got sha512-9njOxNPFV8h9AtlfiyUFbACaZ/NC9CAZyk3KjgvgrTyYgCRimvd6aOUi5kU+nZN+AUlRAZdMlUA64MqsFaMOxg==. (2491475 bytes)
npm ERR! A complete log of this run can be found in:
npm ERR! ….. npm-cache\_logs\2017-06-29T09_12_29_287Z-debug.log
↧
Reply To: Responsive Issue?
Hi,
Sure – its on a old dev url that I just happened to have free…
Knock yourself out 🙂
Thanks
↧
Reply To: Angular-boostrap-md gives error
We had some issues with it earlier (Github) and we are still checking it. link to Github
↧
Reply To: Responsive Issue?
Hmm why is your side inside these tags?
If I open page from frame tag everything works fine: http://s239735752.websitehome.co.uk/DadDIY/home1/
↧
↧
Reply To: Responsive Issue?
Oh!
Oops I see the tags now…
This site was about 10 yrs old before I started using it again…
Any idea where the tags might be?
Cheers
↧
Reply To: Angular 2 DoubleNavbarModule not working?
Yup, that was the issue. Thanks. Can’t believe it was that simple haha, spent way to long on that problem.
↧
Reply To: Show the value inside the Pie Chart
Thanks for trying to help, but it doens’t work well. I’m trying to show the Pie chart values without any event, show as a tooltip inside the respective area (something like the Polar Area Chart). With your reasoning I’m going to make some changes on my code!
-
This reply was modified 12 hours, 1 minute ago by
lucas.falcao.
↧
Reply To: Angular-boostrap-md gives error
I found out why it was not working at my side. Your downloadable code contains:
import { NgModule, NO_ERRORS_SCHEMA } from ‘@angular/core’;
and
,
schemas: [ NO_ERRORS_SCHEMA ]
added to file app.module.ts.
Also some comments on existing README.md:
* import node_modules/angular-bootstrap-md/scss/mdb.scss at styles.css should be removed because it not work that way. (worked only when I add it in .angular-cli.json file
* additional packages I would put as npm install
npm i –save chart.js@^2.5.0 easy-pie-chart@^2.1.7 hammerjs@^2.0.8
* npm i –save bootstrap@4.0.0-alpha.6 (this installs jQuery as dependency, but in advertisment it is said you do not need jQuery.)
* ng serve I would move to end of list, and why not use auto open option: ng serve –open
↧
↧
Reply To: Fullscreen Loading Indicator Overlay (Progressbar)
How can I make it work in my site?
i still new into this.
↧
Reply To: Installing MDB angular 4 in existing angular-cli project
Thanks Rafal.
I have managed to work out everything except for these two items:
1. import { MDBBootstrapModulePro } from ‘./typescripts/angular-bootstrap-md/pro’;
Where do I get the angular-bootstrap-md/pro from. It does not appear to be in the purchased download.
2. AgmCoreModule.forRoot({apiKey: ‘Google_maps_api_key’}).
Unfamiliar territory here. Do I have to get a legitimate google-maps key from google?
Thanks
↧
angular-bootstrap-md directory in pro download
Hi,
Does the pro directory in angular-bootstrap-md have any dependency on the free package?
Can I remove the free directory under the angular-bootstrap-md folder without any issues?
Thanks
↧