Scrolling Vertically using WinJS ListView

Is it possible to achieve vertical scrolling in a ListView using HTML/JS for Windows 8 applications with WinJS?

I successfully created a Windows 8 app with XAML/C# that utilizes a ListView for vertical scrolling.

However, when attempting to replicate the app using HTML/JS, I encountered difficulty creating a ListView that scrolls vertically. Instead of vertical scrolling, the ListItems were displayed on a horizontal line and scrolled horizontally.

I initially believed that GridView was suitable for horizontal scrolling lists and ListView for vertical scrolling.

As an alternative solution, I tried placing the ListView inside a div element with vertical overflow scrolling by using the following code:

<div style="overflow-y:scroll;">
    // ListView
</div>
htmlcsswindows-8winjs

Answer №1

XAML utilizes different controls - GridView to display items in a horizontal list that wraps when it runs out of space, and ListView for a vertical list that does not wrap.

However, in HTML, you can achieve the same results using a ListView and adjusting the layout property. By setting it to new WinJS.UI.GridLayout(), you mimic XAML's GridView, while setting it to new WinJS.UI.ListLayout() replicates XAML's ListView layout.

To implement this functionality with JavaScript, you can use a conditional statement like the one below:

    if (Windows.UI.ViewManagement.ApplicationView.value == Windows.UI.ViewManagement.ApplicationViewState.snapped) {
        demosListView.layout = new WinJS.UI.ListLayout();
    }
    else {
        demosListView.layout = new WinJS.UI.GridLayout();
    }

Alternatively, you can declaratively set this attribute in the HTML by using the data-win-options attribute of the ListView control div. Hopefully, this explanation is helpful to you.

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

The functionality of the `download` attribute within the `a` tag seems to be

I tried implementing the download attribute in my code using jQuery, but it doesn't seem to be functioning properly. data = /images/myw3schoolsimage.jpg a = $('<a>').attr('href', data).attr('download', 'image. ...

javascriptjqueryhtml

How can I adjust a large image to fit the browser window using CSS?

I have a large image (3000px by 2000px) that I want to use as the background for my website and adjust it to fit the window size. Currently, I have implemented the following CSS: body { background: url('image.jpg') !important; background ...

htmlcssimagebackgroundposition

Enhance the appearance of the popover by incorporating an arrow-like element for dismissing the

Here is some code I want to modify: https://i.stack.imgur.com/0C61Y.png I would like to add an arrow element at the top, similar to this: https://i.stack.imgur.com/pDT3s.png This will give it a popup-like appearance. Below is the CSS styling for the co ...

htmlcss

Is it possible to apply a tailwind class that fades or transitions into something else after a specific duration?

How can I achieve a transition effect from the bg-red-300 class to bg-transparent, or a different background class, over a 2-second duration? Do I need to use javascript for this effect? I would like an element to be highlighted and then return to its no ...

csstailwind-csstailwind-in-js

Discovering the compiled CSS file in React when using Sass: A step-by-step guide

In my React project, I have incorporated SASS. Now I am looking to find the final compiled CSS file from that SASS code. Whenever I navigate to: While there is the SCSS file visible, where can I locate the CSS version? I am referring to the compiled outp ...

cssreactjssass

Is it possible to resize background images on Safari?

Encountering an issue with Safari where the background isn't scaling properly. It functions perfectly in Firefox, Chrome, and other browsers, but Safari is presenting a problem. Here's a link to the site: This issue occurs when the resolution is ...

jqueryhtmlcss

Viewing the details of a checkbox option

I have encountered a situation where I need to handle detail rows within a table that contain checkboxes for selection. The desired behavior is: 1) When clicking on the detail row image, it should expand to show the details of its parent row without sele ...

jqueryhtmlcsscheckbox

What is the best way to center text within a button when there is also an image present?

I'm trying to create a button with an image and some text, but I can't seem to get it aligned properly. Here's the code I have so far: <button><img src="https://www.google.com/s2/favicons?domain=google.com">&nbsp;Go ...

htmlcssbuttonvertical-alignmenttext-alignment

I want the hover effect to trigger specifically when I hover over the image within a column of a row using CSS

My issue lies with the hover effect on my webpage. Currently, the problem I am facing is that the hover effect activates whenever my mouse hovers over any part of the column in a row. How can I make it so that the effect only triggers when hovering over th ...

cssbootstrap-4jsx

Adding a new div using Jquery after a specific table row

I am having trouble displaying additional data in a table when a specific row is clicked. Here is the table structure I am working with: <div id="display"> <div class="displayRow"> <img src="images/expand-arrow.gif" class="expandArrow ...

javascriptjqueryhtmlcss

What is the best way to conceal the broken image icon using PHP?

UPLOAD PICTURES IN DATABASE: if (!isset($_FILES['gambarid']['tmp_name'])) { echo ""; }else{ $rand5=rand(); $image_name5= addslashes($_FILES['gambarid']['name']); $fileext5=explode('.&ap ...

phphtmlimageicons

The bootstrap mobile menu is stubbornly staying open in my header.html file

I've organized my code with a separate HTML file for the header section. The index file, where I've included all the necessary links to Bootstrap, appears as follows: <head> ... <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1 ...

htmlcssbootstrap-5

Can anyone lend a hand with styling this menu without relying on margins in CSS?

I've been working on a website and I've noticed a significant lag in Internet Explorer when hovering over the menus. It appears that Cufon is contributing to this issue, especially when applying height, width, margins, or paddings to the li:hover ...

htmlcsshtml-listsmargin

Executing a function with the initial click

Is there a way to run a function only on the first click, without having it run every time? I already have another function running on window.onload, so I can't use that. Both functions work fine independently, but not together. Right now, I'm ca ...

javascripthtmlfunction

the hidden input's value is null

I am encountering an issue with a hidden input in this form. When I submit the form to my API, the value of the input is empty. Isbn and packId are both properties of a book model. However, for some reason, the value of packId is coming out as empty. & ...

javascripthtmlnode.jsangular

What could be causing my Font Awesome icon background to fail to load?

As a newcomer to website design, I am currently learning CSS. I seem to be facing an issue where the background for the first two icons has loaded successfully, but the second one isn't displaying. .bg-instagram { padding: 7px 10px; border-radi ...

htmlcss

A floating transparent Turing image transformed into a clickable image

After creating an image button with a transparent black hover effect, I noticed that the image no longer functions as a "button." However, the hover effect still works. Is there a way to maintain the button functionality while keeping the color overlay? V ...

htmlcss

I am dealing with a set of divs wrapped in a flex container that tend to overlap each other. Their heights vary and sometimes they wrap multiple times. Any suggestions on how to prevent this

I am encountering an issue where the width of the div remains the same after it has wrapped, causing overlapping. I want the first div to push the second to the right and so on. When I add a 100% width, it makes the width for the smallest div the same as ...

cssreactjsflexbox

Having trouble with changing the color of an element when the radio input is checked?

Can someone help me troubleshoot this HTML and CSS code? <label class="radio"> <input type="radio" name="plan" value="plan" required> <span> <h6>Plan</h6> <i class="pe-7s-graph1 ...

htmlcss

Error: ExpressJs cannot locate the requested CSS file

Currently, I am delving into the world of expressJS and nodeJS in an effort to expand my skills. However, I've hit a bump in the road when the server fails to locate the CSS file (resulting in a 404 error) upon loading the HTML page. Surprisingly, the ...

cssnode.jsexpressnpm