Getting nested Containers with HTMX infinite scroll

Using Django Templates & Frontend
1

Hi, so i was implementing inifinte scroll with htmx, and it works well, but the problem is it nests the containers inside one after another.

My code:

<div class="flexbox-container infinite-container">

{% for item in prods %}


{% if forloop.last %} 
<div class="flexbox-item infinite-item" 
hx-get="{% if cat %}
          {% url 'home-category-view' category=cat %}?page={{ page_obj.number|add:1 }}
         {% else %}
             {% url 'home-view' %}?page={{ page_obj.number|add:1 }}
         {% endif %}"


hx-trigger="revealed" 
hx-swap="afterend" 
hx-target="this">
{% else %} 
<div class="flexbox-item infinite-item">
{% endif %} 

 <a href="/{{item.slug}}"><img src="{{item.image.url}}"></a>
 <div class="Main-Info">
   <div class = "Shop"><b>{{item.shop}}</b></div>
   <div class = "Title">{{item.title | truncatechars:29}}</div>
   
   <div class = "Price">
     
     

   {% if user.is_authenticated %}
   
     <button id="like-unlike-{{item.id}}" name = "item-id" link = "/{{item.slug}}" value = "{{item.id}}" class = 'btn btn-primary'> {{item.no_of_likes}} <i class="fa fa-heart small-heart"></i> </button>
   
   {% else %}

   <i class="fa fa-heart small-heart" link = "/{{item.slug}}" style="font-size: 24px;"></i> 

   {% endif %}


   {% if item.price == 0 %}

   <a href="/{{item.slug}}" target="_blank"><b>"Click Here To Find Price" </b></div> </a>

   {% elif item.country == "USA" %}

   <a href="/{{item.slug}}" target="_blank"><b>${{item.price}}</b></div></a>

   {% else %}


   <a href="/{{item.slug}}" target="_blank"><b>£{{item.price}}</b></div></a> 
 
   {% endif %}
   



 </div>


</div>


{% endfor %}

</div>

what i get with the above code

<div class = flexbox-container.infinite-container>

	<div class = flexbox-item infinite item>
	<div class = flexbox-item infinite item>
	<div class = flexbox-item infinite item>
	
	<div class = flexbox-container.infinite-container>
		<div class = flexbox-item infinite item>
		<div class = flexbox-item infinite item>
		<div class = flexbox-item infinite item>	

	        <div class = flexbox-container.infinite-container>
		      <div class = flexbox-item infinite item>
		     <div class = flexbox-item infinite item>
		     <div class = flexbox-item infinite item>	
and so on....

What i really want is below

<div class = flexbox-container.infinite-container>
		<div class = flexbox-item infinite item>
		<div class = flexbox-item infinite item>
		<div class = flexbox-item infinite item>	
		<div class = flexbox-item infinite item>
		<div class = flexbox-item infinite item>
		<div class = flexbox-item infinite item>	
		<div class = flexbox-item infinite item>
		<div class = flexbox-item infinite item>
		<div class = flexbox-item infinite item>	
and so on.... as i scroll down

Thanks

2

Ok i finally fixed it, just put styling on the #main-base-content and remove the flebox-container div and thats it.

yesss, thanks a lot :slight_smile: