How to give page components a unique ID?

Hi,

Simple question:

In the output HTML SitePublisher/LiveSite creates a DIV tag for each component placed in a page; something like

<div style="width:964px;min-height:35px;height:auto !important;height:35px;margin:1px 18px 0 8px;display:inline;float:left;" class="iw_component">
...
</div>

Because there is no ID associated with the DIV tag, it is almost impossible to apply or modify a style for only one component using CSS only. This makes me wonder why there is no ID field in the "Component Properties" dialog ...

Has anyone else had faced this issue and managed to find a reliable and applicable way around it?

Our TeamSite version is 6.7.2 SP1.

Thanks.

Find more posts tagged with

Comments

interDev

Hi,

Simple question:

In the output HTML SitePublisher/LiveSite creates a DIV tag for each component placed in a page; something like

<div style="width:964px;min-height:35px;height:auto !important;height:35px;margin:1px 18px 0 8px;display:inline;float:left;" class="iw_component">
...
</div>

Because there is no ID associated with the DIV tag, it is almost impossible to apply or modify a style for only one component using CSS only. This makes me wonder why there is no ID field in the "Component Properties" dialog ...

Has anyone else had faced this issue and managed to find a reliable and applicable way around it?

Our TeamSite version is 6.7.2 SP1.

Thanks.

what kind of layouts are you using (fixed width layouts?)?
there is always an ID associated with the compoenents usually of this format
[html]

[/html]
Also why would you change the styles only for the specific component? You can always mention component specific styles in Skin itself.

vahid

Thanks for the reply.

I understand that in "fixed area layout" you'll get an ID for each component, but my question was about the "div layout", sorry that left it out. In "div layout" no ID is given to the DIV tags. (Even for "fixed area layout" the random ID that is generated is not much helpful; as it is not extensible and there is no semantics behind it).

And as for not wanting to put the "div layout" styles in the skin, we would like to be able to dynamically change the style depending on the browser and the device that is loading the page. We could not achieve that if we put the style in the skin.

Any other thoughts?

Thanks.

interDev

Thanks for the reply.

I understand that in "fixed area layout" you'll get an ID for each component, but my question was about the "div layout", sorry that left it out. In "div layout" no ID is given to the DIV tags. (Even for "fixed area layout" the random ID that is generated is not much helpful; as it is not extensible and there is no semantics behind it).

And as for not wanting to put the "div layout" styles in the skin, we would like to be able to dynamically change the style depending on the browser and the device that is loading the page. We could not achieve that if we put the style in the skin.

Any other thoughts?

Thanks.

The ID is even generated for DIV based layouts.

Coming to your actual problem, Why cann't you mention the styles in Appearance XML and read those Appearance XML styles in the Appearance section (put a check in Appearance to load specific style based on the browser). This should work as browser specific styles will be loaded.

Share some additional information if i am giving too generalized statement.

Stokes

Also, if this is a custom component that you're trying to identify, you can always include an id in your own div withing the component XSL, using the unique ID of the component.

E.g.:


<div class="MyComponentClass">
  <xsl:attribute name="id">C_<xsl:value-of select='/Properties/@ComponentID' />_div</xsl:attribute>
  ...
</div>

Lots of built-in components do this.

Stokes.

vahid

@interDev

Well I don't think putting the style in the Appearance XML would work for me. Because every time a style change has to be made we would have to update the component and hence all the pages that use this component.

Plus, I'm not so sure if I understand how this would resolve my problem. What is causing me trouble is the DIV that is automatically put around each component by SitePublisher that has the class="iw_component" attribute. Could you please elaborate?

Here's a more concrete example:
Let's say I use the default out of the box Basic Content component in my page. I'd like to use "media queries" in my external CSS file so when the browser width changes the width of this Basic Content component changes accordingly so the whole content is visible in the browser window (instead of making the browser add a horizontal scroll bar). When I add the component in the HTML source I see

<div style="width:600px;min-height:300px;height:auto !important;height:300px;margin:10px 0 0 100px;display:inline;float:left;" class="iw_component">
...
</div>

around the component. I don't know of any way of modifying the style of this DIV on the fly in my external CSS.

I hope it makes more sense now.

@Stokes

Correct. I know that I can add DIV's in my custome components, but that doesn't help solving the issue. As I mentioned above SitePublisher puts another DIV around my definition on which I don't have any control:


<div style="width:964px;min-height:35px;height:auto !important;height:35px;margin:1px 18px 0 8px;display:inline;float:left;" class="iw_component">
  <div class="MyComponentClass">
    <xsl:attribute name="id">C_<xsl:value-of select='/Properties/@ComponentID' />_div</xsl:attribute>
    ...
  </div>
</div>

And changing the style for individual DIV's like this is what I'd like to be able to do.

Thanks.

Migrateduser

Well I don't think putting the style in the Appearance XML would work for me. Because every time a style change has to be made we would have to update the component and hence all the pages that use this component.

If you externalize the style and the xsl you can change it all day long and never need to update the component. The effects are immediate.

FixedWidthTable.rptdesign

vahid

My mistake. You are right CyberPop. In fact, we are using external XSL for our components. However, even by doing so we are still unable to solve the problem I explained in the example of previous post.

Thanks for pointing that out.

RonaldV

Vahid,

I would not try to change the iw_component-divs that are generated by LS.

There is a simple solution, simply wrap your component-html (as defined by your xsl) in a {div id='xyz'}.

Only problem that now still exists is how to set a id that is unique across the page...

Well, and you are creating a div-tag-soup that would worry a proper html-designer; but that is another problem.

Migrateduser

The div tag soup is already there, especially when using FAL. Adding the extra div with an ID works for us. Most our components are on the page only once. Our CSS guy is extremely **** and generally avoids this when possible. Instead he insists on weaker and more specific selectors, you never know when a request will come in and the need to override the CSS will arise. I digress.

And as for not wanting to put the "div layout" styles in the skin, we would like to be able to dynamically change the style depending on the browser and the device that is loading the page. We could not achieve that if we put the style in the skin. Any other thoughts?

A naming convention would allow this in the component. How you get the value into the request context is up to you, a site pre-controller maybe. It might even be there already. In the XSLT import it and use the $CONTEXT{} to insert it.

[HTML]

[/HTML]

Stokes

RonaldV, the component's ID, unique across the page, is available... see my previous post.

vahid, I'm starting to understand the problem now, and I think I've wanted the same thing before. (This is another call for some kind of parent selector in CSS, which people have been calling for for ages. e.g. "select every div.iw_component that has a child dev.MyComponent," but my understanding is that that's not coming anytime soon.)

I don't remember my exact workaround when I encountered this, but I'm pretty sure it was by switching to fixed-area layout. I think the div wrapper around the component should be thought of as more of a function of the layout for the page than a concern of the component itself. That said, I understand your need and hope someone on this forum has more insight.

Stokes.

Adam Stoller

RonaldV, the component's ID, unique across the page, is available... see my previous post..

Just curious - I thought the component id wasn't to be relied upon for site-customizations as it's not guaranteed to be the same if you migrate the store (like from DEV to QA to PROD) or if you upgrade and do an iwmigrate...
(This is in the context of using it for a CSS directive)

Stokes

Just curious - I thought the component id wasn't to be relied upon for site-customizations as it's not guaranteed to be the same if you migrate the store (like from DEV to QA to PROD) or if you upgrade and do an iwmigrate...
(This is in the context of using it for a CSS directive)

Good point, I think you're right.

In general, I try not to use IDs at all in CSS. The out-of-the-box components have a CSS class name as part of their appearance properties, so you can always call out a specific instance of a component using a unique classname.

Still doesn't solve vahid's desire to select the 'layout' div around the component though. I think there you've touched on a limitation of the layout, and you'd have to look at a different one to do what you need.

Stokes.

Migrateduser

Quoting RonaldV from another thread :

you can modify (or add your own) page-xsl (located in httpd\webapps\content_center\WEB-INF\classes\com\interwoven\xsl\runtime).

Would you be able to get at the layout div around the component and add implement a scheme to id these things?