How to make shiny app UI more compact?

[salgerman]

First time user, here; a bit overwhelmed with the abundance of docs.

I am just putting together a few widgets and immediately noticed how far apart everything is, I feel like a lot of screen real state is going unused.

I saw shinyswatch provides themes, but they seems to only address coloring.

Is there already a theme that addresses compactness?
If not
is there an easy way to make everything have less gaps, margins, paddings?

[dy1395]

You will have to utilize HTML containers like div and control the spacing via CSS (padding, margin, width, height). I generally use div which is a full-width container, but can then control the padding and margin to put my widgets and such inside there.

[salgerman]

Aaahhh, ok; let me try that.
Thanks.

[dy1395]

If you look at the code for the Shiny app that I used for the Posit Table Contest, you will see an abundance of uses of div in there (both in the ui and server). Take a look: GitHub - dy1395/edson: Shiny app code for Posit Table Contest submission.

[randyzwitch]

In addition to what @dy1395 mentioned, keep in mind that frameworks like Shiny are trying to balance several competing desires...by making it easy to design a responsive, data-intensive website, having only a few widgets will make them look sparse. You can change the defaults using CSS and the like, but then you're on the hook for making sure it works for different screen sizes/resolutions.

Once you start changing the relative placement, then you get more into the weeds of "actual" web development and everything that entails. Hopefully you can find a balance where Shiny lets you do what you want to see (customized visual output) without becoming too difficult for what you wanted to use Shiny for in the first place

Best,
Randy

[salgerman]

Right, I guess these frameworks target ease of use and performance, probably styling is the last thing in the priority list.

Python is the same everywhere, so is HTML, even the widgets (components) from one framework to another are similarly named; but, when it comes to customization, it seems that some web development frameworks use one styling framework and some other something else...and the abbrevaitions to refer to classes vary; for example, way behind the scenes, Nicegui uses Tailwind CSS....and Shiny, Bootstrap? So, yes, having to learn the styling framework adds a whole 'nother dimension.

The thing is that I first heard about pure-python web development framework as "dashboarding" frameworks; so my expectations and desires were for a rather compact interface where one can have many inputs and outputs, radio buttons, checkboxes, dials, result widgets, some small plot...but the various frameworks I have been looking show things way too spaced out!

I tried the <div> tag, but that did not change the inner widget at all. In particular, I am talking about the ui.input_select component, and the vertical distance between the label and the dropdown...the height of the sub-widget for the selection is too tall...I would like to make it smaller, as in the docs.

Here is a comparison between

What I see in the docs, ex: "Choose a state:"

and what I am getting:

Any hints?

[nirgrahamuk]

In a chromium based browser (Chrome/Edge etc) you can right click on an element, and choose "inspect" which is a way into the browser developer tools; from there you can view the current state of the DOM, and see the properties of an element, and styling rules, and the sources for those styling rules also. Its a big topic but the inspector is very valuable

[randyzwitch]

As a specific example for ui.input_select, please see the following:

from shiny import render
from shiny.express import input, ui


#changing styles can be done here
ui.tags.style(
    "select#select.shiny-input-select { padding-bottom: 50px; }"
)

ui.input_select(  
    "select",  
    "Select an option below:",  
    {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"}, 
)  

@render.text
def value():
    return f"{input.select()}"

In this example, ui.tags.style defines an inline CSS rule for the select#select.shiny-input-select CSS selector (which per @nirgrahamuk, I found by right-clicking on the element and choosing "Inspect" in Chrome) .

To make it really obvious how the ui.input_element element is changing, I made the example padding-bottom: 50px; You can add whatever CSS selectors are appropriate for your use case.

Best,
Randy

[salgerman]

O.k., I am on my way, now; thank you all for your various tips.