I'm displaying 40 buttons using forEach , but all the buttons are displayed in one row. I wanted to print 10 buttons per line.

Here's the sample code.

<c:forEach var="loop" begin="1" end="40">
<c:choose>
  <c:when test='${fn:contains(list, loop)}'>
<input type="button" value="${loop}" disabled="disabled" />
 </c:when> 
  <c:otherwise>
       <input type="button" value="${loop}"  >
    </c:otherwise> 
</c:choose>
</c:forEach>

CodePudding user response：

You can insert a new line (<br />) every 10 items.

<c:forEach var="loop" begin="1" end="40">
  <c:choose>
    (...)
    <c:if test="${loop eq 0}">
       <br />
    </c:if>
</c:choose>
</c:forEach>

CodePudding user response：

By using a grid in css.

.button-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto;
  grid-column-gap: 7px;
  grid-row-gap: 7px;
}

<div class="button-container">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
 <input type="button">
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>