The tag <md-hint> is not working in Angular Material 1.1.0-rc2.
I even tried using <div class="hint"></div> as defined in Documentation but gives out same result
I've created a CodePen with V1.1.0-rc2 that shows input hints as displayed in the online demos.
md-hint is not a directive in Angular Material 1.1.0-rc2
The style of the hints isn't a part of Angular Material but a stand alone CSS (not sure why they don't actually create a md-hint directive):
Related
I am trying to add id attribute to angular material mat-tab to find the element in e2e testing? I am unable to set it out?
Can anyone help me how to do this?
<mat-tab label="custom" class="scroll-x" id="custom">
Thank
In angular the mat-tab ids are wrapped by components, in fact you are not able to use the custom ids.
If you want to find a HTMLElement you can use mat-tab-label-2-0 for the label or mat-tab-content-0-0 for the content.
<div class="mat-tab-label ..." id="mat-tab-label-2-0" </div>
...
<mat-tab-body class="mat-tab-body ..." id="mat-tab-content-2-0" ... ></mat-tab-body>
There is still an open issue at github for this:
https://github.com/angular/components/issues/4136
[Stackoverflow disallows the word help in the title. Hence the h3lp]
We are in the proces of moving our code from Orbeon 3.9 to Orbeon 4.x. One of the many things that changed is the behavior for display of xforms:alert and xforms:help. Example code:
<xforms:input ref="#code">
<xforms:alert ref="$resources/required-field"/>
<xforms:help ref="$helptext"/>
</xforms:input>
In Orbeon 3.9 the alert is displayed as a red img with a white exclamation mark that has the text as tooltip, only if the binding fails. The help is displayed as a blue-ish image with a question that activated a tiny pseudo window containing the (potentially large) help text.
In Orbeon 4.7 the alert text is displayed as-is, no image and no condition based on binding. This interferes with a carefully designed interface as it takes up a lot more space. The help text is not displayed at all because .xforms-help has display: none;. Overriding that doesn't work because the text would then just be displayed inline.
I could not find documentation for these changes. Does anyone know the rationale and how to make "alert" and "help" useful yet again?
There are two changes with Orbeon Forms 4.x which might be relevant to this:
The HTML layout of elements has changed a bit. This means existing CSS might have to be adapted. You can check this by comparing the HTML produced by 3.9 vs. 4.x for a given page. With 4.x, all form elements, for example, are wrapped within a <span> or <div> element.
Form Runner uses Twitter Bootstrap as a CSS library. But the Bootstrap CSS files are also included for non-Form Runner pages.
This said, "red icon" alerts should still work, see for example the good old Espresso Order or Bookcast demos.
If you see alerts inline and unconditionally, it means that somehow the proper CSS doesn't apply, either because of the HTML layout change mentioned above, or because some CSS files are missing.
Look at this post : http://blog.orbeon.com/2014/01/improving-how-we-show-help-messages.html
and this : http://discuss.orbeon.com/how-to-use-the-quot-new-quot-xforms-help-in-4-5-td4658348.html
julien
For example, I have a piece of code like this:
String_test="
<template>
<label> {{count2}} SSSSSSSSSSSSSSSSSSSSSSSSS </label>
<input id="input1" type='text' value='{{count2}}'>
</template>"
and I want to assign String_test to another element, like:
DivElement span2 = new Element.tag("div");
span2.setInnerHtml(String_test);
_content.nodes.add(span2);
However, the "< template >' tag is not recognized, nothing will show up.
NOTE: My purpose is to use setInnerHtml to dynamically add contents to the webpage with data-binding still OK.
Any ideas?
Thanks!
It appears that you are including raw html in your Dart program files. This is not how Dart works. Dart has code (kept in .dart files) that is referenced to via a tag in the HTML file. This very quick tutorial will show you how to do that: https://www.dartlang.org/docs/tutorials/connect-dart-html/
Templating is found in the Dart Polymer library. It is too long of a process to go into here but you can find a short tutorial at: https://www.dartlang.org/docs/tutorials/polymer-intro/
I would also mention that Angular comes in a Dart flavor and I find it more accessible than the Polymer libraries. The tutorials and documentation are also much better. Angular is a more comprehensive suite of libraries and it's tutorials can be found here: https://github.com/angular/angular.dart.tutorial/wiki
When using jQuery Mobile .js along with jQuery Mobile .css, what is the best way to customize the default styling such as a link button?
Using jQM, a simple link can be turned into a button by using the following code:
Link button
data-role="button" allows jQM to add classes to the link so it can be styled into mobile button touch abled like so:
<a href="index.html" data-role="button" data-corners="true" data-shadow="true"
data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn
ui-shadow ui-btn-corner-all ui-btn-up-c"><span class="ui-btn-inner
ui-btn-corner-all"><span class="ui-btn-text">Link button</span></span></a>
Is it OK to actually edit the jQM css file for example the ui-btn-up-c class? Or is it better to override the styles somehow, perhaps in an external stylesheet?
I have a couple of concerns. I am wondering if it's possible to break some of the functionality by directly editing jQM.css as jQM seems to use the stylesheet heavily.
Also will it be a problem on updating? Do jQM release a new stylesheet when a new version comes out which would override my edits to the main jQM stylesheet?
Basically what I am asking is how do I edit the jQuery Mobile built in theme?
Thanks and look forward to your answers :)
Intro
If you want to change classic jQuery Mobile CSS everything depends on what do you want to do.
Theme roller
Classic way would be to create a completely new set of theme's or add them to existing ones. It is done through jQuery Mobile theme roller. When you open it it will automatically create 3 themes you can then modify as you wish. Or you can Import your current theme CSS and add several more themes (this is probably best solution if you want to change complete look).
Custom CSS changes
This solution requires a little bit of finesse. First if possible NEVER change original CSS unless you are 100% sure what you are doing. For example if you change default button classes it will also affect other widgets that use button classes and there are a lot of them.
Correct way would be to change single/multiple elements with custom CSS file. This way original CSS files is intact and new one can be changed / removed at any time.
To do this you will need to use Chrome Webmaster tools or additional plugin called Firebug (for Chrome and FireFox). There are several more solutions but this two are most commonly used.
Problem to think about
Not all is well in this solution. For example, classic a tag button can be easily modified cause that same a tag will stay as a parent of a future styled jQuery Button. But, if your button is created from input tag, like this:
<input type="text" value="Some value" id="change-me"/>
you cant use #change-me id to correct its CSS. Mainly because this input is not a parent tag for a future button, it will be a inner part of a button when jQuery Mobile styles it. It will look like this:
<div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c">
<input type="text" id="change-me" value="Some value" class="ui-input-text ui-body-c"/>
</div>
To fix this wrap that input with another div element. Move id from input to div element and then use it to change inner CSS styles.
How to correctly override CSS styles
This is one of a most common questions in this StackOverflow group. When changing predefined CSS rules you must use !important keyword. Changes will usually not work without it. For example if you want to change input button style background (from a previous example, wrapped in a div) you would do it like this:
#change-me .ui-input-text {
background-color: red !important;
}
If nothing else works change original CSS file(s)
jQuery Mobile can have 1 or 2 CSS files. When using one file both theme and structure is included, or they can be separated into two files. This is useful if you want to change CSS directly. Theme CSS can be easily imported and exported into theme roller without affecting structure CSS file.
One last thing, some things can only be changed by modifying original structure CSS file. For example jQuery Mobile uses a horrible blue glow effect to show when some element has been pressed. It can be removed only directly from structure CSS file.
The solution lies in CSS specificity within your own additional CSS file. All you need to do to override any formatting in JQM is to first apply an id to the element you wish to override JQM formatting with your own CSS.
Next, in your own CSS, specify that the class be applied to the id of the container.
As an example, I'll remove the JQM border from an image link below.
#img_button_1 .ui-btn-inner {border: none !important;}
Where #img_button_1 is the id of the HTML anchor element.
<a id="img_button_1" data-role="button" data-theme="none" data-corners="false" data-shadow="false" data-inline="true"
href="http://www.google.com" target="_blank"><img src="http://www.google.com/images/srpr/logo1w.png" alt="Google" />
</a>
It's as simple as that.
One more important thing, and that is that load order of the external CSS files is significant, and you will want to load your own CSS after JQM CSS.
I have forked a working example at jsFiddle below.
http://jsfiddle.net/Z8Xnx/14/
The biggest benefit with this approach, is you do not have to alter the JQM CSS at all, and can leave it alone. This becomes important if your want to import your JQM back into the ThemeRoller tool at a later date. If you modify the actual JQM CSS by hand, you may have an issue successfully importing your JQM back into ThemeRoller again.
I have successfully used this approach to resolve every JQM CSS conflict I have run across since figuring out this specicivity requirement issue.
Hope this helps everyone with an easy solution to their JQM style conundrums.
** UPDATE **
It has been noted to me that this method does not work with the latest version of JQM (1.3.0b1), and that is not correct. I have investigated and found this to be a problem with the implementation of this version of JQM at jsFiddle. To prove this, I have put up an example page on my own space with the exact same code as that shown in the jsFiddle example. This means as of my writting, you really can't trust anything at jsFiddle using the lastest version of JQM from the options. Just a heads up, and you can find the working implementation at...
jQuery Mobile CSS Override Example
If you are looking to simply change the styling then you can use the jQuery Mobile themeroller.
http://jquerymobile.com/themeroller/index.php
Otherwise, I would suggest using another stylesheet rather than directly editing the jQuery mobile stylesheet.
If you are looking to reduce the number of files that you are serving to your visitors then I would compress both stylesheets and then just insert your styles below their styles as a production copy. That way, you can keep them compressed and combined for production, but you could keep them separate for easy upgrading later and for development ease of use.
I made a small mixin for the Chosen plugin that worked well in this fiddle.
When I use this in my ember-rails application the chosen box shows up, but has no options. I think it is related to my using ArrayController.extend vs Object.create (in the fiddle), but I can't figure out why. When I change extend to create in rails, it tries to create the controller twice and gives an error.
Ember changes so fast, did I miss something from the fiddle version to the ember-rails version?
(ember-rails source code under assets at https://github.com/camdub/watchd)
Looking at your code, it seems that you're using the routing. Nice. You understood that when using routing, the controllers are instantiated for you by the framework, and each xxxView has its xxxController instance, accessible by the controller property.
in repos.handlebars, try to directly use `controller'.
<div class="container top-section">
{{view Watchd.ChosenSelect
contentBinding="controller.content"
valueBinding="controller.selected"
}}
</div>