Jump to:

3447 Posts in 1032 Topics by 872 members

Template Questions

SilverStripe Forums » Template Questions » Silverstripe 3 templates not preserving white space: breaking inline block elements

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

Page: 1
Go to End
Author Topic: 569 Views
  • IslandInteractive
    Avatar
    Community Member
    1 Post

    Silverstripe 3 templates not preserving white space: breaking inline block elements Link to this post

    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?

    569 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.