I'm trying to use a EmberJS handlebar texture element and conditionally add a css class to it. Code looks like this:
{{textarea class={{if isBlue 'blue-css' 'green-css'}} }}
This does not work. The inner handlebars expression is inserted literally into the html, but I can use an html textarea:
<textarea class={{if isBlue 'blue-css' 'green-css'}} ></textarea>
How can I do this using an EmberJS handlebars expression, if at all?
Thanks
You can try,
{{textarea classNameBindings="isBlue:blue-css:green-css"}}
as explained here docs
Related
I'm trying to implement ng2-completer component in my Angular2 application.
The conponent works properly but the style of the search textbox is flat...
I want to have the same style of bootstrap components, like textbox for example.
This is the code:
<ng2-completer [(ngModel)]="searchStr" [ngModelOptions]="{standalone: true}" [datasource]="searchData" [minSearchLength]="0" (selected)="onSelected($event)"></ng2-completer>
This is the rendered control:
As you can see, the list of color is ok but the input where the user write the value to search is completely flat...
How can I move to fix the problem ?
Basically I just want to set it like the field "Titolo" on the right.
Thanks
Just add [inputClass]="['form-control']" in the selector.
For example:
<ng2-completer [inputClass]="['form-control']" [(ngModel)]="searchStr" [ngModelOptions]="{standalone: true}" [datasource]="searchData" [minSearchLength]="0" (selected)="onSelected($event)"></ng2-completer>
Note: form-control is here a class of Bootstrap
put class="form-control" to your textbox ,(class)="form-control" in your case i guess
So I want to target multiple html element(s) like the below using a regular expression in a css selector:
<input id="something_stuff_013_work" />
<input id="something_stuff_016_work" />
The following CSS selector doesn't seem to work:
input[id*='[0-9]*_work']
I need to do something with digits in the regular expression because the inputs can be dynamically added and will be assigned ids with digits in them.
What am I doing wrong?
What about using the following selector:
input[id^='something_stuff_'][id$='_work']
It will get inputs with id starting with "something_stuff_" and finishing with "_work".
CSS does not support regexes in selectors. Use classes or starts-from and ends-with attribute selectors.
An approach to this problem would be to use classes instead of ids and have things that are styled the same to be classed the same. for example:
<input id="something_stuff_01_work" class="input_class">
<input id="something_stuff_02_work" class="input_class">
<input id="something_stuff_03_work" class="input_class">
Then select the class instead of the id.
.input_class {
sweetstyleofawesomeness;
}
Try prefixing the numeric id with \3.
I came across this today, it was the selector generated using chrometools, I'd not seen it before, and it works using Chromium Webdriver:
#\37
Full selector used is "#\37 > div > div.cell-text".
This was a selector to select an element with id = "7".
It (prefixing with \3) seems to work throughout the document I am looking at automating, with my current setup.
Fiddle.
I don't see anything to indicate why this shouldn't work. The Angular Doc says "If the expression evaluates to a string, the string should be one or more space-delimited class names." What am I doing wrong in this code?
Doesn't work:
<div ng-class="myClass">
Using ng-class (with no quotes so maybe it doesn't evaluate to a String).
</div>
Doesn't work:
<div ng-class="'myClass'">
Using ng-class (with quotes around the class name so it is (?) evaluated to a String).
</div>
Works:
<div class="myClass">
Using regular class, no ng-class.
</div>
ng-class is for dynamically adding/removing class(es) based upon conditions. I use class for your case above, but if you wanted to dynamically add a class foo use: ng-class="{'foo': condition}"
The thing to remember is that angular is there to assist you to do dynamic things in-line with standard HTML. So if all you need to do is add a class to an element, just use class.
ng-class will either refer to a scope variable or apply a class dynamically based on an expression output.
Please have a look at this sample: http://jsfiddle.net/BJjB2/4/
For instance:
function mainCtl($scope) {
$scope.myClass = 'myClass';
}
Changing $scope.myClass value will update the css class as well.
I observe some very strage behavior. When using {{#if}} inside a div class tag:
<div class="gallery-row {{#if helper}}class2{{/if}}">
I get the following DOM fragment:
<div class="gallery-row <!--data:Hb4bubiKDcedk9Z85-->">
I have similar {{#if}} clauses in other class definitions. When I use the {{#if}} outside the div tag it seems to work fine. I guess I did some silly mistake or there is a bug here.
The comment is a spark (meteor's templating system) annotation, which don't work well inside HTML tags (as html comments are invalid inside them). This is known issue, see: https://github.com/meteor/meteor/issues/800.
Move your helpers outside the tags.
{{#if helper}}
<div class="class1 class2">
{{else}}
<div class="class1">
{{/if}}
Or create a helper for classes and use <div class="{{classes}}"> instead
I have a component inside a form:
<a:form id="myform">
<a:somecomponent id="comp">
</a:form>
and a huge css file, which attaches some style to the component with id "comp".
However, this does not work, as in the rendered html page, the components name becomes "myform:comp".
How can I prevent this? Using myform:comp in css does not seem to work :-(
You have to add prependId="false" to form tag.
<a:form id="myform" prependId="false">
<a:somecomponent id="comp">
</a:form>
You just need to use the richfaces functions detailed here. #{rich:clientId(‘comp’)} can be used in this case.
Edit: also see this answer
The best solution I found up till now is not to use the id, but the style class, and replace all of the occurences of #comp in the css file with .comp:
<a:form id="myform">
<a:somecomponent styleClass="comp">
</a:form>
However, I don't consider this as a 'clean' solution...