-1

I want to have only 6 items in one row, i don't want another 6 in next row. So the plan is to show 6 items in one row and button see more or something that will take user to another page where all items will be displayed. This is my code:

   <div class="flex-div">            
        <c:forEach var="book" items="${bookList}">
            <div><img src="Images/book${book.imageId}.png" alt="book"
                  height="190px" width="150px"/></div>
            <div id="book-title">${book.title}</div>
            <div id="book-price">${book.price}$</div> 
        </c:forEach>           
    </div>

and css:

.flex-div{
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;

}

What should i do?

nemke nemke
  • 191
  • 1
  • 1
  • 9
  • 1
    You can add `varStatus="loop"`under your `c:forEach` then use ` //Your divs which you need to show ` Then outside `c:foreach` you can add ` View More `. Also check [this](https://stackoverflow.com/questions/18825950/how-to-get-a-index-value-from-foreach-loop-in-jstl) post. – Swati Aug 19 '20 at 17:53
  • @Swati i just add `begin="0" end="5"` in `c:forEach` :D totally forgot about that feature. – nemke nemke Aug 19 '20 at 18:24

1 Answers1

1

flexbox will not stop at a certain number by itself, this problem needs a solution by your other language, it seems you are using JSP which im not familiar with, but you have to provide the flexbox only 6 items, and then do and (if-else) after flexbox to check if your items count is above 6, then you show "show more" other than that, css can't do logic like that.

Menawer
  • 843
  • 4
  • 12
  • I'm using java as back-end. Okay i see your point, is there maybe css option to stop flexbox or should i do everything in java? :D – nemke nemke Aug 19 '20 at 17:31
  • yes you have to do it in java, because if you try to hide it from CSS, it will still be in the DOM which you can see in the inspector, which is not how you should really do it. – Menawer Aug 19 '20 at 17:34