Bug #15757: Incorrect dashboard column spacing when using five columns - pfSense - pfSense bugtracker

Actions

Copy link

Bug #15757

open

Incorrect dashboard column spacing when using five columns

Added by Steve Wheeler 3 months ago. Updated 13 days ago.

Status:

Confirmed

Priority:

Normal

Assignee:

Category:

Dashboard

Target version:

2.8.0

Start date:

Due date:

% Done:

Estimated time:

Plus Target Version:

25.03

Release Notes:

Default

Affected Version:

2.7.x

Affected Architecture:

Description

Setting the dashboard to use 5 columns incorrectly shows spacing for 6 comlumns though the 6th cannot be used.

For example:

Tested: 2.7.2, 2.8-dev, 24.03 and 24.08-dev

Files

Screenshot from 2024-10-01 14-27-16.png (181 KB) Screenshot from 2024-10-01 14-27-16.png

Steve Wheeler, 10/01/2024 01:27 PM

Actions

Copy link

Updated by Christopher Cope 3 months ago

Status changed from New to Confirmed

I'm also seeing this on

24.08-DEVELOPMENT (amd64)
built on Fri Oct 4 2:31:00 UTC 2024
FreeBSD 15.0-CURRENT

Setting it to 4 works as expected, as does 6.

Actions

Copy link

Updated by Jim Pingle 2 months ago

Subject changed from 5 column dashboard spacing incorrect. to Incorrect dashboard column spacing when using five columns
Plus Target Version changed from 24.08 to 24.11

Actions

Copy link

Updated by Jim Pingle 2 months ago

Plus Target Version changed from 24.11 to 25.01

Actions

Copy link

Updated by GChuf 6 2 months ago

Issue is due to code in index.php:

<?php
    $columnWidth = (int) (12 / $numColumns);

    for ($currentColumnNumber = 1; $currentColumnNumber <= $numColumns; $currentColumnNumber++) {

        //if col$currentColumnNumber exists
        if (isset($widgetColumns['col'.$currentColumnNumber])) {
            echo '<div class="col-md-' . $columnWidth . '" id="widgets-col' . $currentColumnNumber . '">';
            $columnWidgets = $widgetColumns['col'.$currentColumnNumber];

this uses bootstrap's "col-md" classes, which use width percentages in steps of 1/12 (co-md-2 is 2/12, so 16.67%).
Since (int) 12/5 gives the result of "2", user has the impression that there are 6 evenly spaced columns but only 5 of them are used.

A workaround would be to create a new class with width of 20%, which doesn't exist inside bootstrap's "col-md" classes.

Actions

Copy link