I created a meteor project and added krazyeom:material-design-lite package. Then I created 2 simple html files, one that contains
<head>...</head>
and another that contains
<body>...</body>
My design looks something like this:
After I added the iron:router and only replaced <body> with <template name="layout"> and </body> with </template>.
Router.route('/', {name: 'layout'});
It looks like this:
As you can see the design is now not 100% height; and if I resize to mobile resolution, it doesn't appear the 3 lines icon to show the sidebar.
What could be the problem ?
Well i had the same issues.As of now there is some issues while using mdl with iron router . Even there are issues with Template.xyz.events not firing with mdl custom tags .
This issues will be resloved soon (Hope so)
https://github.com/Zodiase/meteor-mdl
This repo is under active development in supporting mdl in meteor . Please follow this repo for any advancement.
Other wise use similar addon like https://atmospherejs.com/materialize/materialize
which does the material design like mdl and i am using it for couple of my project and have no issues
Related
I am currently using ionicons as an icon pack for a project, when you manually refresh the page ( cmd + R ) all the icons that were previously rendered disappear. However, when navigating throughout the application via hrefs or on initial load all icons render correctly.
STEPS TO REPRODUCE
Add icons ionicons script to the body of app.html
Add icon to any svelte page e.g. <ion-icon name="add-outline"></ion-icon>
Manually refresh the page ( cmd + R etc.... ) and see that icons don't render
See here for a reproduction repo of the bug
This project choose a very strange and I suppose bad way to distribute the icons.
This way is not compatible with most async usagage.
They have had a bug about it last 3 years https://github.com/ionic-team/ionicons/issues/608
You can try this advice https://github.com/ionic-team/ionicons/issues/646#issuecomment-536150373 but I strongly recommend migrating to a different icon's set. These icons project designed for Ionic Framework or static websites only.
My site works fine when the data is in a template, but once I try to route to it using iron:router, a background image and most remaining content no longer appear. (Some of the content still appears with working css, JS components so I know that those files are being read. Also, when inspecting the element, all the text, images are still visible in the code, but not the website.
This works fine (index.html):
<body>
{{>home}}
</body>
This adds another {{>home}} section, but the new section is having issues rendering as explained above (router.js):
Router.map(function() {
this.route('home', {path: '/'});
});
Are you on the latest iron:router? I had a similar problem, and inquired about it in this pull request:
https://github.com/iron-meteor/iron-router/issues/1051
Latest response indicates this should be fixed now!
You've followed the wrong tutorial :( There are plenty of tutorials and articles out there explaining to define routes like you did.
However, the Iron Router project page explains how to define routes differently.
For more information on routes, have a look at this article about Iron Router as well.
Fixed: problem was not with iron:router but rather that not all elements were loaded into the page yet. Document.ready() works fine when I directly called template.
Issue is that when iron:router loads the template, the new page elements are being loaded after the JS files were already called (JS that animates the images/text in).
Solution: use rendered instead of document ready:
Template.MyTemplate.rendered = function(){
}
I'm looking for a tool that can help me generate css / div information through a UI / live preview.
For example, I'd like to just create the UI (top part of the image) and have the tool provide the css (bottom part of the image).
I've seen a lot of stuff for webpage layouts, but what I'm looking for is for "components".
Download HTTrack from
httrack.com/page/2.
Install the .exe and run the app.
Provide the link of the page you want HTML and CSS for and start
copying code.
You can use "Brackets".
You have few features like :
Code Hints from PSD
Inline editors
Live preview
Link : http://brackets.io/
I am building an app for the first time using Meteor. Due to an accessibility issue, we would like to offer two different Bootswatch themes to the users. I found a very useful explanation of how to switch Bootswatch themes here:
How to dynamically change themes after clicking a drop down menu of themes
(which references a handy fiddle in the accepted answer: http://jsfiddle.net/82AsF/)
I have tried placing the provided javascript inside myapp.html in the <head> tag. I also tried placing it inside the myapp.js file. (Then I tried placing in many assorted places just to see what would happen ;-) )
Nothing I have tried is working and it seems that it is the Meteor framework that is, understandably, "getting in the way". Is there an approach that will work for switching Bootswatch themes in a Meteor app?
Dynamically switching bootswatch themes is easily done as demonstrated in the originally referenced question: How to dynamically change themes after clicking a drop down menu of themes
Meteor (plus iron-router in my case) complicates this a little through the event maps and the simple fact that the dynamic change is occurring in the <head>.
Another answered question explains how to handle an event in jQuery directly (bypassing Meteor event maps): How to handle custom jQuery events in Meteor?
The code snippet below shows how I put the two ideas together. It's all working as expected.
var themes = {
"default": "bootstrap311/css/bootstrap.default.min.css",
"readable" : "bootstrap311/css/bootstrap.readable.min.css",
"slate" : "bootstrap311/css/bootstrap.slate.min.css"
}
$(function(){
var themesheet = $('<link href="'+themes['default']+'" rel="stylesheet" />');
themesheet.appendTo('head');
$('body').on('click', '.theme-link', function (e) {
var themeurl = themes[$(this).attr('data-theme')];
themesheet.attr('href',themeurl);
});
});
I have developed a custom DNN Module. In doing so I have followed DotNetNuke 6 patterns for consistent user experience (For more information have a look at the following guide)
http://uxguide.dotnetnuke.com/UIPatterns/SimpleFormDemo.aspx
How ever I do not like the way DNN default skin shows the required fields. How can I change the mandatory indication to traditional
Label: * Textfield
What changes to the skin (css class) should I make to achieve this?
This will require more than just a change to the CSS, as the overall design pattern does not involve putting any "*" in the content. So you will need to not only modify the classes, but content as well. (Unless you go with a JS or other type solution which I don't recommend.)
In your css do something like this to get rid of the red indicator
input.dnnFormRequired{border-left: 0px;}
Then I guess you could do some Javascript to add the * after any dnnFormRequired
<script type="text/javascript">
$(document).ready(function(){
$("input.dnnFormRequired").after('*');
});
</script>
Hopefully get you a little further along with what you are trying to achieve.
Even if it does break the UI guidelines ;)