Remove <div> generated around Shared Block in EPiServer 7 - block

Episerver always wrap shared block in a tag. I would like to get rid of this. So if in my LinkBlock has a Template with only
link
I would not get a
<div>link</div>
in the view for a user.
If this is not possible how can I change <div> to any other tag, or put a CssClass on it. Like it is possible in not shared blocks:
<EPiServer:Property runat="server" PropertyName="RightContentArea" CustomTagName="aside" CssClass="column-2 sidebar"></EPiServer:Property>

I believe it is the rendering of the ContentArea property which adds the div tags around the blocks it contains.
EPiServer suggests that in order to preserve the editing functionality of the block elements themselves they need to have the div around them.
A possible solution might be for you to do your own custom rendering of content areas, but depending on the kind of block templates you're using it can be tricky to get editing to work. The example in the link is for rendering multiple blocks of the same type.

You can use the CustomTagName and CssClass properties of the Property control to format the container element.
You may also use RenderSettings to modify container elements of child elements (where applicable).

I use this trick in cshtml:
#RenderBlocks(Model.CurrentPage.Content1)
#* ---------------------------------------------------------------------------------- *#
#* Render ContentArea without addition DIVs that EpiServer embed. That breaks layout a lot. *#
#helper RenderBlocks(EPiServer.Core.ContentArea content) {
if(null != content){
var blocks = content.FilteredContents.ToArray();
foreach(var block in blocks){
#Html.PropertyFor(x => block)
}
}
}

You can choose the tag using the CustomTagName attribute on the Property Control
Alternatively, if you wanted to remove the tag, you could use a control adapter. A good example is found here

You can also create a custom content area that doesn't render the divs when edited in live mode and only renders them in edit mode.
If you only need to do this once or twice I would still recommend going with the ChildrenCustomTagName route as it's a bit mroe flexible. If you need to do this a lot and you can't change your CSS easily then I would go custom content area. If you are interested in how to remove the div's I wrote a blog post and a sample site on github here Extra divs in content area how to remove them ?

Since i wasn't able to remove the <div>'s i didn't want, i put my own CSS class on them. This did the trick for me in Webforms. (If anyone still uses it)
Use <RenderSettings ChildrenCssClass="yourCssClass" />
<EPiServer:Property runat="server" PropertyName="RightContentArea"CustomTagName="aside" CssClass="column-2 sidebar"><RenderSettings ChildrenCssClass="yourCssClass"></RenderSettings></EPiServer:Property>

Related

Vue style (background-image) binding not reactive

I want to change some part of the site based on selected language without any refresh. All worked but I have tried multiple ways to bind background-image dynamically on no refresh site language change (i18n). But no success.
<div :style="{'background-image' : mainBackground}">
test div
</div>
I have created a computed to return currently used link based on language.
mainBackground(){
return this.isTurkishSite ? 'url(/images/home/home_bg_main_tr.jpg);' : 'url(/images/home/home_bg_main.jpg);'
}
But after change site language by dropdown all other elements src are updated to use the selected language image file. But only this background path is not updating. Also style attribute is deleted on the element itself. I can not figure out why this solution not worked properly. Also rendered mainBackground computed into the div element. And returned link is updated based on language.
I have solved the problem by using class binding. 1 class for Turkish lang, and main class for all other languages. And used them in conditional class binding. Solution:
:class="[isTurkishSite ? 'bg-turkish' : '']"
It's not working because of the semicolons you put at the end of url() directives, css rules set in object notation with Vue don't require semicolons :)

Rendering an aurelia custom element in ag-grid header

Is there an "easy" way to render a custom element in ag-grid header cell? The headercomponent interface seems like an overly cumbersome approach to a seemingly simple problem and I have not been successful with this approach. The closest I have come is to use something like:
header-cell-render.bind="myHeaderRenderer"
which is currently a function returning a string of HTML. While this "works" (though I understand it is deprecated), in the sense that the html is injected into the DOM, only primitive HTML renders. Meaning I can return something like:
<input type="checkbox" />
and it will render a checkbox, but I cannot return something like:
<my-custom-element></my-custom-element>
I can see that markup in the DOM, but the element doesn't "process", that is the Aurelia aspect of the control is not executed.
I am using the latest versions of ag-grid, ag-grid-aurelia.
Any help would be greatly appreciated.
This is currently not possible out of the box with ag-grid-aurelia.
This is because ag-grid-aurelia makes no special handling for this binding. The proper way to handle this is using replaceable parts which allows you to specify a template for Aurelia to inject and consume. ag-grid makes this a bit harder since it seems the only native tool for injecting content into the header is by passing an HTML string or an HTML element in the column configuration. This can likely be added to the ag-grid-aurelia library by using a combination of replaceable parts and the #children decorator to gain access to the aurelia-rendered header element and pass it to the column configuration.

Exclude menu from content extraction with tika

I generate html documents that contain a menu and a content part. Then I want to extract the content of these document to feed it to a lucene index. However, I would like to exclude the menu from the content extraction and thus only index the content.
<div class="menu">my menu goes here</div>
<div class="content">my content goes here</div>
what is the simplest way to achieve this with apache tika?
As a more general solution (not just for you specific menu) I would advise looking at boilerpipe that deals with removing uninteresting parts from pages (menus, navigation etc).
I know it can be integrated in Solr/tika, have a look and you probably can integrate it in your scenario.
Have a look at this post which specifies how to handle DIVs during the HTML parse, by specifying whether they are safe to parse or not, in which case its ignored. For your problem, you could have some logic in the override methods which ignore only DIV elements with attribute value "menu" (i.e. tell TIKA parser this DIV is unsafe to parse).
You can parse the html with a parser to a xhtml dom object an remove the div tag cotaining the attribute class="menu".

Dojo: NumberSpinner Issue

I created this NumberSpinner widget:
<input name="form_action_fy" id="form_action_fy" value="2010"
data-dojo-type="dijit.form.NumberSpinner"
data-dojo-smallDelta="1"
data-dojo-largeDelta="1"
data-dojo-constraints="{min:2010,max:2030,places:0}" />
When I load the page, the widget shows as expected. However, there are a couple of issues:
The value is empty and not 2010.
When I press the decrease button on the empty widget, I get 9000000000000000 and when I increase on the empty widget, I get -9000000000000000. It doesn't stick to the min/max specified.
And, the smallDelta and largeDelta do not work either.
What am I doing wrong here?
Thanks
Eric
In the new widget attribute style the properties that are passed to the constructor function are all put in the data-dojo-props attribute, instead of the ad-hoc attributes of old. In the cases where the docs still point to the older declarative style you might get better luck by looking for the programatic style examples instead.
<input name="form_action_fy" id="form_action_fy"
data-dojo-type="dijit.form.NumberSpinner"
data-dojo-props="
value:2010,
smallDelta:5,
largeDelta:10,
constraints:{min:2010,max:2200,places:0}"
/>
Live example: http://jsfiddle.net/missingno/cQfFt/
Do note that in Dojo 1.6 a couple of widgets are still in transition so some attributes might need to be duplicated in prop and attribute form. Things should be allright in 1.7 though.

dijit.Menu to be displayed after DOM had been set up

I have set up in Javascript my preferred dijit.Menu which is that far so good.
How am I able to display the dijit.Menu directly after the page starts up in the (with it's position) without any mouse interaction?! I have looked in the API so far and don't find the answers. Will I have to "overwrite" a method?
If yes, which one is it? And what do I have todo???
The widget will not show up until it is parsed by dojo.
You should place fake menu markup inside its dom node:
<div dojoType="dijit.Menu">
<h1>This text is shown after the dom is loaded
and until the menu is parsed and renered</h1>
</div>
As soon as menu is ready, everything you've placed inside menu's dom node will be replaced by actual widget's html.
NON-AMD Version:
dojo.ready(function(){
// The code for all items!
})
DOJO-AMD Version, put the parameters of the modules you like to add, in require as well give them a name in the functions parameters list:
require(["dojo/domReady!"],function(){
//natve code
});