search

gitana / alpaca

Alpaca provides the easiest way to generate interactive HTML5 forms for web and mobile applications. It uses JSON Schema and simple Handlebars templates to generate great looking, dynamic user interfaces on top of Twitter Bootstrap, jQuery UI, jQuery Mobile and HTML5.
http://www.alpacajs.org
Other
1.29k stars 370 forks source link

Custom Layout Template with more than 12 rows with a column each doesn't render the elements past the 12th one #548

Open zasyzen opened 7 years ago

zasyzen commented 7 years ago

There appears to be a bug with custom layout template (using the bootstrap as the parent), that uses more than 12 rows with a column for each row. I understand that bootstrap grid system and the 12 col max, but this issue is specific to alpaca incorrectly trying to stop you from having more than 12 cols by just not rendering those fields to the real DOM.

This 12+ rows with a single column is a simple example of this issue; my actual layouts are advanced enough to require the use of custom layout templates.

I am using the new bootstrap 4 grid, but this issue applies the v3 grid too. This html will render properly by itself, but alpaca won't render any section past the 12th row.

<html>
<body>
<div class="container">
  <div class="row">
    <div id="Sec32" class="col Sec32">
      <h3 class="fldsecttl">Section 1</h3>
      <div class="container">
        <div class="row">
          <div id="f210" class="col f210" data-alpaca-layout-binding="f210"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div id="Sec34" class="col Sec34">
      <h3 class="fldsecttl">Section 2</h3>
      <div class="container">
        <div class="row">
          <div id="f221" class="col f221" data-alpaca-layout-binding="f221"></div>
        </div>
        <div class="row">
          <div id="f243" class="col f243" data-alpaca-layout-binding="f243"></div>
        </div>
        <div class="row">
          <div id="f244" class="col f244" data-alpaca-layout-binding="f244"></div>
        </div>
        <div class="row">
          <div id="f245" class="col f245" data-alpaca-layout-binding="f245"></div>
        </div>
        <div class="row">
          <div id="f246" class="col f246" data-alpaca-layout-binding="f246"></div>
        </div>
        <div class="row">
          <div id="f247" class="col f247" data-alpaca-layout-binding="f247"></div>
        </div>
        <div class="row">
          <div id="f248" class="col f248" data-alpaca-layout-binding="f248"></div>
        </div>
        <div class="row">
          <div id="f249" class="col f249" data-alpaca-layout-binding="f249"></div>
        </div>
        <div class="row">
          <div id="f250" class="col f250" data-alpaca-layout-binding="f250"></div>
        </div>
        <div class="row">
          <div id="f251" class="col f251" data-alpaca-layout-binding="f251"></div>
        </div>
        <div class="row">
          <div id="f252" class="col f252" data-alpaca-layout-binding="f252"></div>
        </div>
        <div class="row">
          <div id="f253" class="col f253" data-alpaca-layout-binding="f253"></div>
        </div>
        <div class="row">
          <div id="f254" class="col f254" data-alpaca-layout-binding="f254"></div>
        </div>
        <div class="row">
          <div id="f255" class="col f255" data-alpaca-layout-binding="f255"></div>
        </div>
        <div class="row">
          <div id="f256" class="col f256" data-alpaca-layout-binding="f256"></div>
        </div>
        <div class="row">
          <div id="f257" class="col f257" data-alpaca-layout-binding="f257"></div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>