starred/uptime-kuma

Fork 0

mirror of https://github.com/louislam/uptime-kuma.git synced 2026-03-02 22:57:00 -05:00

Multi column status pages #1219

New issue

Closed

opened 2026-02-28 02:13:55 -05:00 by deekerman · 9 comments

deekerman commented

2026-02-28 02:13:55 -05:00

Owner

Originally created by @Marian-Lein on GitHub (Jun 27, 2022).

⚠️ Please verify that this feature request has NOT been suggested before.

I checked and didn't find similar feature request

🏷️ Feature Request Type

UI Feature

🔖 Feature description

Having "vertical slices" in the status page would be very helpful in case of many monitors, i.e. on a multi-site deployment

✔️ Solution

Vertical slicing in status page, where different monitors could be added to different groups not only in a single column but also more than one:

❓ Alternatives

No response

📝 Additional Context

See also pull request #1831

Originally created by @Marian-Lein on GitHub (Jun 27, 2022). ### ⚠️ Please verify that this feature request has NOT been suggested before. - [X] I checked and didn't find similar feature request ### 🏷️ Feature Request Type UI Feature ### 🔖 Feature description Having "vertical slices" in the status page would be very helpful in case of many monitors, i.e. on a multi-site deployment ### ✔️ Solution Vertical slicing in status page, where different monitors could be added to different groups not only in a single column but also more than one: ![Example built using iFrames](https://user-images.githubusercontent.com/1257515/176002744-5b261492-34f1-461f-8ec5-bbc65c75df34.png) ### ❓ Alternatives _No response_ ### 📝 Additional Context See also pull request #1831

deekerman

2026-02-28 02:13:55 -05:00

closed this issue
added the
feature-request

A:status-page
labels

deekerman commented

2026-02-28 02:14:01 -05:00

Author

Owner

@MrBlue90 commented on GitHub (Nov 24, 2022):

Might not be 100% what you're looking for, but I got the multiple columns working by using Custom CSS. Just add this:

.mt-4 {
  column-count: 3; //Number of columns
}

@MrBlue90 commented on GitHub (Nov 24, 2022): Might not be 100% what you're looking for, but I got the multiple columns working by using Custom CSS. Just add this: ``` .mt-4 { column-count: 3; //Number of columns }

deekerman commented

2026-02-28 02:14:02 -05:00

Author

Owner

@kami202 commented on GitHub (Dec 28, 2022):

This is my custom css for removing unwanted spaces and multi column display. Not responsive, just for showing the status screen on a large tv.

body {
}
.mt-3{
  max-width: 1920px;
}
.mt-4 {
 column-count: 4; 
 margin-top: 0.5rem !important;
}
.mb-5{
margin-bottom: 0rem !important;
}
.p-4{
margin-bottom:0.2rem !important;
}

@kami202 commented on GitHub (Dec 28, 2022): This is my custom css for removing unwanted spaces and multi column display. Not responsive, just for showing the status screen on a large tv. ```css body { } .mt-3{ max-width: 1920px; } .mt-4 { column-count: 4; margin-top: 0.5rem !important; } .mb-5{ margin-bottom: 0rem !important; } .p-4{ margin-bottom:0.2rem !important; }

deekerman commented

2026-02-28 02:14:02 -05:00

Author

Owner

@Marian-Lein commented on GitHub (Dec 29, 2022):

This is looking fine!

@Marian-Lein commented on GitHub (Dec 29, 2022): This is looking fine!

deekerman commented

2026-02-28 02:14:02 -05:00

Author

Owner

@SebastianGwizdala commented on GitHub (Jan 6, 2023):

This is my custom css for removing unwanted spaces and multi column display. Not responsive, just for showing the status screen on a large tv.

body { } .mt-3{ max-width: 1920px; } .mt-4 { column-count: 4; margin-top: 0.5rem !important; } .mb-5{ margin-bottom: 0rem !important; } .p-4{ margin-bottom:0.2rem !important; }

The code works great without tags but with tags the items are not displayed correctly
https://ibb.co/DpqT2tD
https://ibb.co/Xt8Df7B

@SebastianGwizdala commented on GitHub (Jan 6, 2023): > This is my custom css for removing unwanted spaces and multi column display. Not responsive, just for showing the status screen on a large tv. > > body { } .mt-3{ max-width: 1920px; } .mt-4 { column-count: 4; margin-top: 0.5rem !important; } .mb-5{ margin-bottom: 0rem !important; } .p-4{ margin-bottom:0.2rem !important; } The code works great without tags but with tags the items are not displayed correctly https://ibb.co/DpqT2tD https://ibb.co/Xt8Df7B

deekerman commented

2026-02-28 02:14:02 -05:00

Author

Owner

@MrBlue90 commented on GitHub (Jan 9, 2023):

@kami202 That's a great addition!
I made a chance as well to make it more responsive and useful for mobile devices:

@media screen and (min-width: 1024px) {
	body { } 
	.mt-3{ max-width: 1920px; } 
	.mt-4 { column-count: 4; margin-top: 0.5rem !important; } 
	.mb-5{ margin-bottom: 0rem !important; } 
	.p-4{ margin-bottom: 0.2rem !important; }
}

@SebastianGwizdala I don't have the same issue with my code. For what it's worth, can you try again?

@MrBlue90 commented on GitHub (Jan 9, 2023): @kami202 That's a great addition! I made a chance as well to make it more responsive and useful for mobile devices: ```css @media screen and (min-width: 1024px) { body { } .mt-3{ max-width: 1920px; } .mt-4 { column-count: 4; margin-top: 0.5rem !important; } .mb-5{ margin-bottom: 0rem !important; } .p-4{ margin-bottom: 0.2rem !important; } } ``` @SebastianGwizdala I don't have the same issue with my code. For what it's worth, can you try again?

deekerman commented

2026-02-28 02:14:02 -05:00

Author

Owner

@SebastianGwizdala commented on GitHub (Jan 11, 2023):

@SebastianGwizdala I don't have the same issue with my code. For what it's worth, can you try again?

@MrBlue90 Thank you. I have tried again and it works fine with 5 columns. No luck with other number of columns

https://ibb.co/jr7vbR4
https://ibb.co/Kr7bL42
https://ibb.co/yPwBHGx
https://ibb.co/3SNtKG1
https://ibb.co/26cH6QT

@SebastianGwizdala commented on GitHub (Jan 11, 2023): > @SebastianGwizdala I don't have the same issue with my code. For what it's worth, can you try again? @MrBlue90 Thank you. I have tried again and it works fine with 5 columns. No luck with other number of columns https://ibb.co/jr7vbR4 https://ibb.co/Kr7bL42 https://ibb.co/yPwBHGx https://ibb.co/3SNtKG1 https://ibb.co/26cH6QT

deekerman commented

2026-02-28 02:14:02 -05:00

Author

Owner

@3898461 commented on GitHub (Jun 7, 2023):

碉堡的 CSS, the current panel is very beautiful

@3898461 commented on GitHub (Jun 7, 2023): > 碉堡的 CSS, the current panel is very beautiful

deekerman commented

2026-02-28 02:14:02 -05:00

Author

Owner

@CommanderStorm commented on GitHub (Dec 13, 2023):