It's difficult to see for me if your when statements in your choose is empty or if you have a non-breaking space in between. But in XSLT you can have empty tags, if you have e.g a div tag for some styling reason but it has no content, it will perceive it asaself-closing tag. So you need to add som content to it, and what I normally do in XSLT when I need an empty div tag e.g I add a non-breaking space like this.
<div> </div>
So if you don´t have any content in your when statements you could try this and see if it´s goes better.
Just to be clear: You're not actually getting nested <div> tags - if you view the source code (the actual source-code; not the DOM Inspector's interpretation) you'll most likely see that your tags are of the self-closing kind, e.g.:
<div id="someId" />
<div class="someClass" />
...
Since <div> tags are required to have an end tag, the browser will treat them as start tags and do its own guessing as to where they're supposed to close. That's what you see when you open the DOM Inspector.
Now, the reason for them being output as self-closing is because in XML there's no difference between <div></div> and <div /> so when serialising the output tree (that's the parser-lingo for writing the result of the transformation to the browser :) the XSLT processor sees that the <div> element has no content, thus it'll just output a single self-closing <div> tag, unless it knows that you want to output HTML instead of XML - and you can actually tell it to do that, if you so like.
If you need to output empty <div> elements (e.g., for styling purposes) you can either do as Mads and Dennis has suggested and output either a comment or a non-breaking space character into the <div>, OR you can instruct the processor to output HTML instead of XML - you do that with the method attribute on the <xsl:output> element:
Xslt generates a nested html tags while all items are separated in XSLT
Hi,
I have a loop in my xslt to generate different divs but for some reason its nesting all divs inside each other!!
Xslt code:
and the my output HTML is:
Any suggestions?
Hi, it's because XSLT automatically collapses empty tags.
The above div, contains no content, only attributes. If you insert an
within the div it'll all work out nice for ya!
Hi Amir,
It's difficult to see for me if your when statements in your choose is empty or if you have a non-breaking space in between. But in XSLT you can have empty tags, if you have e.g a div tag for some styling reason but it has no content, it will perceive it as a self-closing tag. So you need to add som content to it, and what I normally do in XSLT when I need an empty div tag e.g I add a non-breaking space like this.
<div> </div>
So if you don´t have any content in your when statements you could try this and see if it´s goes better.
<div>
<xsl:attribute name="id">
<xsl:text>showcaseInterior</xsl:text>
</xsl:attribute>
<xsl:attribute name="class">
<xsl:text>jumbotron</xsl:text>
</xsl:attribute>
<xsl:variable name="interiorDesignItem" select="umbraco.library:GetXmlNodeById($currentPage/interiorDesign/MultiNodePicker/nodeId)"/>
<xsl:if test="$interiorDesignItem/interiorImages/MultiNodePicker/nodeId != ''">
<xsl:for-each select="$interiorDesignItem/interiorImages/MultiNodePicker/nodeId">
<xsl:variable name="thisItem" select="umbraco.library:GetMedia(./text(),0)"/>
<xsl:if test="$thisItem/typpe = 178" >
<div>
<xsl:attribute name="class">
<xsl:text>col-sm-4</xsl:text>
</xsl:attribute>
<xsl:attribute name="style">
<xsl:choose>
<xsl:when test="$thisItem/umbracoFile = ''"> </xsl:when>
<xsl:otherwise>
<xsl:text>background-image: url(</xsl:text>
<xsl:value-of select="$thisItem/umbracoFile"/>
<xsl:text>);</xsl:text>
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
</div>
</xsl:if>
<xsl:if test="$thisItem/typpe = 179" >
<div>
<xsl:attribute name="class">
<xsl:text>col-sm-5</xsl:text>
</xsl:attribute>
<xsl:attribute name="style">
<xsl:choose>
<xsl:when test="$thisItem/umbracoFile = ''"> </xsl:when>
<xsl:otherwise>
<xsl:text>background-image: url(</xsl:text>
<xsl:value-of select="$thisItem/umbracoFile"/>
<xsl:text>);</xsl:text>
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
</div>
</xsl:if>
<xsl:if test="$thisItem/typpe = 180" >
<div>
<xsl:attribute name="class">
<xsl:text>col-sm-7</xsl:text>
</xsl:attribute>
<xsl:attribute name="style">
<xsl:choose>
<xsl:when test="$thisItem/umbracoFile = ''"> </xsl:when>
<xsl:otherwise>
<xsl:text>background-image: url(</xsl:text>
<xsl:value-of select="$thisItem/umbracoFile"/>
<xsl:text>);</xsl:text>
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
</div>
</xsl:if>
</xsl:for-each>
</xsl:if>
</div>
Hope this can help you.
/Dennis
Hi Amir,
Just to be clear: You're not actually getting nested
<div>tags - if you view the source code (the actual source-code; not the DOM Inspector's interpretation) you'll most likely see that your tags are of the self-closing kind, e.g.:Since
<div>tags are required to have an end tag, the browser will treat them as start tags and do its own guessing as to where they're supposed to close. That's what you see when you open the DOM Inspector.Now, the reason for them being output as self-closing is because in XML there's no difference between
<div></div>and<div />so when serialising the output tree (that's the parser-lingo for writing the result of the transformation to the browser :) the XSLT processor sees that the<div>element has no content, thus it'll just output a single self-closing<div>tag, unless it knows that you want to output HTML instead of XML - and you can actually tell it to do that, if you so like.If you need to output empty
<div>elements (e.g., for styling purposes) you can either do as Mads and Dennis has suggested and output either a comment or a non-breaking space character into the<div>, OR you can instruct the processor to output HTML instead of XML - you do that with the method attribute on the <xsl:output> element:Hope that clears some of the initial confusion! :-)
/Chriztian
Thanks guys, All answers were correct and solved my problem
is working on a reply...