Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Template Questions /

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Silverstripe 3 templates not preserving white space: breaking inline block elements


Go to End


1936 Views

Avatar
IslandInteractive

Community Member, 1 Post

24 April 2013 at 1:08am

I'm trying to iterate over a list in a template using <% loop %> to produce a few boxes to display inline-block. The sum of the boxes needs to occupy the full width of the parent container. White space between elements in the HTML causes a gap (http://css-tricks.com/fighting-the-space-between-inline-block-elements/) which in turn causes the last element in the list to wrap to the next line.

Floats won't do because the boxes need to be vertical-align: middle as it's a fluid width template and the box heights change depending on window width.

The solution I've been using in 2.4 is to place HTML comments between the start and end of each element to remove the white space. Example template:

<div class="breadcrumbs"><!--
    <% loop $Steps %>
        --><div class="step">
            
        </div><!--
    <% end_loop %>
--></div>

However in the rendered HTML the start comments are pushed down to the next line which introduces a space and gives the following HTML:

<div class="breadcrumbs">
<!--
    
        --><div class="step">
            
        </div>
<!--
    
        --><div class="step">
            
        </div>
<!--
    
        --><div class="step">
            
        </div>
<!--
    
-->
</div>

Another solution that worked in 2.4 was to remove the line breaks between the elements:

<div class="breadcrumbs">
    <% loop $Steps %><div class="step">

    </div><% end_loop %>
</div>

Or even:

<div class="breadcrumbs">
    <% loop $Steps %><div class="step"></div><% end_loop %>
</div>

But again the template parser in SS3 is pushing the next block onto the next line:

<div class="breadcrumbs">
    <div class="step">

    </div>
<div class="step">

    </div>
<div class="step">

    </div>
</div>

Can anyone think of a workaround to get a row of <% loop %>ed boxes to display inline-block and occupy the full width of the parent container? Also should I report this as a bug?