Looking to switch up the display of Ionic Infinite Scroll from vertical to horizontal orientation

Recently delving into Ionic Scroll and encountering a challenge. Finding it difficult to arrange content in a horizontal row.

To illustrate my issue, I've created a [pen](http://codepen.io/shaikmaqsood/full/zBbREr/ This is the PEN) for better understanding.

Here's the desired layout I'm aiming for

Note that the images used are random.

Although I've tried solutions provided for similar problems, they haven't proven helpful thus far.

Thank you in advance :)

Answer №1

View Screenshot Here:

.item-complex, a.item.item-complex, button.item.item-complex {
    padding: 0;
    display: inline-block;
}

Answer №2

Give this a shot

    .list{
display: -webkit-box;
display: -moz-box;
overflow: auto;
}

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

Introduce a timeout in the ajax request

I'm currently facing an issue with adding a 2-second delay between the loader icon and the success message displaying the data as html. I attempted to use setTimeout in my ajax code with a specified delay number, but it doesn't seem to be workin ...

In what ways does the process of manually extracting data differ from utilizing a GET versus POST request through jquery AJAX?

After creating a website using Python Flask that incorporates a form with two dropdowns and a slider, I am now faced with the challenge of extracting the selected values from these form elements and sending them to a python flask route using jQuery AJAX. T ...

How can you use Require.context in Webpack to import all .js files from a directory except those ending in `_test.js`?

My objective was to develop a script that accomplishes the following tasks: Import all JS files from a directory excluding those ending in _test.js Set up a module.exports containing an array of module names extracted from those imported files. Initiall ...

The image disappears when I click on a link and then return to the main page, but this only happens in Mozilla Firefox

Upon opening the main page, everything functions flawlessly. However, if I navigate to another page through one of my href links and then return to the main page, my div with the class "bild" disappears. Oddly enough, this issue only occurs in Mozilla Fire ...

I am experiencing an issue with the display inline feature not functioning properly in Firefox

I am working with Html code: <div class="login"> <form class="form-horizontal signin"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Ema ...

The issue with JQuery's JSON.stringify function not functioning as expected

Hi everyone, I'm currently working on a project involving a nested menu and I need to update it via API whenever the client moves an item. To achieve this, I am using a jQuery plugin called . The plugin includes an onDrop method as shown in the code s ...

SyntaxError: Unexpected '<' symbol found in JavaScript file while attempting to import it into an HTML document

This issue is really frustrating me In my public directory, there is an index.html file Previously, I had a newRelic script embedded within the HTML in script tags which was functioning properly Recently, I moved the script to a separate JavaScript file ...

How can I align the logo in the center of a ul

Many have attempted to resolve this issue, creating makeshift solutions or simply settling for an outcome that just "gets by." But what is the optimal approach? I have nearly finished something, yet for some reason, the logo isn't centered, rather the ...

How can I rearrange the button order in a Bootstrap table?

I'm having trouble getting this attribute to work in the table tag data-buttons-order=['paginationSwitch','refresh','toggle','fullscreen','column'] ...

On the iPad, CSS styling will not be visible if an element's width exceeds 920 pixels

I recently developed a website optimized for monitors, but when I viewed it on an iPad, the right corner was missing some CSS styles. Take a look: Here is the HTML code: <div id="nav-top"> <div class="wrapper"> <!-- To ...

What steps can I take to eliminate the initial delay when it is first invoked?

My function is being called every 10 minutes like this: var interval = self.setInterval(my_func, 600000); function my_func(){ $.ajax({ url: 'xxxxxxxx', success: function(response) { var data= JSON.parse(response); dis ...

Optimizing performance with queues and asynchronous requests in jQuery

Having two functions and facing a single issue. hideTable(); ajaxCall(params); The hideTable function is defined as follows: function hideTable() { if (effects) { $('#jquerytable tbody').fadeOut(speed); } } I am looking to ha ...

What is the best way to integrate my company's global styles CDN for development purposes into a Vue cli project using Webpack?

After attempting to import through the entry file (main.js)... import Vue from 'vue' import App from '@/App' import router from '@/router/router' import store from '@/store/store' import BootstrapVue from 'boot ...

Identify when a div reaches the end of the screen using CSS

I've developed a custom dropdown feature using Vue 2 and TypeScript to meet our specific requirements (without relying on jQuery). The dropdown functions correctly, opening the options list downwards when the main box is clicked. One enhancement I a ...

Setting all lines within a textarea to have indentation

Can individual lines in a textarea be indented? I am using a handwritten font and the first letter on each line is getting clipped slightly. I have tried using padding and margin, but it has not solved the issue. Any suggestions? Thank you. Regards, Erik ...

Resultant vector

Having trouble calculating the resultant of 3 vectors. Every time I input a number, it returns NaN. Can someone shed some light on this? var vector1 = document.getElementById("f1"); var vector2 = document.getElementById("f2"); var vecto ...

Trigger a Jquery click event on dynamically imported AJAX content

When fetching data with AJAX and adding it to my HTML, I encountered a situation where I needed to trigger an alert when clicking on a specific div. Normally, I would use the .on() method for elements after an AJAX call. However, this time it was not work ...

Encountering an error message stating that the "@font-face declaration does not adhere to the fontspring bulletproof syntax" while attempting to integrate a custom font

I've been struggling to incorporate a unique font into my website, but I keep encountering the same error every time. Despite my efforts, I haven't found much guidance on how to rectify this issue. Below is the code I'm using: @font-face ...

Experiencing issues with my site's display due to unwanted code plaguing the

I am currently using the latest Divi theme on my WordPress site, and it is in maintenance mode. Recently, I noticed a strange space between the header and the top of the page that only appears on Chrome and IE, but not on Firefox. After inspecting with dev ...

The WebRTC video feature is functioning on the local network but is encountering difficulties

Trying to grasp WebRTC has been quite the journey for me. In an attempt to troubleshoot my failed video transfer between computers, I uploaded what I have so far onto a temporary github repository: https://github.com/stevendesu/webrtc-failure My goal is ...