Utilizing Smarty Template: Combining <li> elements from separate <ul> tags for a seamless display

On my Prestashop website, I have implemented the "Advanced Homepage Product List" module. I removed the category names from the titles to have my items sorted without displaying the category names.

Currently, this is how it appears: https://i.stack.imgur.com/Yv1p3.png

I would like the "Buy Fudgee Bar..." item to be positioned next to the "Buy 2 bioderm coolness.." item. If they can be combined into one, they will appear right next to each other, correct? :o

How can I achieve this?

Here is the Smarty template file for the module:

{assign var=zItem value=0}
{if isset($isian) AND $isian}
        {foreach from=$isian item=cat name=productCat}
    {assign var=zItem value=$zItem+1}

            {$products=$cat.produk}
            {if isset($products) && $products}
                        {counter name=active_ul assign=active_ul}
                        {include file="$style" class='homefeatured tab-pane' id='prodcat' active=$active_ul}
                        {/if}


         {/foreach}
        {else}
                <p>{l s='No featured products' mod='prodcat'}</p>
        {/if}

The final result doesn't have to necessarily be a single item. As long as "buy fudgee bar chocolate" is displayed right next to "buy 2 bioderm coolness.." and there are no blank spaces left if there are other categories. The idea is to continuously display the products without any gaps.

Answer №1

It appears that the <ul> elements do not have distinct <li> items within them. If the <ul> elements are sharing <li> items, you can try applying the following CSS:

ul li{
   display: inline-block;
}

Alternatively,

ul li{
   float:left;
}

If the <ul> elements contain separate <li> items, consider adding a CSS rule to the entire <ul> tags such as float: left or display:inline-block.

Answer №2

When the li elements do not have uniform height and you need to align them differently, follow these steps: Add the following CSS code: ul li{vertical-align:top;}

The options for vertical align values are top, middle, and bottom. By default, the value is set to bottom.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide on expanding an HTML table dynamically with MVC razor syntax

My goal is to dynamically add new rows to a table by following the advice given in this answer on Stack Overflow: Add table row in jQuery I have successfully implemented it for one of my table requirements as seen below: function onAddItem() { $( ...

The code, which is the same, placed in a different location on another page - fails to function

On the index.php page, I have successfully implemented the following code snippet at the bottom: <script type='text/javascript'> $("#tbAlegro").click(function() { window.location = 'alegro.php'; }); </script> However, ...

Before you can click on it, the dropdown menu mysteriously

After creating a header with a dropdown menu, I am facing an issue where the dropdown disappears before I can click or hover over it. Even after using transitions, the problem persists. What could be causing this? I have limited knowledge in javascript, so ...

jQuery Accordion not showing up on screen

On my FAQ page, I have integrated a jQuery Accordion with a repeater control nested inside to display various questions and answers. The FAQ page utilizes a master page named LaunchPage.Master. Here is the code for LaunchPage.Master: <html> <he ...

In Angular 16, allow only the row that corresponds to the clicked EDIT button to remain enabled, while disabling

Exploring Angular and seeking guidance on a specific task. I currently have a table structured like this: https://i.stack.imgur.com/0u5GX.png This code is used to populate the table: <tbody> <tr *ngFor="let cus of customers;" [ngClass ...

Easily collect form information from an HTML <form> element

I've been struggling to figure out how to retrieve data from an HTML form and display it in the console. What step am I overlooking? Here is the HTML code I'm working with: <!DOCTYPE html> <html> <head> <title>U ...

Interactive game created using JavaScript input

I've scoured the internet for guidance on creating a text-based game that utilizes user input, but all I come across are tutorials focusing on button interactions. What I envision is triggering different responses based on specific user inputs. For i ...

Issue with content overlapping when hamburger icon is tapped on mobile device

When the hamburger menu is pressed on smaller screens, I want my navbar to cover the entire screen. To achieve this, I included the .push class in my code (see the jQuery and CSS) to trigger when the .navbar-toggle-icon is pushed. However, after implemen ...

Semantic UI table with rowspan feature

I am a beginner with semantic ui and I have been trying to replicate this specific layout. While going through semantic ui's documentation, I found something similar but not quite identical. Below is the HTML code: <div class="ui celled grid cont ...

Loop through the <li> elements and use jQuery to update the text

Check out this HTML setup: <div class="mydiv"> <ul> <li>Text 1</li> <li>Text 2</li> </ul> <ul> <li>Text 3</li> <li>Text 4</li> </ul> <ul> < ...

Issues with Laravel 5.8 and Bootstrap not functioning properly in Jquery

Check out this link for using Bootstrap Select. The code works perfectly in the view, but when I try to implement it with jQuery below, it doesn't work. Can someone help me fix this issue? View Code: <table id="tableAppointment" style=&q ...

How can I efficiently verify page references using tools like CSS, JavaScript, and more?

I have Firebug (my team lacks Firefox) and the IE developer toolbar (IE7), but I'm struggling to easily validate if the referenced files in a page are loading. I see Javascript errors, but they don't lead me directly to the exact file in the hier ...

What is the best way to automatically create a line break once the User Input reaches the end of a Textbox?

I've been searching for a solution to this question without any luck. Here is the tag I'm working with: <input type="text" id="userText" class="userTextBox"> And here is my CSS: .userTextBox { /* Add marg ...

Is there a way I can align these items in the center of the span?

Issue at Hand: The SVG and text elements are not aligning to the center of my spans as desired. Attempts Made: I have experimented with different display modes, used margin properties for alignment, and tried adjusting text-align. I even searched for so ...

Eliminating Google Adsense from Blog Posts

In each of my posts, I manually insert one Adsense unit. Here is the code: <div id="toppostad" style="float: left"> Adsense code </div> Initially, I assigned an id to the div when placing the code with the intention of using display:none; to ...

What could be causing jQuery animate to malfunction on mobile devices when a viewport is present?

Everything seems to be working fine on my desktop webpage, but when I try it on mobile, there is no scroll... $("HTML, BODY").animate({ scrollTop: 500 }, 1000); This post suggests that mobile devices may not scroll on the body, but on the vi ...

Decrease the gap between rows in CSS Grid

I'm struggling to minimize the space between the rows. I've attempted adjusting margins and paddings to 0, but nothing seems to be working effectively. Displaying desktop view on the left and mobile view on the right side. .content{ margi ...

Leveraging CSS to automatically number nested sections

Assume we have an example HTML or XML document structured like this: <body> <section> <h1>This should be numbered 1</h1> <section> <h1>This should be numbered 1.1</h1> <p>blah& ...

Calculate the product of a JavaScript variable and a PHP variable, then show the result on the

I need to calculate the product of a PHP variable value and a JavaScript variable, then show the result on the screen. Here is my PHP code: <?php require 'config.php'; session_start(); ?> <html> <head> < ...

What steps can I take to guarantee that both images and text adapt well to different screen sizes?

Is there a way I can organize my website to display 3 movies per row with the text centered relative to the image? Here is how it currently looks (the red box is just for reference, please ignore): https://i.stack.imgur.com/w2pgN.jpg Also, when I resize m ...