Now that applyAuthorStyles is deprecated the font-awesome icons no longer show up. This question how to incorporate font awesome in a dart component? has some useful information but I'm unable to get the untested suggestions to work.
Here is a template from a very simple mortgage calculator component project:
<polymer-element name="plus-payment-schedule">
<template>
<style>
</style>
<fieldset>
<legend>Payment Schedule</legend>
<label><span class="fa fa-calendar fa-fw" style="width:1.5em"></span> Start Date</label>
<plus-date-input id="date"></plus-date-input>
<div class="payment-schedule">
<table id="schedule_table">
</table>
</div>
</fieldset>
</template>
<script type="application/dart" src="payment_schedule.dart"></script>
</polymer-element>
Prior to polymer 0.10.0, using the suggested applyAuthorStyles patch this code worked. Meaning, by applying those font-awesome classes (class="fa fa-calendar fa-fw") the font-awesome icons showed up. I've removed applyAuthorStyles and made other polymer init changes required for the update. The component works fine except the font-awesome icons no longer show up.
When I run this mortgage calculator app and look in the inspector, I see that those classes are applied to the span. So I guess the issue is the definition of the classes (fa fa-calendar fa-fw) is not available?
Any information on how to make this specific scenario work?
The component is hosted here
applyAuthorStyles is deprecated. Thus you have to include stylesheets within <template>.
The problem is that #font-face does not work inside polymer elements at the moment. The solution is to include #font-face in the regular document and to add the classes to your polymer or include font-awesome.css in both places.
This should solve it.
See also:
- https://code.google.com/p/dart/issues/detail?id=18581
- https://github.com/Polymer/docs/issues/434
Regards, Robert
Consider using the Font-Awesome Polymer Iconset or generate your own subset using this generator
You'll be able to use FA in core-icons and other icon based elements, like this:
<core-icon icon="fa:calendar"></core-icon>
There is an element for that.
Use this: https://www.npmjs.com/package/fontawesome-iconset:
get the icons you need from fa-icons.html
put it in a new iron-iconset-svg
import iron-iconset-svg and iron-icon
use it like other iron-icon
You can view how to use here: https://elements.polymer-project.org/elements/iron-icon
Related
I have followed the simple instructions in part A) of this answer.
The code can be seen in the browser, but it's not formatted as it's supposed to be.
When I view source, I can see that css classes are being generated, but it doesn't seem to change the appearance.
This is the html generated (I added the div's)
<div class="highlight">
<span class="k">def</span> <span class="nf">rouge_me</span>
<span class="nb">puts</span> <span class="s1">'hey!'</span>
<span class="k">end</span><br><br>
</div>
What I've tried
This suggested wrapping everything in <div class="highlight"> ... </div> but that didn't change anything.
Common sense says if there's css classes being referenced in the html, but those css classes aren't defined anywhere, then they won't be applied. When I check my css, there are no classes defined (it's an extremely basic app with no styling). How can the app 'know' about the classes rouge provided? Does rouge provide these somehow?
The instructions that you reference here are not general instructions for formatting code with Rouge but rather an answer specific for the original question.
Specifically, you missed one sentence given there: ”The only thing you need besides the code above is the CSS rules, which you have already correctly included in the web page.“
Indeed, what you need is to include some CSS styles that will colour your formatted Rouge output. This can be done by rendering a chosen Rouge theme into your template / layout (into a <style> tag) or into an app/assets/stylesheets/rouge.css.erb file, e.g.
<%= Rouge::Themes::Base16.mode(:light).render(scope: '.highlight') %>
See the README for more examples and the list of themes.
All the css is ok but the only problem is that I can't change the default bootstrap css.
index.html.erb:
<div class="col-sm-6 no-padding"> Something </div>
_cards.scss:
.no-padding{
padding: 0px !important;
}
Is there any configuration that is causing it?
The only way that works in this app is to write:
<div class="col-sm-6" style="padding: 0px;"> Something </div>
Obs.: I'm using Rails 5.0.1 and I created a new sample of rails app to test and worked like how I intended to do. So I guess that it should be some wrong configuration.
Obs2.: all other components from '_card.scss' are also loading normally.
To solve this issue we have to attempt to call on application.scss the bootstrap first (I mean, above on the list) and then we should call our private css folders after.
Thank you again for the amazing support guys.
My project is based on Angular Material framework (basically: Angular + web components in Material Design).
The problem I got into is that for some reason one directive ( md-sidenav) causes multidir error.
<md-sidenav layout="column" class="md-sidenav-left" md-component-id="left" md-is-locked-open="false" ng-controller="sideMenuController">
</md-sidenav>
I'm sure md-sidenav is the bad guy since I tried to replace it with another directive and got not issue at all. I'm also sure this directive is used nowhere else in the project, neither the controller associated to it is.
I also noticed this error appeared after I switched to a nested layout (i.e. ng-includes within the main view) but since I made several other changes to the project I can't be sure this is the actual reason.
I created a Plunkr to show the issue.
It actually doesn't run because I have no idea how to include ngRoute since a CDN is not available (feel free to edit the Plukr).
http://plnkr.co/edit/M52I7pn8D4fUaGAlOMtn
There were two mistakes , you have not put the reference as text/javascript for angualr-route script
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js" type="text/javascript"></script>
Embed the sidenav inside a div, since it is already having a directive for it,
<div ng-controller="sideMenuController">
<md-sidenav layout="column" class="md-sidenav-left" md-component-id="left" md-is-locked-open="false" >
</md-sidenav>
</div>
I'm pretty new to coding, so please pardon my inexperience.
I'm currently working on making a website, and want to have button modals. I can't seem to get it working, and have experimented with it for at least a few hours. This is what I have written in my html file, which was taken from the Twitter Bootstrap site:
<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
<div class="modal" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
Am I missing something here? Do I need add something else? The bootstrap site said to "call the modal via javascript", but I didn't know where to put the $('#myModal').modal(options). I placed it in the .html AND the .js file, but neither attempt worked.
The .html file already has
<script src="js/bootstrap-modal.js"></script>
along with all the other plugins, but this doesn't seem to be doing anything. It's also worth noting that I am working locally on my computer.
I'm sure this is a very easy question, but ANY help would be greatly appreciated.
EDIT:I managed to get it working. Looked like my problem was that I was sourcing bootstrap-modal.js, when really I only had bootstrap.js. I made a new file called boostrap-modal.js with the code, and it worked fine.
However, I'm still unable to get the fade in transition. I've used the bootstrap-transition.js files but still can't seem to get it down. Additional help would be greatly appreciated.
* Updated the bootstrap stylesheet path on the fiddle, it changed since I wrote this answer.
You need to include the jQuery script before the bootstrap-modal.js script file for the plugin to work, here is the script straight from googles CDN that you can include freely in your page, just make sure to include it before any js that you might have:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
You only need to call the script if you want it to display when your page loads, otherwise you just need to have the proper data-* attribute and href reference in your modal button which you already have:
<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
You can include all scripts at the end of your <body> tag for faster content loading, the same way the twitters bootstrap demo page has it.
Here is a demo of a modal page:
http://jsfiddle.net/3v2zg/626/
I am using jquery-mobile for 1 of my applications in Rails 2.3.4.
The following code
li data-icon="plus" data-iconpos="right"><%= link_to "Post", [my parameters] %>
does not show the data icon, "plus". I am wondering why.
Any ideas please.
The original question is a little unclear to me, but from the comments, it looks like you're trying to find out how to change the icon in listview from the standard arrow.
To do this, add a data-split-icon property to the ul tag - setting it to one of the icon names from http://jquerymobile.com/demos/1.0a3/docs/buttons/buttons-icons.html
For example:
<ul data-role="listview" data-inset="true" data-split-icon="star">
<li><h3><a>list item 1</a></h3><a>link title</a></li>
<li><h3><a>list item 2</a></h3><a>link title</a></li>
<li><h3><a>list item 3</a></h3><a>link title</a></li>
</ul>
Instead of the standard arrow icon, that gives you a list with pretty stars.
Hope that helps
I had the same problem myself - it is due to the fact that Rails uses a 1.4 version of jQuery by default - you need to be using jQuery 1.5
If you want to get started quickly then use the jQuery CDN hosted files:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js">