Number of columns in Basic UI

Add-ons UIs
1

Hi,
the layout of Basic UI is characterized by a one or two column layout. Often there is enough space for three columns to show the items. Is there any possibiilty to adjust the max. number of columns?

Christian

2

HABDroid on an Android tablet uses space more efficiently, but other then that I don’t think its possible.

3

I had the same problem and came up with this:
Using CSS grid gives you a quite flexible tool to layout a dashboard.

First you need to define the layout of your webpage. This is done in a CSS file: dashboard.css


.grid {
    background-color: #fff;
}

.container {
    height:98vh;
    width: 98vw;
    display: grid;
    grid-row-gap: 5px;
    grid-column-gap: 5px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: stretch;       /* column alignment */
    justify-items: stretch;     /* row alignment */
}

/*
The numbering does not refer to cols/rows but to the separating lines!

 1          2          3          4
1+----------+----------+----------+
 |cell1     |cell2     |cell3     |
 |          |          |          |
 |          |          |          |
2+----------+----------+----------+
 |cell4     |cell5                |
 |          |                     |
 |          |                     |
3+----------+----------+----------+

*/

.cell1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}
.cell2 {
  grid-column-start: 3;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
.cell3 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}
.cell4 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
}
.cell5 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3;
}

Then there’s the acutal webpage that provides the content: dashboard.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My House</title>
        <link rel="stylesheet" href="dashboard.css" type="text/css">
    </head>
    <body>
        <header>
        </header>
 
    <div class="container">
        <div class="grid cell1">
            <iframe id="idWeather" src="http://localhost:8080/basicui/app?sitemap=weather" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
        </div>
        <div class="grid cell2">
            <iframe id="idCalendar" src="http://localhost:8080/basicui/app?sitemap=calendar" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
        </div>
        <div class="grid cell3">
            <iframe id="idHeating" src="http://localhost:8080/basicui/app?sitemap=heating" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
        </div>
        <div class="grid cell4">
            <iframe id="idPower" src="http://localhost:8080/basicui/app?sitemap=power" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
        </div>
        <div class="grid cell5">
            <iframe id="idChart" src="http://localhost:8080/basicui/app?sitemap=chart" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
        </div>
    </div>
        
    </body>
</html>

This has worked quite well for me and has been tested with Firefox and Chromium (Windows and Linux). I’d be happy to hear if this helps you.

4

Hi,
that sounds quite interesting. I will try it out.

Christian

5

dashboard.css where is ?