"full-screen" with dynamic height listview

[mariobucatini]

I'm working on a theme that dims the background around the picker.

For that I set the window width and height to 100% and then align the mainbox via expanded containers.

The problem I'm facing is, that if I don't set the listview to fixed-height, it will shrink to zero lines.

Is it possible to have the listview shrink if less then #lines items are available?

With fixed height:

theme.rasi

* {
background-color: transparent;
border-color: #333333;
font: "mono 11.5";
margin: 0;
padding: 0;
spacing: 0;
text-color: white;
}

element {
padding: 8px 8px;
spacing: 12px;
}

element selected {
background-color: #285577;
border: 1px;
border-color: #4c7899;
}

element-icon {
size: 1em;
}

inputbar {
children: [ prompt,entry ];
padding: 12px;
spacing: 12px;
}

listview {
border: 0 0 1px;
columns: 1;
dynamic: true;
fixed-height: true;
lines: 7;
}

mainbox {
background-color: #222222;
border: 1px;
children: [ "message","listview","inputbar" ];
expand: false;
width: 500px;
}

message {
border: 0 0 1px;
}

prompt {
text-color: #888888;
text-transform: bold;
}

spacer {
expand: true;
}

textbox {
padding: 8px 8px;
}

vertibox {
children: [ "spacer","mainbox" ];
orientation: vertical;
}

window {
background-color: rgba(0, 0, 0, 0.75);
children: [ "spacer","vertibox","spacer" ];
height: 100%;
orientation: horizontal;
width: 100%;
}

[DaveDavenport]

don't think so.. the expand on the spacer will take all available space. So if listview is 'dynamic' it only takes the available space (and that is 0, as spacer takes it all).
I agree this is not really according to doc, and should be fixed..

A 'dirty' work-around (border needs fixing though)

* {
background-color: transparent;
border-color: #333333;
font: "mono 11.5";
margin: 0;
padding: 0;
spacing: 0;
text-color: white;
}

element {
padding: 8px 8px;
spacing: 12px;
background-color: #222222;
}

element selected {
background-color: #285577;
border: 1px;
border-color: #4c7899;
}

element-icon {
size: 1em;
}

inputbar {
children: [ prompt,entry ];
padding: 12px;
spacing: 12px;
background-color: #222222;
}

listview {
border: 0 0 1px;
columns: 1;
dynamic: false;
fixed-height: false;
lines: 7;
reverse: true;
background: transparent;
}

mainbox {
background-color: transparent;
//background-color: #222222;
border: 0px;
children: [ "message","listview","inputbar" ];
expand: false;
width: 500px;
}

message {
border: 0 0 1px;
background-color: #222222;
}

prompt {
text-color: #888888;
text-transform: bold;
}

spacer {
expand: true;
}

textbox {
padding: 8px 8px;
}

vertibox {
children: [ "spacer","mainbox" ];
orientation: vertical;
}

window {
background-color: rgba(0, 0, 0, 0.75);
children: [ "spacer","vertibox","spacer" ];
height: 100%;
orientation: horizontal;
width: 100%;
fullscreen: true;
}

[DaveDavenport]

[mariobucatini]

Thanks for the quick response and work-around!

Even though a bit "dirty", I quite like the result :)

Should I mark your comment as the answer, or keep it unanswered for tracking the spacer<->listview issue? I'm happy either way.

My final version in case someone wants something similar:

theme.rasi

* {
background-color: transparent;
border-color: #333333;
font: "mono 11.5";
margin: 0;
padding: 0;
spacing: 0;
text-color: white;
}

element {
background-color: #222222;
border: 1px 1px 0;
border-color: #333333;
padding: 12px;
spacing: 12px;
}

element selected {
background-color: #285577;
border: 1px;
border-color: #4c7899;
}

element-icon {
size: 1em;
}

inputbar {
background-color: #222222;
border: 1px;
children: [ prompt,entry ];
padding: 12px;
spacing: 12px;
}

listview {
columns: 1;
dynamic: true;
fixed-height: true;
lines: 7;
reverse: true;
}

mainbox {
children: [ "message","listview","inputbar" ];
expand: false;
}

message {
border: 0 0 1px;
}

prompt {
text-color: #888888;
text-transform: bold;
}

spacer {
expand: true;
}

textbox {
padding: 12px;
}

vertibox {
children: [ "spacer","mainbox" ];
expand: false;
orientation: vertical;
width: 640px;
}

window {
background-color: rgba(0, 0, 0, 0.75);
children: [ "spacer","vertibox","spacer" ];
fullscreen: true;
orientation: horizontal;
}