Home → XSLT Formats →

Controlling Number of Columns for a Bootstrap Site

• Edit

aehsan

09 Jul, 2014 04:20 PM

Hello,

We are trying to build a Responsive Bootstrap site. We have an XSLT script that outputs columns of data on a page. We would like to limit it to three columns per row. Once three columns are done in a row, we would like a new row started.

To that we have started a script that works just fine as long as we do not introduce a count.

I am attaching the XSLT script and XML from the page.

Any suggestions on how best to do it will be greatly appreciated. If it is something you can not help with, please close the ticket.

Thanks,

Akbar

• bootstrap-columns-xslt.txt 1.49 KB
• bootstrap-columns-xml.txt 5.66 KB

1. 1 Posted by Charlie Holder on 10 Jul, 2014 02:10 PM

   

   Hey Akbar --

   In your XML I see four possible columns. Once the row has three columns, should the next row be set to the full 12 column width?

   I'm thinking you use a combination of mod, count(), and position() to determine if a new row comes in and how large the columns should be for each row.

   Maybe create an <xsl:template> that creates a row and create an <xsl:template> that creates a column. You can pass the XML structure and some information to the templates to determine what parameters should be used (i.e. data and column sizes).

   If the position() mod 3 is 0, then you've reached the end of your row. At that point you'd want to count how many rows you potentially have left. If it's 3 or more, create a new row with columns of size 4. If it's less, you can take the count() and subtract the position() to get how many are left and then divide out how large the columns should be for what's left.

   Let me know if that makes sense or what you think.
   Thanks!

   • Edit

2. 2 Posted by aehsan on 10 Jul, 2014 02:26 PM

   

   Hi,

   Thanks. Please close this support request. I am not a very advanced user of XSLT. I could not follow your complex explanation. So, I did it in a simpler way.

   In order to control the size of the page, we are just allowing six columns, three on each row. So, I did it in a simpler way. I defined a variable with a value of 4. I created two templates with different modes. Went over the same data twice. The first template just creates three rows and the second template the remaining rows. Here is the scripts:

   <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
   <xsl:variable name="count" select="4"/>    
   <!-- Match on the root system-index-block XML node -->
   <xsl:template match="/system-index-block">
       <!-- Apply available template to the system-page XML node -->
       <xsl:apply-templates select="calling-page/system-page"/>
   </xsl:template>
       
   <!-- Match on the system-page XML node -->
   <xsl:template match="system-page">
       <!-- Apply available template to the system-data-structure XML node -->
       <xsl:apply-templates select="system-data-structure"/>
   </xsl:template>
       
   <!-- Match on the system-data-structure XML node -->
   <xsl:template match="system-data-structure">
       <!-- XHTML code for the region -->
       <h1><xsl:value-of select="body-title"/></h1>
       <xsl:copy-of select="body-content/node()"/>
           <div class="row">
               <xsl:apply-templates mode="first-three" select="data-rows"/>
           </div>
           <div class="row">
               <xsl:apply-templates mode="remaining" select="data-rows"/>
           </div>
   </xsl:template>
   
   <xsl:template match="data-rows" mode="first-three">
   
   <xsl:if test="position() &lt; $count">    
       <div class="col-md-4">
           <h2><xsl:value-of select="header"/></h2>
           <p>
               <img alt="{header}" class="img-responsive" src="{image/path}" style="float:left; margin-right: 5px; margin-top: 5px;"/>
               <xsl:value-of select="content"/>
           </p>
           <p><a class="btn btn-default" href="{url}" role="button" target="_blank">View Details &#187;</a></p>
       </div>
   </xsl:if> 
   </xsl:template>
   
   <xsl:template match="data-rows" mode="remaining">
   <xsl:if test="position() &gt;= $count">    
       <div class="col-md-4">
           <h2><xsl:value-of select="header"/></h2>
           <p>
               <img alt="{header}" class="img-responsive" src="{image/path}" style="float:left; margin-right: 5px; margin-top: 5px;"/>
               <xsl:value-of select="content"/>
           </p>
           <p><a class="btn btn-default" href="{url}" role="button" target="_blank">View Details &#187;</a></p>
       </div>
   </xsl:if>
   </xsl:template>
   
   </xsl:stylesheet>
   

   Thanks,

   Akbar

   • Edit

3. 3 Posted by Charlie Holder on 10 Jul, 2014 02:38 PM

   

   Will you always have 6 columns? If not, this method might not be ideal because it will always assign a width of 4 to the column. Would you prefer all the rows to be balanced if there are not going to be 3 columns on the row?

   • Edit

4. 4 Posted by aehsan on 10 Jul, 2014 02:58 PM

   

   Hello,

   I understand this is not an ideal solution. But for the home page the number of data-rows will not exceed 6. The idea is to make all the rows stackable when we view it on mobile devices and tablets.

   My XSLT scripting skills are rather limited and the solution you are recommending is ideal but more complex for me. If you have an example I could look at, that will be great. If not, my simple solution works for now. Once I get better at XSLT scripting, I will try your approach.

   Thanks,

   Akbar

   • Edit

5. 5 Posted by Charlie Holder on 10 Jul, 2014 03:00 PM

   

   No worries. I'll try to block off some time this afternoon to write some code that might help.

   • Edit

6. 6 Posted by aehsan on 10 Jul, 2014 03:03 PM

   

   Thanks for taking time to do that. That might make our design more flexible.

   Akbar

   • Edit

7. Ryan Griffith closed this discussion on 11 Nov, 2014 06:45 PM.

8. Charlie Holder re-opened this discussion on 18 Feb, 2015 10:39 PM

9. 7 Posted by Charlie Holder on 18 Feb, 2015 10:39 PM

   

   Hey Akbar --

   A situation came up where I needed to revisit this problem. I know it's been a while, but I wanted to share with you the solution that I ended up with.

   <xsl:stylesheet
       xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
       <xsl:output indent="yes" omit-xml-declaration="yes"/>
       <xsl:template match="/system-index-block/calling-page/system-page">
           <div class="row">
               <div class="col-xs-12">
                   <h1>
                       <xsl:value-of select="title"/>
                   </h1>
               </div>
           </div>
           <xsl:apply-templates select="system-data-structure/row"/>
       </xsl:template>
       <xsl:template match="row">
           <hr/>
           <div class="row">
               <xsl:variable name="numColumns" select="count(content)"/>
               <xsl:apply-templates select="content">
                   <xsl:with-param name="width" select="12 div $numColumns"/>
               </xsl:apply-templates>
           </div>
       </xsl:template>
       <xsl:template match="content">
           <xsl:param name="width"/>
           <div class="col-xs-12 col-md-{$width}">
               <xsl:copy-of select="node()"/>
           </div>
       </xsl:template>
   </xsl:stylesheet>
   

   This code allows for you to have a dynamic number of rows with a dynamic number of content columns in each row. The columns will only balance evenly if you allow for 1-4 WYSIWYGs (set a min/max in the Data Definition). It will automatically assign the correct column width.

   Here is the corresponding Data Definition as well:

   <system-data-structure>
       <group identifier="row" label="Row" multiple="true" maximum-number="4" collapsed="true">
           <text wysiwyg="true" identifier="content" label="Content Column" multiple="true" maximum-number="4" required="true"/>
       </group>
   </system-data-structure>
   

   I will be leading a webinar and I've written a blog post (to be published along with the websinar) on the topic. The webinar is scheduled for March 24, 2015 at 2pm ET. If you're interested in attending I can send you some details once we finalize them.

   Thanks.

   • Edit

10. Tim closed this discussion on 04 May, 2015 06:30 PM.