> ## Content Index
> Fetch the complete content index at: https://thesoloadmin.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# Zabbix Server Dashboard: New CSS Challenge
- URL: https://thesoloadmin.com/zabbix-server-dashboard-new-css-challenge/
- Published: 2025-06-04T16:04:31.000Z
- Updated: 2025-06-21T15:46:19.000Z
- Description: If you're bugged by the vertical column headers in the Zabbix dashboard, my post from last year fixed the issue...until Zabbix 7.2. Here's a new fix.
- Author: Matt Pogue
- Tags: Zabbix, CSS, HTML, system monitoring, layout, frontend

If you're a Zabbix user, unless you're SERIOUSLY behind on software updates, you're aware by now that a change in v7.0 reoriented the dashboard labels from horizontal to vertical. 

![Zabbix Screenshot - Vertical Tags](https://thesoloadmin.com/content/images/2024/06/screen1.png)

Zabbix Screenshot - Vertical Tags

It bugged me enough that I created a [post](https://thesoloadmin.com/quick-note-zabbix-dashboard-css/) with instructions on how to change it. However, Zabbix threw me a curve in v7.2, moving from defined styles to Javascript components. It took some experimentation, but here's how to revert back to horizontal menus in Zabbix v7.2:

1. SSH to your Zabbix server system.
2. Change to the Zabbix `js` components directory:
  1. `cd /usr/share/zabbix/ui/js`
3. Make a backup copy of `component.z-vertical.js`:
  1. `cp component.z-vertical.js /root/zabbix_component.z-vertical.js_backup`
4. Edit `component.z-vertical.js` with the editor of your choice (vim, of course!):
  1. Search for the line that reads `transform: 'rotate(270deg)'` and comment it out:
    1. `//transform: 'rotate(270deg)'`
    2. As of Zabbix 7.2.7, this will be line #45.
  2. Remove the comma at the end of the previous line, #44; it should read:
    1. `left: 0`
  3. Comment out lines #88 and #89:
      1. NOTE: Replace the single quotes in the lines below with a backtick character; backticks indicate code formatting in Markdown and as such, aren't displayed correctly.
      2. `//this.style.width = '${this.#inner_container.scrollHeight}px;'`
      3. [//this.style.height](https://thesoloadmin.com/zabbix-server-dashboard-new-css-challenge/)` = '${this.#inner_container.scrollWidth}px;'`
  4. Copy and paste the commented lines, swapping the variables:
    1. `this.style.width = '${this.#inner_container.scrollWidth}px;'`
    2. `this.style.height = '${this.#inner_container.scrollHeight}px;'`
5. Save the file and restart Zabbix server:
  1. `:wq`
  2. `systemctl restart zabbix-server`
6. Double-check Zabbix's status:
  1. `systemctl status zabbix-server`

![](https://thesoloadmin.com/content/images/2024/06/screen2.png)

Zabbix server status from systemctl

1. Reload the Zabbix server dashboard in your browser. Your tags should now be restored to their former horizontal glory:

![](https://thesoloadmin.com/content/images/2024/06/screen3.png)

Zabbix dashboard with horizontal tabs restored. 

Like the previous Zabbix fix, this one is pretty minor, and a relatively easy fix to boot, but hopefully some of my fellow Zabbix admins will find it useful. As always, if you have any questions, don't hesitate to reach out: [matt@thesoloadmin.com](mailto:matt@thesoloadmin.com).