Creating a design utilizing HTML columns with a set height and the ability to scroll horizontally

Question

Creating a design utilizing HTML columns with a set height and the ability to scroll horizontally

For my android project, I have a requirement to display a view (WebView) that dynamically loads content. The content will consist of <div class="content-item"> tags that are added by JavaScript to

<div class="content-holder">

after the page has loaded.

The layout design specifications are as follows:

List item
The content items need to be organized in fixed-width columns. Each content item may have a different height.
The height of any column cannot exceed the screen height. If a column is filled, additional content should move to the next column (which will be created if needed). There should not be any empty columns, and a column must not break inside a content item.
The page should allow horizontal scrolling (multiple columns of fixed width), but not vertical scrolling (the height must fit within the page).

Any suggestions on how to implement this using CSS and JavaScript?

javascript html css horizontal-scrolling fixed-width

Answer 1

Answer №1

http://jsfiddle.net/B4RPJ/

If you want to organize content items into columns based on their height, you can achieve this by iterating through the items and checking if they fit within a column. If not, create a new column and move the remaining items to it. Here's an example of how you can do that:

$(".content-item").each( function() {
    // Iterate through each content item
    var bottom = $(this).position().top + $(this).height();
    if ( bottom > $(this).parent().height() ) {
        // Move item and following items to new column
        columnShift( $(this) );
    }
} );

function columnShift( el ) {
    var parent = el.parent();
    var container = $(".content-container");

    var newCol = $("<div class='content-holder'></div>");

    el.nextAll(".content-item").appendTo( newCol );
    el.prependTo( newCol );

    container.width( container.width() + parent.width() );

    parent.after( newCol );
}

Here is what your HTML structure might look like:

<div class="content-container">
    <div class="content-holder">
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
    </div>
</div>

Ensure your CSS contains styles like these:

.content-holder {
    float: left;
    width: 300px;
    height: 300px;
    border: 1px solid #000000;
    overflow: hidden;
    margin: 5px;
    padding: 10px;
}

.content-item {
    max-height: 280px;
    overflow: hidden;
}

This code can be optimized further, but it serves as a good starting point for organizing content items into columns based on their height.

Answer 2

http://jsfiddle.net/B4RPJ/

If you want to organize content items into columns based on their height, you can achieve this by iterating through the items and checking if they fit within a column. If not, create a new column and move the remaining items to it. Here's an example of how you can do that:

$(".content-item").each( function() {
    // Iterate through each content item
    var bottom = $(this).position().top + $(this).height();
    if ( bottom > $(this).parent().height() ) {
        // Move item and following items to new column
        columnShift( $(this) );
    }
} );

function columnShift( el ) {
    var parent = el.parent();
    var container = $(".content-container");

    var newCol = $("<div class='content-holder'></div>");

    el.nextAll(".content-item").appendTo( newCol );
    el.prependTo( newCol );

    container.width( container.width() + parent.width() );

    parent.after( newCol );
}

Here is what your HTML structure might look like:

<div class="content-container">
    <div class="content-holder">
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
    </div>
</div>

Ensure your CSS contains styles like these:

.content-holder {
    float: left;
    width: 300px;
    height: 300px;
    border: 1px solid #000000;
    overflow: hidden;
    margin: 5px;
    padding: 10px;
}

.content-item {
    max-height: 280px;
    overflow: hidden;
}

This code can be optimized further, but it serves as a good starting point for organizing content items into columns based on their height.

Creating a design utilizing HTML columns with a set height and the ability to scroll horizontally

Answer №1

Similar questions

Error encountered in Jest mockImplementation: Incompatible types - 'string[]' cannot be assigned to 'Cat[]' type

Leveraging random attributes in Next.js without encountering the "server/client mismatch" issue

Ways to make the background color white in Bootstrap 5

Aligning a rotated paragraph in the middle of its parent container

Modify the selected toggle buttons' color by utilizing the MUI ThemeProvider

Incorporate a custom style sheet into your Express application

Encountering a 404 Error When Making an Ajax Request in Spring MVC

Could someone clarify the specific workings of the Google V8 bytecode related to the creation of object literals

Reading complex table structures with Selenium

Is there a way to send a personalized reply from an XMLHttpRequest?

Updating website content dynamically using AJAX and URL manipulation without refreshing the page (Node.js)

Issues with loading NextJS videos can occur when accessing a page through a link, as the videos may fail to load without

Adjust the size of a div using absolute positioning

The conditional statement does not align with my Regular Expression

Creating a personalized ESLint rule specifically for Redux reducers

Execute a particular NodeJS function within the package.json scripts section

Is there a way to assign a unique scrollTop value for a specific scrollspy location?

Exploring alternative methods of iterating over the values in a key-value pair within an AngularJS framework

flexbox: Two vertical icons tightly aligned without any space

Typescript/Three.js encounters the issue of game objects becoming undefined