CSS tips for Shiny

A collection of tips/ tricks for using CSS to tweak the UI of a shiny app. These are solutions I mostly look for when building shiny apps and want to improve the UI

Here I will outline a collection of tips for using CSS to tweak the UI of a shiny app.

I find myself looking on Google for the same things, over and over again, so I decided to create a post to outline all the tips and tricks or resources when I want to do something with CSS on my Shiny app.

I also hope that other people will benefit from this.

The code for all the examples can be found on the posts’ github page

Center a button (horizontaly)

OMG.. how many times I need to search for this

actionButton("go", "Go", style = "display:block; margin:0 auto")

This is the inline style.

The best is to use the File-based CSS

Let’s say we add a class to the button called .center (or whatever class name you want)

actionButton("go", "Go", class = ".center')

and on the CSS file, we add:

.center{
  
  display:block; 
  margin: 0 auto;
}

To find out how to center both horizontaly and vertically, visit this

Scroll bar in Modal Dialogue

CSS ans SO to the rescue. See here

In the CSS file, we add:

.modal-dialog { 
  overflow-y: initial;
}

.modal-body{
  max-height: 80vh;
  overflow-y: auto;
}

Note that the classes names are exactly these (modal-dialog, modal-body.
when you type in the console:

shiny::modalDialog()

You can see that these are the classes

<div class="modal fade" data-backdrop="static" data-bs-backdrop="static" data-bs-keyboard="false" data-keyboard="false" id="shiny-modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" data-bs-dismiss="modal">Dismiss</button>
      </div>
    </div>
  </div>
  <script>if (window.bootstrap && !window.bootstrap.Modal.VERSION.match(/^4\./)) {
         var modal = new bootstrap.Modal(document.getElementById('shiny-modal'));
         modal.show();
      } else {
         $('#shiny-modal').modal().focus();
      }</script>
</div>

Questions:

• How to I apply this to a single modal?
• How do I make the max-height property variable to the screen size? (since I assume this is for desktops)