EPiServer:Property Internal DIV id tag

Danny Walker

Vote:

Hi Guys,

A quick question and hopefully some advise. We know that when we use an EPiServer:Property tag linked to an XHTML String we get that extra containing div in the resultant markup. We also know to add css classes to this div with the cssClass attribute.

However, is there a way to ad an id tag to the resultant markup?

Consider the following simple example

<EPiServer:Property ID="middle_col_prop" CssClass="MyClass" PropertyName="middle_col" EnableViewState="false" runat="server" />

The middle_col page property is a standard XHTML String. This outputs :

<div class="MyClass">
    <p>My Content</p>
</div>

But what I really want is :

<div id="middle_column" class="MyClass">
    <p>My Content.</p>
</div>

Anyone have any ideas? I've been digging through the listed properties in the SDK but can't seem to figure this one out...

#55525

Dec 06, 2011 14:58

Magnus Rahl

Vote:

What if you just wrap the Property control in your div and skip the CssClass on the Property control?

#55527

Dec 06, 2011 15:35

Joshua Folkerts

Vote:

Hey Danny, This can't be done what you are looking at doing. Look at writing your own custom control for rendering it. I think Andres had wrote something that allows you do this. If you don't want to write your rendering control, Magnus's idea is really the only way you can do it. I think it would render like this though if I am not mistaken

<div id="middle_column" class="MyClass">
    <div>
        <p>this is our content</p>
    </div>
</div>

#55653

Dec 11, 2011 5:15

Danny Walker

Vote:

Thanks for the responses guys.

I can appriciate that the containing div approach is best, especially considering the on-page editing, as the container ensures the editing box is placed in the correct place.

My only consideration though is that extra containers tend to push the mark up out, and coming from a php background I know how quickly you can end up with umpteen containers that will eventually start causing issues with screen readers ect. Because of this I try to make my markup as clean as possible, with the minimum amount of layers and containers.

There is another solution though. I have recently been working to (attempted to!) master the EPiServer PropertyAdapters, so in order to explore both ways of working, I will look at extending the display adaptor with a property that will allow me to pass a string for the div's id.

I'll post back and mark the answers once my experiments are done.

Thanks for the replys guys! Most helpful!

#55704

Dec 13, 2011 18:17

James Patterson

Vote:

I'm a bit late to the conversation but I think this can be done by setting the CustomTagName property on the EPiServer:Property controlto an empty string. This will stop the Property control from outputting the exterior DIV leaving you to add your own surrounding DIV with class and ID.

#56539

Jan 25, 2012 16:48