Arrangement of box and buttons on R shiny interface

My dashboard page features action buttons aligned to the left, along with a plot and two additional zoom and reset buttons. I am looking to center the box on the screen and position the zoom and reset buttons at the top right corner. I attempted to use tags$div without success. Any assistance would be greatly appreciated. Thank you in advance.

## app.R ##
library(shiny)
library(shinydashboard)

ui <- dashboardPage(
dashboardHeader(title = "My Dashboard"),
dashboardSidebar(
width = 0
),
dashboardBody(
tags$br(actionButton("go", "Log")),
tags$br(),
tags$br(actionButton("go", "Case")),
tags$br(),
tags$br(actionButton("go", "Resource")),
tags$br(),
tags$br(actionButton("go", "Activity")),
tags$br(),
tags$br(actionButton("go", "Resource-activity")),
box(),
tags$br(actionButton("go", "Zoom")),
tags$br(actionButton("go", "Reset"))
))

server <- function(input, output)
{ 
}
shinyApp(ui, server)
htmlcssrshinyshinydashboard

Answer №1

Exploring the possibilities with fluidRow and column:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "My Dashboard"),
  dashboardSidebar(
    width = 0
  ),
  dashboardBody(
    fluidRow(
      column(2, offset = 1,
             actionButton("go", "Log")
      ),
      column(2, offset = 7,
             actionButton("go", "Zoom")
      )
    ),
    fluidRow(
      column(2, offset = 1,
             actionButton("go", "Case")
      ),
      column(2, offset = 7,
             actionButton("go", "Reset")
      )
    ),
    fluidRow(
      column(2, offset = 1,
             actionButton("go", "Resource")
      ),
      column(8, offset = 1,
             box()
      )
    ),
    fluidRow(
      column(2, offset = 1,
             actionButton("go", "Activity")
      )
    ),
    fluidRow(
      column(2, offset = 1,
             actionButton("go", "Resource-activity")
      )
    )
  )
)

server <- function(input, output) {}
shinyApp(ui, server)

Considering the numerous other options available for customization.

Answer №2

Do you think something like this would work for your purposes?

## index.R ##
library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "My Dashboard"),
  dashboardSidebar(
    width = 0
  ),
  dashboardBody(
    fluidRow(
      column(1,
             tags$br(actionButton("go", "Log")),
             tags$br(),
             tags$br(actionButton("go1", "Case")),
             tags$br(),
             tags$br(actionButton("go2", "Resource")),
             tags$br(),
             tags$br(actionButton("go3", "Activity")),
             tags$br(),
             tags$br(actionButton("go4", "Resource-activity"))),
      br(),
      column(10,
             box(width=12,plotOutput("plot"))),
      column(1,
             tags$br(actionButton("go5", "Zoom")),
             tags$br(),
             tags$br(actionButton("go6", "Reset"))))
  ))

server <- function(input, output){ 

output$plot <- renderPlot(hist(mtcars$disp))

}
shinyApp(ui, server)

https://i.sstatic.net/rXrOl.jpg

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Achieve text length that does not exceed the specified limit dynamically

Is it possible to determine the length of the visible portion of text that overflows (or calculate the size of the overflow for further processing) using CSS or JavaScript? If so, can this calculation be done dynamically (such as on window resize)? The g ...

javascriptcsstext

Issues with Linear-Gradient functionality in NativeScript 8 on Android devices

I recently added a linear-gradient to an image in my NativeScript 8 app. Surprisingly, it seems to work perfectly on iOS, but I'm encountering some issues on Android. Despite trying solutions like using -webkit-linear-gradient(), the desired effect is ...

androidcssangularnativescript

difficulty encountered when transmitting data via ajax to an express server

Just starting out with backend and ran into an issue when trying to send data using vanilla ajax to my express server. Can anyone spot where I might be making a mistake? Here is my ajax request: var xhttp = new XMLHttpRequest(); xhttp.onload ...

htmlnode.jsajaxexpress

What are the steps to creating a dynamic, layered column design using HTML?

I'm looking to create a layout that resembles the one on www.PInterest.com, featuring varying numbers of columns depending on the browser width (responsive design). My challenge lies in stacking the boxes vertically with different heights, without let ...

htmlcss

Why is it necessary to separate PHP from HTML?

After exploring comments on various websites, pages, and questions I've asked about the separation of PHP and HTML, I'm curious. Does it mean structuring code like this: <?php myPhpStuff(); ?> <html> <?php morePhpStuff(); ?& ...

phphtmlformatting

line of checkboxes aligned horizontally with the help of Bootstrap

My goal is to create a horizontal row of checkboxes within a form. I've been able to achieve a functional but unattractive version by using the following code: div.form-group(ng-show = 'avariable') label 1 input(type = 'checkbo ...

htmlcsstwitter-bootstrapcheckbox

Having trouble with jQuery and Ajax POST requests

I designed a basic html page and utilized jquery/ajax to transmit a simple json file to my php server. The behavior of my code is quite puzzling. Initially, I followed suggestions from other Stack Overflow queries: Script1 var data = {"deviceUUID":"ab ...

jqueryhtmlajaxposthttp-post

"Navigate through the page by scrolling with your mouse all the way to 100

Is it possible to trigger an action when a user starts scrolling using the mousewheel? I've searched online but all I found was information on 100% scroll on click. I want the window to automatically be scrolled down to 100% as soon as the user starts ...

javascriptjqueryhtmlcss

Trouble with reading from a newly generated file in a node.js program

Whenever I launch my results.html page, I generate a new JSON file and use express.static to allow access to the public folder files in the browser. Although my application is functioning properly, I find myself having to click the button multiple times f ...

javascripthtmljsonnode.jsexpress

The file size exceeds the server's upload limit, despite making changes to the php.ini file

I've encountered a problem trying to upload an .OBJ file to the server, resulting in an 'Error 1' message. The uploaded file surpasses the upload_max_filesize directive specified in php.ini This error is detailed on this page - http://ph ...

javascriptphphtmlajaxfile-upload

Attempting to eliminate the parent container of a slide generated by the Slick Slider Plugin

I have developed a filter mechanism that hides specific classes within a slick slider based on the data-tag associated with the objects and the value of checkboxes. However, when these classes are hidden, they still occupy space because I should be hiding ...

jqueryhtmlcssslider

I'm having trouble adjusting the background color in the bootstrap template

------------ I am customizing the bootstrap SB Admin template for my asp.net core Identity project. However, I am facing an issue with changing the background color of the template and the navigation menu color. Even though I can see the color changes when ...

cssasp.net-corebackground-colorasp.net-core-identity

Tips for aligning a div underneath another div in a centered position

I am attempting to align .rij_lessenrooster below .rij_weekdagen so that it is centered under each day. The teacher advised me to create a column and then try it, but it did not resolve the alignment issue. The .rij_weekdagen consistently appears off to th ...

htmlcssflexbox

socket.io, along with their supporting servers

Can socket.io function separately from being the webserver? I prefer to utilize an external webserver, but in order for it to function properly I require /socket.io/socket.io.js. Is there a method other than duplicating[1] this file? I want to avoid comp ...

javascripthtmlnode.jsnginxsocket.io

Modifying text styles in ggplot2

Long ago, I made a change to my ggplot2 font by using windowsFonts(Times=windowsFont("TT Times New Roman")). However, I now find myself unable to revert back to the original settings. Despite my attempts to set family="" in ggplot2 the ...

rggplot2fontsextrafontshowtext

When using onclick="location.href='page.html'", the page fails to load on Safari browser

I've been having trouble with getting onclick="location.href='link.html'" to work and load a new page in Safari (5.0.4). In my project, I am creating a drop-down navigation menu using the <select> and <option> HTML tags. I have ...

javascripthtmlsafarionclick

Tips for creating a more condensed materialized table with form elements

Currently, I am working on a timesheet table using Materialize CSS with form elements in cells. However, I find the height of the table rows to be too large for my liking. Is there any way to make the table more compact? If this is a limitation of Materi ...

htmlcssformsmaterialize

Navigational Menu in PHP

My goal is to have one link that retrieves data from a table with a specific value and another identical link that pulls data from the same table but with a different value. However, both dropdowns are displaying in the link. <div class="col-sm-9"> ...

phpjqueryhtmlcss

What could be causing the undefined status of this length function?

I need to determine the length of seconds. If the second is only one character long, I want to add a 0 in front of it. Otherwise, no action is needed. Below is my code: <p>Click the button to show the current number of seconds.</p> <p id= ...

javascriptjqueryhtmlcss

The Tailwind classes applied directly in HTML are not functional, whereas the ones from the external CSS file are effective

After testing the classes, the intended look of the page should resemble this: https://i.stack.imgur.com/BVs57.png However, it currently appears like this: https://i.stack.imgur.com/AjN3z.png The JSX code in the file is as follows: < ...

cssnext.jstailwind-css