Using Sitecore (7) & MVC, I'd like to know how to add a css class attribute for an image to the field renderer in sitecore.
Without Sitecore it looks like this:
<div class="background-container">
<img src="/images/background-1.jpg" class="background">
</div>
With Sitecore:
<div class="background-container">
#Html.Sitecore().Field(Constants.Fields.HomeBackgroundImage)
</div>
There doesn't seem to be a way to add the class background to the image itself in Sitecore. Is there another way to do this?
Thanks.
This was what I was looking for:
#Html.Sitecore().Field("MyFieldName", myItem, new { Parameters = new SafeDictionary<string> { { "enclosing-tag", "h2" } } })
See Extending the Sitecore RenderField pipeline.
Related
I am trying to change css class name from angular controller if else loop.
Here is my controller
angular.forEach(data,function(event,key){
var today = new Date();
var notifyDates = new Date(event.notifyDate);
console.log(today);
$scope.cssClass='badge-important';
if(notifyDates>today){
if(cssClass=='badge-important')
cssClass = "badge-important2";
}
});
css
.badge-important2 {
background-color:yellow
}
If the condition satisfies i need to change css class to something else.I am doing this because if i use directly the badge-important css class it will be applied for every html element.I need to apply style only if the condition satisfies.I have no idea how to achieve this.Can anyone help me with this?
You can make use of ng-class directive in template.
For example:
<div ng-controller="AppController as app">
<div ng-repeat="event in app.data"
ng-class="event.notifyDate > app.today ?
'badge-important2' :
'badge-important'">
{{event.name}}
</div>
</div>
Here's a working fiddle.
into controller
$scope.isMoreImportant = (notifyDates>today && cssClass=='badge-important' )
into HTML page
ng-class="{'badge-important2':isMoreImportant}"
With the introduction of custom properties in CSS 4, I would like to bind them in Angular.
Normally, one would use custom properties like so:
<div style="--custom:red;">
<div style="background-color: var(--custom);">
hello
</div>
</div>
However, when using Angular's binding mechanism, it does not result in a red rectangle:
<div [style.--custom]="'red'">
<div style="background-color: var(--custom);">
hello
</div>
</div>
So how do I bind custom properties?
I think you currently cannot bind that easy, BUT there's a work around.
As custom properties benefit from cascading you could set the property in your component and use it elsewhere inside it.
constructor(
private elementRef: ElementRef
) { }
ngOnInit() {
this.elementRef.nativeElement.style.setProperty('--custom', 'red');
}
I took it from here https://github.com/angular/angular/issues/9343#issuecomment-312035896, but the renderer solution is not working for me
I want to transclude html in a component, similar on how angularjs does with transclude:true (directives).
Suppose I have this html
<div wicket:id="myComponent> My content </div>
I want the component to write "My content" where I specify.
In MyComponent.html:
<wicket:panel>
//Some other code
TRANSCLUDE HERE: "My content" should be here.
</wicket:panel>
Thanks in advance
This is what org.apache.wicket.markup.html.border.Border component does.
The markup of a Border looks like:
<wicket:border>
// some HTML with or without wicket:id here
<wicket:body/>
// some more HTML with or without wicket:id here
<wicket:border>
At the usage site you have:
<div wicket:id="myborder">
// anything here will replace <wicket:body/> in the snippet above
</div>
I've read around a little bit and have a good start to what I ultimately want. This was helpful, along with another article which I forgot the link to. However, everything I've read ADDS a CSS class or property to an element. I want to CHANGE a property of an existing CSS class, but I don't know how to target it.
I think I want to use ng-class in one of these use cases taken from the Angular documentation:
If the expression evaluates to a string, the string should be one or more space-delimited class names.
If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name.
My existing code uses ng-class along with some controller logic.
HTML
<div ng-controller="ngToggle">
<div ng-class="{'inset-gray-border' : style}">
<div class="subcontainer" ng-click="toggleStyle()">{{item.name}}</div>
</div>
</div>
This currently adds the inset-gray-border class to the nested div, but I just want to change the border property in the subcontainer class.
Controller
angular.module('app').controller('ngToggle', ['$scope', function($scope) {
$scope.style = false;
$scope.toggleStyle = function() {
$scope.style = $scope.style === false ? true: false;
};
}]);
I considered using a directive, but I believe that would be overkill. I think this can be achieved in a controller.
EDIT: After further research I think jQLite can do the trick, but that would probably require a directive.
CHANGE a property of an existing CSS class
Add a css rule that does that using the new class you added using ng-class. The specificity will over ride the original rule
.subcontainer{
color : blue
}
.inset-gray-border .subcontainer{
color:red
}
Instead of a big toggleStyle function, you can write that stuff in UI side only.
Here is fiddle. As you want to change border property of .subcontainer, Overwrite that property by adding .insert-gray-border
<div ng-controller="ngToggle">
<div >
<div ng-class="{'subcontainer':true,'inset-gray-border' : style}" ng-click="style=!style">{{item.name}}</div>
</div>
</div>
The benifit of this is , it uses local scope instead of controller scope.
The best bet would be to have two CSS classes defined, one for the base (untoggled) case, another with all the properties that you want for when the property is toggled on.
In this case you may want something like:
.container .subcontainer {}
.container .subcontainer-bordered { border: solid 1px #123456}
Then your HTML code be updated to reflect this structure
<div ng-controller="ngToggle">
<div class="container">
<div class="subcontainer" ng-class="{'subcontainer-bordered': style}" ng-click="style = !style">{{item.name}}</div>
</div>
</div>
Im new to mvc so this I am sure is a stupid question.
I have created a view that looks something simlar to
#using(Html.BeginForm())
{
#Html.RoundedCorner()
{
<h1>Hello world</h1>
}
}
Rounded corner is a just a helper class to create a nice looking rounded corner css box. When the page is rendered the form is created and also the rounded css box is applied however so does the text
MyProductName.Helpers.RoundedCorner
I assume this is because im doing something wrong but what? any tips?
You haven't shown how does your RoundedCorner helper look like but because I have some souvenirs of having written something like this you seem to be missing a using statement:
#using(Html.BeginForm())
{
using (Html.RoundedCorner())
{
<h1>Hello world</h1>
}
}