Am using This modal in angular2 and i would like to position the modal popup to the left this is what ive tried
<modal #categoriesmodal [cssClass]="modalchecklist">
<modal-header [show-close]="true">
<h4 class="modal-title">I'm a modal!</h4>
</modal-header>
<modal-body>
Hello World!
</modal-body>
<modal-footer [show-default-buttons]="true"></modal-footer>
</modal>
On the css class
.modalchecklist{
position:absolute;
top:0;
left:0
}
Ive tried adding //background color:red on the css class but this fails and adds the css to the background document not on the modal
Where am i going wrong on the css classes
Ive checked also on the chrome developer tools but they too dont solve the issue.
What could be wrong
To apply a style attribute in Angular2 you can use the [style] directive, like this
<what-ever [style.backgroundColor]="'red'">I am red</what-ever>
To apply a class, use ngClass:
<what-ever [ngClass]="'first'"><what-ever>
<what-ever [ngClass]="['first', 'second']"></what-ever>
<what-ever [ngClass]="{'first':true, 'second':conditionExp}"><what-ever>
See the ngClass link above for multiple syntax options and using expressions.
Please note all these methods are directives and, being directly bound to the scope, they expect expressions. In order to pass strings, you need to qualify your expression as string: use single-quotes inside double-quotes, and they'll be correctly evaluated as strings.
Related
My Html Code is
<div ivh-treeview="menuPermissionObj.generalAssetManagement"
ivh-treeview-expand-to-depth="-1"
ivh-treeview-on-cb-change="changeCallback(ivhNode,ivhIsSelected, ivhTree)">
</div>
i used this plugin
https://github.com/iVantage/angular-ivh-treeview
is there any way to hide parent checkbox?
thanks in advance.
Yes, but you will need to use a custom node template.
See the list of supported helper methods and scope variables in your templates here: https://github.com/iVantage/angular-ivh-treeview/blob/master/docs/templates-and-skins.md#supported-template-scope-variables
Both isLeaf(node) and the depth variable will pair well with ng-show.
I got an error when i put a nested ng-show attributes for custom directive,
one attribute in the markup of the directive and the second inside the root element of the directive template.
My real scenario are complex so i will simplify it to this example:
Suppose i have my-custom-directive below which already contains ng-show:
<my-custom-directive ng-show="someValue >= 5"></my-custom-directive>
And then the template of 'my-custom-directive' look like this:
<div ng-show="options != null">My Custom Directive</div>
Those multiple ng-show together cause an error.
if i remove one of them or move the inner ng-show at least one level deeper in it's dom tree the error gone (it's happen when it's location is on the root template element).
this error tested on angular v1.4.8.
Is this angular bug? or there is a reasonable explanation for this behavior?
here is the Plunker example:
http://embed.plnkr.co/ZTZVcfc5bfmjPo9t0Isw
Thank you in advance,
Menachem
Because the directive has replace: trueit is trying to merge the two ng-show values together resulting in an error. The simplest solution I believe is to just do replace: false
Or you can inject the value via isolate scope and use a single ng-show value within the directive. I believe this is considered the cleaner solution.
Example: http://plnkr.co/edit/5oc8c1Hrz8N1F2klCio7?p=info
scope: {
someValue: '=someValue'
}
I have a span with an ng-click="..." attribute. The ng-click slightly modifies the span's CSS within the DOM so that it is more button-like. Within my application I wish to toggle whether or not that span is clickable or not. I can make the ng-click not do anything easy enough but what I would prefer is to just remove/disable the attribute altogether. This is to avoid all "buttonizing" that the ng-click does to the element. It would also be nice if the attribute were re-enabled if the clickable variable becomes true again.
I would like a solution that avoids using $scope.$watches because my application is pretty large and watches are slow.
Thanks!
I think you can have two spans with and without ng-click attribute and based on that clickable variable you control those two spans with ng-if or ng-show
Simple solution suggested by to Achu!
Just use two spans rather than toggle the attribute on a single span.
<span ng-if="clickable" ng-click="...">Click me!</span>
<span ng-if="!clickable">Cant click me!</span>
If I were in such a situation, I would not try to enable or disable ng-click attribute. Rather, I would use some flag variable with the $scope to see if click function should perform its functionality or not like in your controller you have a method like
$scope.spanClick = function(){
if(!$scope.shouldClick){
return;//simply do nothing
}
//Do button click logic
}
When i use Angular to dynamic change div 's backgroundImage, i find there are two ways to set backgrond-image:
first:
<div style="background:url({{example_expression}})"></div>
the second:
<div ng-style="{backgroundImage: 'url({{example_expression}})'}"></div>
But when i change example_expression, only the first way can dynamically change the backgroundImage.
There is a example in Plunker
What's wrong with ngStyle?
ng-style should not contain {{}} interpolation directive, you could directly access scope variable there. Also backgroundImage should be 'background-image'
Markup
<div ng-style="{'background-image': 'url('+ example_expression+')'}"></div>
Demo Plunkr
In my JSF 2 Primeface application I have following file upload component.
<p:fileUpload id="related_image" fileUploadListener="#{fileUploadController.handleFileUpload}"
mode="advance"
auto="false"
showButtons="false"
sizeLimit="100000"
fileLimit ="1"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
style="width: 310px"/>
I want to remove progress bar from this component so I am doing
.progress {
display: none;
}
and this work but I want to remove the progress bar attached to this file upload component only and not from my entire application, so I tried
#related_image .progress{
display:none;
}
but this doesnt work, any clue guys?
Your <p:fileUpload> component can have prepended id. View the generated HTML output after deploying and check for the actual id of the component.
<p:fileUpload> is in some form (or in other wrapping component e.g. <p:panel>). Primefaces automatically add forms id to components inside this form. So the actual id of <p:fileUpload> probably looks like id="formID:fileUpID" and thats why it can't find #fileUpID.
Note: You can disable prepending ids by prependId="false" attribute.
Note 2: You can also try to specify styleClass for the <p:fileUpload>, which you can style in CSS.
First, you got an extra space in
\#related_image .progress{
the selector should be
#related_image.progress{
Second, if the fileUpload component really has prefixed id (as the Fallup suggests) you need to escape the colon from the id in the css selector - see e.g. Handling a colon in an element ID in a CSS selector for this.
in general (in css you need to escape the colon with \3a Handling a colon in an element ID in a CSS selector , while in jquery you should use \\:)
#some_prefix_id\3a your_file_upload_component_id .someClass{
display:none;
}
where the some_prefix_id might be some form id or some naming
container id ,
Although , INMO a better approach would be assigning an id to your form and using this selector in css :
#your_form_id .someClass{
display:none;
}